Make partial view add item to List - asp.net-mvc

Question

I have an ASP MVC 3 page that will allow users to create a drop down list and dynamically add items to it. For example, this is how the page looks when it first loads.
The information on the left is used to specify what page the drop down list will be located (Navbar Item) and what name we are going to give the drop down list (obviously Drop Down List Name).
The information on the right (Allowed Value and Display Value) will be the specific drop down list items. When the user clicks on the Add Another link, an Ajax call goes to the controller, returns a partial view, which is then appended to the Drop Down Items <fieldset> like so:
The problem is, once the user hit's the Submit button, none of the items make it to the controller.
I'm still relatively new to ASP MVC, so I'm wondering if I'm even going about this the right way. Is this the proper way to dynamically add items to a list?
Here is how this view is originally created in the controller
public ActionResult NewList()
{
List<DropDownValues> drop = new List<DropDownValues>();
drop.Add(new DropDownValues());
return View(drop);
}
A list of type DropDownValues is created and sent to the view, which has this tag at the top
#model IEnumerable<Monet.Models.DropDownValues>
The Ajax call below
<script>
$(document).ready(function () {
$("#addItem").click(function () {
if ($('#Field').text() != "" && $('#DisplayPage').text() != "") {
$.ajax({
url: '#Url.Action("BlankDropDownItem", "DropDownValues")',
data: { field: $('#Field').val(), displayPage: $('#DisplayPage').val() },
dataType: 'html',
cache: false,
success: function (html) {
$("#items").append(html);
}
});
} else {
alert("Please enter a Drop Down List Name and Navbar Item first!");
}
return false;
});
});
</script>
calls this controller method
public ActionResult BlankDropDownItem(string field, string displayPage)
{
DropDownValues partial = new DropDownValues();
partial.Field = field;
partial.DisplayPage = displayPage;
return PartialView("DropDownItemPartial", partial);
}
which then appends this Partial View to the main page
#model Monet.Models.DropDownValues
#Html.HiddenFor(model => model.Field)
#Html.HiddenFor(model => model.DisplayPage)
<div class="editor-label">
#Html.LabelFor(model => model.AllowedValue)
</div>
<div class="label-field">
#Html.EditorFor(model => model.AllowedValue)
#Html.ValidationMessageFor(model => model.AllowedValue)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.DisplayValue)
</div>
<div class="label-field">
#Html.EditorFor(model => model.DisplayValue)
#Html.ValidationMessageFor(model => model.DisplayValue)
</div>
I'm trying to use the hidden fields in order to make sure all the new items are stored in the database with the correct Field and Navbar Item values (again, not sure if this is the proper way to go about this).
Any advice/suggestions would be greatly appreciated. Thx!

Answer 1

You could use Steven Sanderson's BeginCollectionItem helper to help you out: http://nuget.org/packages/BeginCollectionItem/
His blog post explains the principle using the WebForms view engine but it's just as applicable to Razor: http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/
If you want to read about the nuts and bolts involved in submitting collections of input fields with the same name, then have a read of Haack's blog post here: http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx
Hope this gives you some pointers!