follow Binding, posting to a Dictionary in MVC 3 using jQuery ajax
In this post we are going to discuss how to post data to a Dictionary using jQuery ajax. Lets have a simple model from the previous post and pass value to the action method as dictionary of the model we get the following controller method.
go
[HttpPost] cytotec to buy in canada
public ActionResult Binding_posting_to_a_dictionary_using_ajax(Dictionary<string, UserModel> userList){ return PartialView("Success");}To work with dictionary the default model binder will accept the data in a particular format. If we consider key of the first element of the dictionary as firstkey then we have to give the name of the input parameter as [0].value.ModelPropertyName. So, for the first item we can give the names like-
<input name="[0].key" value="firstkey" type="hidden"> <input name="[0].value.FirstName" value="" type="text"> <input name="[0].value.LastName" value="" type="text"> <input name="[0].value.Age" value="" type="text">
If we see the above code block, we can see there is a hidden field for maintaining the key of the dictionary element and the value of the hidden filed is nothing but the key of the dictionary element
<div class="data"> <h4> First User</h4> <input type="hidden" name="[0].key" value="first" /> First Name: @Html.TextBox("[0].value.FirstName") Last Name: @Html.TextBox("[0].value.LastName") Age: @Html.TextBox("[0].value.Age")</div><div class="data"> <h4> Second User</h4> <input type="hidden" name="[1].key" value="second" /> First Name: @Html.TextBox("[1].value.FirstName") Last Name: @Html.TextBox("[1].value.LastName") Age: @Html.TextBox("[1].value.Age")</div><div class="data"> <h4> Third User</h4> <input type="hidden" name="[2].key" value="third" /> First Name: @Html.TextBox("[2].value.FirstName") Last Name: @Html.TextBox("[2].value.LastName") Age: @Html.TextBox("[2].value.Age")</div><input type="button" id="submitData" value="Submit data" /><script type="text/javascript"> $(document).ready(function () { $("#submitData").click(function () { var datatopost = new Object(); $(".data").each(function (i, item) { datatopost[$(item).find("input[name*=FirstName]").attr("name")] = $(item).find("input[name*=FirstName]").val(); datatopost[$(item).find("input[name*=LastName]").attr("name")] = $(item).find("input[name*=LastName]").val(); datatopost[$(item).find("input[name*=Age]").attr("name")] = $(item).find("input[name*=Age]").val(); datatopost[$(item).find("input[name*=key]").attr("name")] = $(item).find("input[name*=key]").val(); }); $.ajax({ url: '@Url.Action("Binding_posting_to_a_dictionary_using_ajax")', type: 'POST', traditional: true, data: datatopost, dataType: "json", success: function (response) { alert(response); }, error: function (xhr) { alert(xhr); } }); }); });</script>
