Home > DeveloperSection > Blogs > Add a new Row in WebGrid using MVC4

Add a new Row in WebGrid using MVC4


ASP.NET MVC ASP.NET MVC 
Ratings:
0 Comment(s)
 13051  View(s)
Rate this:

Add a new Row in WebGrid using MVC4


In this blog I am trying to make a small demo related to WebGrid, which is able to add a new blank row and after that fill that blank row and save in the database table. In WebGrid you don’t add a new row it’s done only with the help of trick below I provide you my sample code for add new Row in WebGrid.

Getting start: -

1.       Open a Visual Studio 2012 and create a blank new project.

2.       Then add a new ADO.NET Entity Data Model with DemoEntities named. (if you don’t have any knowledge about how to add a ADO.NET Entity Data Model in MVC application then read How to add ADO.NET Entity Data Model in MVC4 article)

My Sql Table Structure

USE [DEMO]

CREATE TABLE [dbo].[tblCustomerInformation](

       [CustomerName] [varchar](100) NULL,

       [CustomerAge] [int] NULL,

       [CustomerContact] [varchar](50) NULL,

       [CustomerAddress] [varchar](200) NULL,

       [CustomerId] [int] IDENTITY(1,1) NOT NULL

)

 Then Write Code in HomeController

DEMOEntity dEntity = new DEMOEntity();

public ActionResult Index()

{

     return View(dEntity.tblCustomerInformation.ToList());

}

 [HttpPost]

public ActionResult Index(tblCustomerInformation tb,IEnumerable<DynamicTable.Models.tblCustomerInformation> s)

{

     if (tb.CustomerName != null)

     {

          dEntity.tblCustomerInformation.Add(tb);

          dEntity.SaveChanges();

     }

      return View(dEntity.tblCustomerInformation.ToList());

}

ThenCreate a view where we use the WebGrid

@model IEnumerable<DynamicTable.Models.tblCustomerInformation>

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @id = "WebGridForm" }))

{

    @Html.AntiForgeryToken()

    @Html.EditorForModel()  

    <table>

        <tr>

            <td>

              

                <table>

                    <tr>

                        @dataGrid.GetHtml(tableStyle: "grid", columns: dataGrid.Columns(

                        dataGrid.Column("CustomerName",format: @<text>@item.CustomerName</text>),

                        dataGrid.Column("CustomerAge",format: @<text>@item.CustomerAge</text>),

                        dataGrid.Column("CustomerContact",format: @<text>@item.CustomerContact</text>),

                           dataGrid.Column("CustomerAddress",format: @<text>@item.CustomerAddress</text>)

                        ))

                    </tr>

                   

                     <tr>

                        <td colspan="4">

                            <div style="display: none" id="divAddRow">

                                @{

                       tblCustomerInformation t = new tblCustomerInformation();

    

                                }

                                @Html.Partial("_addDynTable", t)

                            </div>

                        </td>

                    </tr>

                    <tr>

                        <td>

                            <input type="button" value="Add Contact" id="ClickToAdd" /><input type="submit" value="Save" /></td>

                        <td>

                            </td>

                    </tr>

                </table>

                <div>

                    <div>

                    </div>

                    <div>

                    </div>

                </div>

            </td>

           

        </tr>

    </table>

}

Note: - In above lines of code highlight with green highlighter is section of calling partial view.

Then create a partial view with _addDynTable name

@model DynamicTable.Models.tblCustomerInformation

<table>

    <tr>

        <td>

            @Html.TextBoxFor(m=>m.CustomerName)

        </td>

        <td>

            @Html.TextBoxFor(m=>m.CustomerAge)

        </td>

        <td>

            @Html.TextBoxFor(m=>m.CustomerContact)

        </td>

        <td>

            @Html.TextBoxFor(m=>m.CustomerAddress)

        </td>

    </tr>

  

</table>

Note I’m using a trick when application load is first time then entire table data will show but after clicking on Add Contact button add a new row in the bottom of the Gird actually I’m using a Partial view in a div and its display set by default none when I click on Add Contact then It’s Display set the block with the help of jQuery below I provide you a jQuery Code: -

<script type="text/javascript">

    $('#ClickToAdd).click(function () {

        $("#divAddRow").css("display", "block");

    })

</script>

 Output: -


Don't want to miss updates? Please click the below button!

Follow MindStick