Add Textbox In WebGrid and Access TextBox Value In Controller In Asp.net MVC Using C#.Net

This article will show you how you can add @Html.Textbox In an asp.net mvc webgrid and how you can retrieve the added value in the mvc webgrid textbox in c#.net at controller . This article can be used in MVC3, MVC4, MVC5.

Some of my previous articles are as follows: Auto Increment Row Value In Asp.net MVC WebGrid Using C#.Net, Frozen Rows and Columns in Asp.Net Mvc Webgrid Using jQuery Like Excel Sheet, How to Bind Data to Webgrid in ASP.net MVC Using C#.Net, MVC WebGrid Custom paging With Page no and Shorting Data Using C#.Net, Code to Dynamically Bind Image To Asp.net MVC WebGrid, How to Add Email Id Hyperlink or Mailto Link in Asp.net MVC WebGrid, How To Disable Sorting in Asp.net MVC Webgrid, Display User Detail Using jQuery ToolTip In Asp.Net MVC WebGrid.

So for this article first we will create a new asp.net application and in this application first we will create a model class file, and add the below code in your model class file.

using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MvcApplication6.Models {     public class StudentModel     {         public List<Student> StudentList { get; set; }     }     public class Student     {         public string Name { get; set; }         public string ClassOfStudent { get; set; }         public string Section { get; set; }         public string Address { get; set; }     } }

After this we will add a new controller file and add the below code in it.

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MvcApplication6.Models {     public class HomeController : Controller     {         //         // GET: /Home/         public ActionResult Index()         {             StudentModel _objstudentmodel = new StudentModel();             _objstudentmodel.StudentList = new List<Student>();             _objstudentmodel.StudentList.Add(new Student { Name = "Name1", ClassOfStudent = "12th", Section = "B", Address = "Address1" });             _objstudentmodel.StudentList.Add(new Student { Name = "Name2", ClassOfStudent = "5th", Section = "A", Address = "Address2" });             _objstudentmodel.StudentList.Add(new Student { Name = "Name3", ClassOfStudent = "10th", Section = "C", Address = "Address3" });             _objstudentmodel.StudentList.Add(new Student { Name = "Name4", ClassOfStudent = "1st", Section = "A", Address = "Address4" });             _objstudentmodel.StudentList.Add(new Student { Name = "Name5", ClassOfStudent = "8th", Section = "B", Address = "Address5" });             return View(_objstudentmodel);         }         [HttpPost]         public ActionResult Index(StudentModel _objstudentmodel)         {             return View(_objstudentmodel);         }     } }

In above code we have prepared data in the list collection and return the collection to view and now we will create the view and add the code. The view code is the main part of this article. This section is most important because this section of code will show you to access the added value at controller end when we submit the form.

@model  MvcApplication6.Models.StudentModel @{     ViewBag.Title = "Add Textbox In WebGrid and Access TextBox Value In Asp.net MVC Using C#.Net"; } @*Dynamic Row Add to WebGrid on Button click In Asp.net MVC Using C#.Net*@ <style type="text/css">     table     {         font-family: verdana,arial,sans-serif;         font-size: 11px;         color: #333333;         border-width: 1px;         border-color: #666666;         border-collapse: collapse;     }     table th     {         border-width: 1px;         padding: 8px;         border-style: solid;         border-color: #666666;         background-color: #dedede;     }     table td     {         border-width: 1px;         padding: 8px;         border-style: solid;         border-color: #666666;         background-color: #ffffff;     }     input     {         width:60px;     } </style> @using (Html.BeginForm("Index", "Home")) {     var grid = new WebGrid(Model.StudentList, canSort: false, canPage: false);     int rowNum = 0;     <div>         @grid.GetHtml(columns:             grid.Columns             (                 grid.Column("RowNumber", format: item => rowNum = rowNum + 1),                 grid.Column("Name", format: (item) => Html.TextBox("StudentList[" + (rowNum - 1).ToString() + "].Name", (object)item.Name)),                 grid.Column("Class", format: (item) => Html.TextBox("StudentList[" + (rowNum - 1).ToString() + "].ClassOfStudent", (object)item.ClassOfStudent)),                 grid.Column("Section", format: (item) => Html.TextBox("StudentList[" + (rowNum - 1).ToString() + "].Section", (object)item.Section)),                 grid.Column("Address", format: (item) => Html.TextBox("StudentList[" + (rowNum - 1).ToString() + "].Address", (object)item.Address))             ), mode: WebGridPagerModes.Numeric)     </div>     <input type="submit" value="Submit" /> }

Please check the below mention code.

grid.Column("RowNumber", format: item => rowNum = rowNum + 1), grid.Column("Name", format: (item) => Html.TextBox("StudentList[" + (rowNum - 1).ToString() + "].Name", (object)item.Name))

In this piece of code I have used rowNum variable to make the incremented value and then we have created the textbox control name in the form of array. Here when you run the page and check the page code your textbox code will look as shown below. In this code when post back place we will get the all the collection at controller end. Because when post back take place at that time controller expect the control name in the form of array.

<tr>                 <td>                     1                 </td>                 <td>                     <input id="StudentList_0__Name" name="StudentList[0].Name" type="text" value="Name1" />                 </td>                 <td>                     <input id="StudentList_0__ClassOfStudent" name="StudentList[0].ClassOfStudent" type="text"                         value="12th" />                 </td>                 <td>                     <input id="StudentList_0__Section" name="StudentList[0].Section" type="text" value="B" />                 </td>                 <td>                     <input id="StudentList_0__Address" name="StudentList[0].Address" type="text" value="Address1" />                 </td>             </tr>             <tr>                 <td>                     2                 </td>                 <td>                     <input id="StudentList_1__Name" name="StudentList[1].Name" type="text" value="Name2" />                 </td>                 <td>                     <input id="StudentList_1__ClassOfStudent" name="StudentList[1].ClassOfStudent" type="text"                         value="5th" />                 </td>                 <td>                     <input id="StudentList_1__Section" name="StudentList[1].Section" type="text" value="A" />                 </td>                 <td>                     <input id="StudentList_1__Address" name="StudentList[1].Address" type="text" value="Address2" />                 </td>             </tr>

In above code StudentList is the model list property of the StudentModel and name, classofstudent, section and address is the property or the field name of the model.

Now we have done. Run the application to check the output.

Now click on the submit button.

 So here please check the above controller code in this we are getting the collection.

DOWNLOAD