使用jQuery ASP.NET MVC渲染剃刀下拉列表

Question

<div style="padding-top:8px;padding-left:5px;" id="main_div">    
@Html.DropDownList("ColumnSelection", new List<SelectListItem>()
    { new SelectListItem { Text = "A Name", Value = "AName" },
    new SelectListItem { Text = "Catagory", Value = "Category" } ,
    new SelectListItem { Text = "E ID", Value = "EID" } ,
    new SelectListItem { Text = "A ID", Value = "AID" }
    }, "Select", new { @class = "large" })


    @Html.DropDownList("FilterOptions", new List<SelectListItem>()
    { new SelectListItem { Text = "Begins with", Value = "StartsWith" },
    new SelectListItem { Text = "Contains", Value = "Contains" } ,
    new SelectListItem { Text = "Doesn't contain", Value = "Not Contains" } ,
    new SelectListItem { Text = "Ends with", Value = "EndsWith" },
    new SelectListItem { Text = "Equals", Value = "5" },
    new SelectListItem { Text = "Doesn't equal", Value = "6" }
    }, "Select filter options", new { @class = "large" })

    <input type="text" id="txt_search" class="large" />
</div>

上面是我单击添加按钮时要添加的代码（新行/格）。 以下是我关注的链接。 问题是我正在使用razor Html.DropDownList就像我正在使用asp.net mvc 。 以下是我用于添加/克隆div的jquery代码，但无法渲染@html.DtopDownList 。 我指的是这个链接。

    $(
@Html.DropDownList("ColumnSelection", new List<SelectListItem>()
{ new SelectListItem { Text = "A Name", Value = "AName" },
new SelectListItem { Text = "Catagory", Value = "Category" } ,
new SelectListItem { Text = "E ID", Value = "EID" } ,
new SelectListItem { Text = "A ID", Value = "AID" }
}, "Select", new { @class = "large" })
+i
+
@Html.DropDownList("FilterOptions", new List<SelectListItem>()
{ new SelectListItem { Text = "Begins with", Value = "StartsWith" },
new SelectListItem { Text = "Contains", Value = "Contains" } ,
new SelectListItem { Text = "Doesn't contain", Value = "Not Contains" } ,
new SelectListItem { Text = "Ends with", Value = "EndsWith" },
new SelectListItem { Text = "Equals", Value = "5" },
new SelectListItem { Text = "Doesn't equal", Value = "6" }
}, "Select filter options", new { @class = "large" })

'<input type="text" id="txt_search" class="large" /><a href="#" id="remScnt">Remove</a>').appendTo(scntDiv);
        i++;

上面的代码

Answer 1

您可以尝试使用以下代码：

<div style="padding-top:8px;padding-left:5px;" id="main_div">

        @Html.DropDownList("FilterOptions", new List<SelectListItem>()    { 
       new SelectListItem { Text = "Begins with", Value = "StartsWith" },
    new SelectListItem { Text = "Contains", Value = "Contains" } ,
    new SelectListItem { Text = "Doesn't contain", Value = "Not Contains" } ,
    new SelectListItem { Text = "Ends with", Value = "EndsWith" },
    new SelectListItem { Text = "Equals", Value = "5" },
    new SelectListItem { Text = "Doesn't equal", Value = "6" }
    }, "Select filter options", new { @class = "large" })

        <input type="button" id="btnclone" value="Clone Dropdown">
    </div>

JS：

<script>
    $(function () {
        $("#btnclone").click(function () {
            $('#FilterOptions').clone().attr('id', 'choices_' + $(this).index()).insertAfter("#FilterOptions");
        });
    });
</script>

jsfiddle： http : //jsfiddle.net/Khumesh/d1jcu20x/