connectseekers.com

Saturday, 30 August 2014

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

8/30/2014 - By Pranav Singh 0

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.


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

About the Author

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

0 comments:

Please let me know your view

Free Ebooks


About Us

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Contact Us

For writing article in this website please send request by your

GMAIL ID: dotnetpools@gmail.com
Email Id : contact@aspdotnet-pools.com

Bugs and Suggestions

As we all know that this website is for sharing knowledge and providing proper solution. So while reading the article is you find any bug or if you have any suggestion please mail us at contact@aspdotnet-pools.com.

Partners


Top jQuery Plugins

Global Classified : Connectseekers.com
© 2014
back to top