blog

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

Add a new Row in WebGrid using MVC4

Vijay Shukla25303 28-Sep-2013

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 _addDynTablename

@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 Contactbutton 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 Contactthen 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: -


Add a new Row in WebGrid using MVC4

Updated 18-Sep-2014

Leave Comment

Comments

Liked By