javascript - 使用 jQuery 动态添加 MVC DropdownList HTML Helper

Question

我正在尝试使用 jQuery 动态添加 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>

下面是我的代码，

这里我为我的列表和要在 jQuery 中使用的 HTML Helper 定义全局变量

@{
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();
}

这是我正在使用的 HTML

<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" />
}

下面是动态添加 DropDownList 的 jQuery 代码

@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>
}