添加动态使用jQuery

Question

我尝试添加动态使用jQuery

此代码，我成功地写了创建下拉列表中可以根据需要，但是代码渲染意外格式的HTML标签，在这里它把DropDownList的帮手MVC DROPDOWNLIST HTML助手每个属性值的双引号！ （如姓名=“” HousingUnitCount“”）

<select class="&quot;form-control" input-sm&quot;="" id="&quot;HousingUnitCount&quot;" name="&quot;HousingUnitCount&quot;"><option value="&quot;&quot;">Choose the number of housing Unit</option> 
<option value="&quot;0&quot;">0</option> 
<option value="&quot;1&quot;">1</option> 
<option value="&quot;2&quot;">2</option> 
<option value="&quot;3&quot;">3</option> 
<option value="&quot;4&quot;">4</option> 
<option value="&quot;5&quot;">5</option> 
</select> 

下面是代码我有，

这里我定义为我的列表和HTML辅助全局变量jQuery的

@{ 
ViewBag.Title = "TestingDynamicFormWithjQuery"; 

var unitsCountList = new List<SelectListItem> { new SelectListItem() {Text="0", Value="0"}, 
               new SelectListItem() {Text="1", Value="1"},  
               new SelectListItem() {Text="2", Value="2"}, 
               new SelectListItem() {Text="3", Value="3"}, 
               new SelectListItem() {Text="4", Value="4"}, 
               new SelectListItem() {Text="5", Value="5"} 
               }; 

var housingUnit = Html.DropDownList("HousingUnitCount", unitsCountList, "Choose the number of housing Unit", htmlAttributes: new { @class = "form-control input-sm" }).ToHtmlString(); 
} 

使用

这是我使用

<button id="addUnitBtn" type="button" name="addUnitBtn" class="btn btn-primary"> 
    <span class="glyphicon glyphicon-plus-sign"></span> Add Unit 
</button> 

@using(Html.BeginForm()) 
{ 

    <div id="addUnitDiv"> 

    </div> 

    <br/><br /><br /> 
    <input id="Submit" type="submit" value="Save" class="btn btn-primary btn-lg" /> 
} 

下面是jQuery的代码中添加的DropDownList dynamicall的HTML Ÿ

@section Scripts{ 
<script type="text/javascript"> 
    $(window).ready(function() { 
     console.log('windows ready'); 
     $('button[name="addUnitBtn"]').on("click", function() { 
      console.log('btn clicked'); 
      $("#addUnitDiv").append('<div>@Ajax.JavaScriptStringEncode(housingUnit)</div>'); 
     }); 
    }); 
</script> 
} 

Answer 1

这个怎么样

<script type="text/html" id="template"> 
     <div class="template-wrapper"> 
      @Html.DropDownList("HousingUnitCount", unitsCountList, "Choose the number of housing Unit", htmlAttributes: new { @class = "form-control input-sm"}) 
     </div> 

    </script> 

然后在你的JavaScript代码：

@section Scripts{ 
<script type="text/javascript"> 
    $(window).ready(function() { 
     console.log('windows ready'); 
     $('button[name="addUnitBtn"]').on("click", function() { 
      console.log('btn clicked'); 

      var $template = $.trim($($('#template').html())); 

      updateTemplateElementsNameAttr($template); 

      $("#addUnitDiv").append($template); 
     }); 
    }); 

function updateTemplateElementsNameAttr($template){ 
    var nextIndex = $('.template-wrapper').length; 

    $template.find('select').each(function(){ 
    var nameAttr = $(this).attr('name') + '[' + nextIndex + ']'; 
    $(this).attr('name', nameAttr); 

    } 
} 
</script> 
}