{"id":4887,"date":"2024-02-06T08:00:51","date_gmt":"2024-02-06T08:00:51","guid":{"rendered":"https:\/\/isophal.com\/?p=4887"},"modified":"2024-02-06T08:00:52","modified_gmt":"2024-02-06T08:00:52","slug":"introduction-to-model-binding-in-asp-net-mvc-part-2","status":"publish","type":"post","link":"https:\/\/isophal.com\/news\/2024\/02\/06\/4887.html\/","title":{"rendered":"Introduction To Model Binding in ASP.Net MVC: Part 2"},"content":{"rendered":"\n<p><strong>Introduction<\/strong><\/p>\n\n\n\n<p>Since I described the&nbsp;<a href=\"https:\/\/www.c-sharpcorner.com\/UploadFile\/4b0136\/introduction-to-model-binding-in-Asp-Net-mvc\/\">Model Binding in ASP.NET MVC<\/a>&nbsp;in the previous article, we&#8217;ll move further here. We learned about the model binding process with various types of models in the previous article and here we&#8217;ll learn some more types such as the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Binding with a List of Simple Types<\/li>\n\n\n\n<li>Binding with a List of Class Types<\/li>\n<\/ul>\n\n\n\n<p><strong>Binding with a List of Simple Types<\/strong><\/p>\n\n\n\n<p>In this process we&#8217;ll receive multiple records at a time. Use the following procedure to create the sample.<\/p>\n\n\n\n<p><strong>Step 1:<\/strong>&nbsp;Edit the&nbsp;<em>Index.cshtml<\/em>&nbsp;page with the following code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"form-horizontal\"&gt;\n  &lt;h4&gt;Enter Details&lt;\/h4&gt;\n  &lt;hr \/&gt;\n  &lt;div class=\"form-group\"&gt;\n       @Html.Label(\"StudentID:\", new { @class = \"col-md-2 control-label\" })\n       &lt;div class=\"col-md-10\"&gt;\n           @Html.TextBox(\"StudentID\")\n       &lt;\/div&gt;\n  &lt;\/div&gt;\n  &lt;div class=\"form-group\"&gt;\n      @Html.Label(\"StudentName:\", new { @class = \"col-md-2 control-label\" })\n        &lt;div class=\"col-md-10\"&gt;\n            @Html.TextBox(\"StudentName\")\n        &lt;\/div&gt;\n  &lt;\/div&gt;\n   &lt;div class=\"form-group\"&gt;\n       @Html.Label(\"StudentID:\", new { @class = \"col-md-2 control-label\" })\n       &lt;div class=\"col-md-10\"&gt;\n           @Html.TextBox(\"StudentID\")\n        &lt;\/div&gt;\n   &lt;\/div&gt;\n   &lt;div class=\"form-group\"&gt;\n       @Html.Label(\"StudentName:\", new { @class = \"col-md-2 control-label\" })\n       &lt;div class=\"col-md-10\"&gt;\n           @Html.TextBox(\"StudentName\")\n       &lt;\/div&gt;\n   &lt;\/div&gt;\n   &lt;div class=\"form-group\"&gt;\n       @Html.Label(\"StudentID:\", new { @class = \"col-md-2 control-label\" })\n       &lt;div class=\"col-md-10\"&gt;\n           @Html.TextBox(\"StudentID\")\n        &lt;\/div&gt;\n   &lt;\/div&gt;\n   &lt;div class=\"form-group\"&gt;\n       @Html.Label(\"StudentName:\", new { @class = \"col-md-2 control-label\" })\n       &lt;div class=\"col-md-10\"&gt;\n           @Html.TextBox(\"StudentName\")\n       &lt;\/div&gt;\n   &lt;\/div&gt;\n   &lt;div class=\"form-group\"&gt;\n       &lt;div class=\"col-md-offset-2 col-md-10\"&gt;\n           &lt;input type=\"submit\" value=\"Submit\" class=\"btn btn-default\" \/&gt;\n           @ViewBag.Message\n        &lt;\/div&gt;\n   &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>MarkupCopy<\/p>\n\n\n\n<p>In the code above you can see that the&nbsp;<em>StudentID<\/em>&nbsp;and&nbsp;<em>StudentName<\/em>&nbsp;are used to accept the ID and Names value. Based on these names the default model binder considers all the values with same name as a part of a single collection.<\/p>\n\n\n\n<p><strong>Step 2:<\/strong>&nbsp;Now modify the<em>&nbsp;Index()<\/em>&nbsp;in the<em>&nbsp;<\/em>controller with the following code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;HttpPost]\npublic ActionResult Index(IList&lt;string&gt; StudentID, IList&lt;string&gt; StudentName)\n{\n     ViewBag.Message = \"Your Student data retrieved successfully for\" + \" \" +  StudentID.Count + \"Records!!\";\n     return View();\n}<\/code><\/pre>\n\n\n\n<p>C#Copy<\/p>\n\n\n\n<p><strong>Step 3:<\/strong>&nbsp;Now run the application and open the controller as in the following:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.c-sharpcorner.com\/UploadFile\/4b0136\/introduction-to-model-binding-in-Asp-Net-mvc-part-2\/Images\/Submit%20List%20of%20Records.jpg\" alt=\"Submit List of Records\"\/><\/figure>\n\n\n\n<p><strong>Step 4:<\/strong>&nbsp;You can see in the Locals that both the parameters of&nbsp;<em>IList<\/em>&nbsp;types will hold the three values as in the following:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.c-sharpcorner.com\/UploadFile\/4b0136\/introduction-to-model-binding-in-Asp-Net-mvc-part-2\/Images\/View%20List%20in%20Locals.jpg\" alt=\"View List in Locals\"\/><\/figure>\n\n\n\n<p><strong>Binding with a List of Class Types<\/strong><\/p>\n\n\n\n<p>We used a list of strings to hold the values in the previous section. We can also receive the values as a list of any class objects. Use the following procedure to use it.<\/p>\n\n\n\n<p><strong>Step 1:<\/strong>&nbsp;Create a class named&nbsp;<em>Customer<\/em>&nbsp;in the Models folder and replace the code with the following code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>public class Customer\n{\n    public int CustomerID { get; set; }\n    public string CustomerName { get; set; }\n    public string CustomerContact { get; set; }\n}<\/code><\/pre>\n\n\n\n<p>C#Copy<\/p>\n\n\n\n<p><strong>Step 2:<\/strong>&nbsp;Design the<em>&nbsp;Index()<\/em>&nbsp;in the<em>&nbsp;<\/em>controller with the following code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>public ActionResult Index(IList&lt;Customer&gt; Customers)\n{\n    ViewBag.Message = \"Your Student data retrieved successfully for\" + \" \" + Customers.Count + \"Records!!\";\n    return View();\n}<\/code><\/pre>\n\n\n\n<p>C#Copy<\/p>\n\n\n\n<p><strong>Step 3:<\/strong>&nbsp;Now design the view with the following code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"form-horizontal\"&gt;\n    &lt;h4&gt;Enter Details&lt;\/h4&gt;\n    &lt;hr \/&gt;\n    &lt;div class=\"form-group\"&gt;\n        @Html.Label(\"CustomerID:\", new { @class = \"col-md-2 control-label\" })\n        &lt;div class=\"col-md-10\"&gt;\n            @Html.TextBox(\"&#91;0].CustomerID\")\n            @Html.TextBox(\"&#91;1].CustomerID\")\n            @Html.TextBox(\"&#91;2].CustomerID\")\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class=\"form-group\"&gt;\n        @Html.Label(\"CustomerName:\", new { @class = \"col-md-2 control-label\" })\n        &lt;div class=\"col-md-10\"&gt;\n            @Html.TextBox(\"&#91;0].CustomerName\")\n            @Html.TextBox(\"&#91;1].CustomerName\")\n            @Html.TextBox(\"&#91;2].CustomerName\")\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class=\"form-group\"&gt;\n        @Html.Label(\"CustomerConact:\", new { @class = \"col-md-2 control-label\" })\n        &lt;div class=\"col-md-10\"&gt;\n            @Html.TextBox(\"&#91;0].CustomerContact\")\n            @Html.TextBox(\"&#91;1].CustomerContact\")\n            @Html.TextBox(\"&#91;2].CustomerContact\")\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class=\"form-group\"&gt;\n        &lt;div class=\"col-md-offset-2 col-md-10\"&gt;\n            &lt;input type=\"submit\" value=\"Submit\" class=\"btn btn-default\" \/&gt;\n            @ViewBag.Message\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>MarkupCopy<\/p>\n\n\n\n<p>In the code above, we&#8217;ve created a strongly typed view with the&nbsp;<em>Customer<\/em>&nbsp;class as its model. Using the naming convention the default binder can pick the values that belong to the specific index and assign to the corresponding properties.<\/p>\n\n\n\n<p><strong>Step 4:<\/strong>&nbsp;Now run the application and open the controller as in the following:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.c-sharpcorner.com\/UploadFile\/4b0136\/introduction-to-model-binding-in-Asp-Net-mvc-part-2\/Images\/Multiple%20Records.jpg\" alt=\"Multiple Records Insertion in MVC\"\/><\/figure>\n\n\n\n<p><strong>Step 5:<\/strong>&nbsp;You can see the multiple Customer objects received as a list as in the following:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.c-sharpcorner.com\/UploadFile\/4b0136\/introduction-to-model-binding-in-Asp-Net-mvc-part-2\/Images\/Receiving%20list%20of%20multiple%20objects.jpg\" alt=\"Receiving list of multiple objects\"\/><\/figure>\n\n\n\n<p><strong>Summary<\/strong><\/p>\n\n\n\n<p>This article described the DefaultModelBinder class that can take care of primitive types, class types and collections. We can also create a custom model binder. Thanks for reading.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Since I described the&nbsp;Model Binding in&hellip;<\/p>\n","protected":false},"author":1,"featured_media":4888,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[189,188,140],"tags":[191],"class_list":["post-4887","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-asp-net","category-c-sharp","category-programming","tag-asp-net"],"_links":{"self":[{"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/posts\/4887","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/comments?post=4887"}],"version-history":[{"count":1,"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/posts\/4887\/revisions"}],"predecessor-version":[{"id":4889,"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/posts\/4887\/revisions\/4889"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/media\/4888"}],"wp:attachment":[{"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/media?parent=4887"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/categories?post=4887"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/tags?post=4887"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}