Render razor dropdown using 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>

Above is my code which I want to add(new row/div) when I click the add button. The following is the link I am following. The problem is that I am using razor Html.DropDownList as I am using asp.net mvc . Following is my jquery code which I am using to add/clone div but I am not able to render @html.DtopDownList . I am refering this link.

    $(
@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++;

the above code

Answer 1

You can try using below code:

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