WebGridMVC in BootStrap popup simple usage in asp.net MVC

Today I will show you how you can use webgrid in Bootstrap Modal using Ajax.BeginForm in asp.net application.

Solution

In my previous article i show you how you can use webGrid in Asp.net MVC application. if you practice this solution than you notice that when ever you click on pagination events, complete page post back and there is extra parameter in URL as a query string.

it is good if you are showing webgrid on a single page. but if you are on a page where you want to only refresh webgrid section then how you can achieve this?

Get Started

you can read my previous article which provide you help about how you can install webgrid from nuget.

Now add a new controller in your asp.net web project. Name it WebGridController and add its corresponding view.

Now in your Controller you need to write some code to get Data for webgrid. you can create a simple dummy data list or fetch it from database. i populate a list of employees with first name, last name and hire date.

In my case i use Entity framework Database first on pubs Database. My this article will help you to learn usage of Entity framework with Database first approach.

WebGridController Code.

         public ActionResult Index()
        {
            using (pubsEntities dbContext=new pubsEntities())
            {
                var GetProducts = dbContext.employees.ToList();
                return View(GetProducts);
            }
        }
    

View Code

View contains our WebGridMVC logic and AJax.Begin form which prevent to post full page to server.

I use Bootstrap Model box in which we show WebGrid. you just need to add reference bootstrap CSS and JS in your project.

        @model IEnumerable<webGridInPopUp.DataBase.employee>
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h4 class="modal-title">Employee Information</h4>
            </div>
@using (Ajax.BeginForm("Index", "WebGrid", new AjaxOptions { UpdateTargetId = "EmployeeTable", InsertionMode = InsertionMode.Replace }))
{
        <div class="modal-body">
        <div class="table table-bordered">
    @if (Model.Count() > 0)
    {
        var Grid = new WebGrid(
            canPage: true,
            rowsPerPage: 10,
            canSort: true,
            ajaxUpdateContainerId: "EmployeeTable");
        Grid.Bind(Model, rowCount: Model.Count(), autoSortAndPage: true);
        Grid.Pager(WebGridPagerModes.Numeric);
        @Grid.GetHtml(htmlAttributes: new { id = "EmployeeTable" },
                 fillEmptyRows: false,
                 tableStyle: "table table-striped table-hover",
                 mode: WebGridPagerModes.All,
                 firstText: "First",
                 previousText: "Previous",
                 nextText: "Next",
                 lastText: "Last",
                 footerStyle: "webgridview",
                 headerStyle: "grid-header-default",
                 columns: Grid.Columns(
                 Grid.Column("fname", "First Name"),
                 Grid.Column("lname", "Last Name"),
                 Grid.Column("hire_date", "Hire Date", format: (item) => string.Format("{0:dd-MM-yyyy}", item.hire_date)))
                 );
    }
                   
                </div>
            </div>
}
        <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
            
        
        

Layout changes

You need to add reference of different AJAX libraries and webgrid.js in your main layout file. add these references in your layout.

  • <script src="~/Scripts/webGrid.js"></script>
  • <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

Caution

if you find error in console that $ is not defined. then move your j-query bundle in head section.

Description

  • @model describe view is strongly typed.
  • you see whole code is wrap up inside a AJAX.begin from . which help us to prevent page post back. and its attribute UpdateTargetId = "EmployeeTable" replace webgrid with new Data.
  • you can set webgrid properties according to your need. i set per page size 10 and auto sort and page to true.
  • ajaxUpdateContainerId: "EmployeeTable". This line tell webgrid which div need to replace after AJAX callback function.
  • Bind a Model to webgrid which contain our Data.
  • Grid.Column("fname", "First Name")
    this syntax used to bind data with webGrid. first parameter takes column name which you want to bind. and second one is Column header name.
  • you can modify data inside webgrid as you can see i change date format in hire_date column.

Result

Run your project and navigate to corresponding view. you can see a button name with Open Model

Click on it. you will see a model pop-up with your webgrid

click on pagination buttons. now you can see there is no query parameter exist in URL and you page loading new data without posting back page to server.