---
title: "Add a new Row in WebGrid using MVC4"  
description: "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"  
author: "Vijay Shukla"  
published: 2013-09-28  
updated: 2014-09-18  
canonical: https://www.mindstick.com/blog/592/add-a-new-row-in-webgrid-using-mvc4  
category: "asp.net mvc"  
tags: ["asp.net mvc"]  
reading_time: 5 minutes  

---

# Add a new Row in WebGrid using MVC4

In this blog I [am trying](https://answers.mindstick.com/qa/36834/which-two-programming-languages-should-i-master-in-if-i-am-trying-to-get-into-google-or-facebook) 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](https://www.mindstick.com/forum/159366/how-to-test-regular-expressions-in-sql-without-using-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](https://www.mindstick.com/articles/12378/visual-studio-for-mac-is-out-of-beta-preview-now-officially-available) 2012 and create a blank new project.

2. Then add a new ADO.NET Entity Data Model with DemoEntities named. ([if you don](https://www.mindstick.com/forum/159346/how-is-the-exception-handled-if-you-don-t-catch-it)’t have any knowledge about how to add a ADO.NET Entity Data Model in [MVC application](https://www.mindstick.com/forum/452/do-i-need-to-install-mvc-3-4-on-web-server-to-run-mvc-application) then read How to add [ADO.NET Entity Data Model in MVC4](https://www.mindstick.com/Blog/591/How) 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](https://www.mindstick.com/articles/1132/auto-refresh-partial-view-in-asp-dot-net-mvc).

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](https://www.mindstick.com/forum/33744/how-to-use-angularjs-table-data-binding-in-asp-dot-net) will show but after clicking on [Add Contact](https://answers.mindstick.com/qa/95174/how-do-i-add-contact-information-to-outlook-email) 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](https://www.mindstick.com/forum/157821/write-a-jquery-code-that-selects-all-the-checkboxes-in-a-form-when-a-select-all-button-is-clicked): -

```
<script type="text/javascript">    $('#ClickToAdd).click(function () {        $("#divAddRow").css("display", "block");    })</script>
```

##### Output: -

\

![Add a new Row in WebGrid using MVC4](https://www.mindstick.com/blogs/f3f08c95-9b02-4e6b-9abc-a376e81cbca3/images/da55d1dc-2ccf-4144-9f3c-3145ad9987c3.png)

---

Original Source: https://www.mindstick.com/blog/592/add-a-new-row-in-webgrid-using-mvc4

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.