Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

forum

home / developersection / forums / how to use webgrid in mvc
Ask Question
Anonymous User
Anonymous User

Other

I am a content writter !

Message

2 Answers

Aryan Kumar
Aryan Kumar 03 Jul 2023
Report Abuse

Sure, here are the steps on how to use WebGrid in MVC:

  1. Add the Web Grid library to your ASP.NET project.
  2. Create a view that will display the Web Grid.
  3. In the view, use the Web Grid to display the data.
  4. Bind the Web Grid to a model.

Here is an example of the code:

HTML

@{
    // Get the data for the Web Grid
    var data = GetData();
}

<html>
<head>
    <title>Web Grid</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/aspnet-webgrid/4.0.5/webgrid.min.js"></script>
</head>
<body>
    <h1>Web Grid</h1>

    <div id="web-grid">
    </div>

    <script>
    $(document).ready(function() {
        // Create the Web Grid
        var webGrid = $("#web-grid").webGrid({
            dataSource: data
        });
    });
    </script>
</body>
</html>

This code will add the Web Grid library to your ASP.NET project. The GetData function will get the data for the Web Grid. The web-grid element will be used to create the Web Grid. The dataSource attribute of the web-grid element will be bound to the data returned by the GetData function.

The web-grid element will be bound to the webGrid method of the Web Grid library. The webGrid method will handle the events of the Web Grid.

Here are some of the features of WebGrid:

  • Paging: WebGrid can be paginated to display a limited number of records at a time.
  • Sorting: WebGrid can be sorted by any column.
  • Filtering: WebGrid can be filtered to display only the records that match the specified criteria.
  • Editing: WebGrid can be used to edit the data in the grid.
  • Deleting: WebGrid can be used to delete the data in the grid.
Anonymous User
Anonymous User 25 Dec 2015
Report Abuse

WebGrid is most powerful tools to list records from database in web application. Like ASP.NET Web Forms GridView, DataList, ASP.NET MVC didn't had any built in data controls. WebGrid that does almost all work of ASP.NET Web Form GridView and it is simple enough too.

Index.cshtml

@model IList<ForumMVC.Employee>
@{
    ViewBag.Title = "Index";
}
 @{  
var grid = new WebGrid(Model); 
}
<h1>Employee List </h1> 
<div id="grid"> 
@grid.GetHtml()
</div> 
 
HomeController 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc; 
using ForumMVC;
using System.Data.Entity;
namespace ForumMVC.Controllers
{
    public class HomeController : Controller
    {
        forumEntities db = new forumEntities();
        public ActionResult Index()
        {
            List<Employee> Emplst = db.Employee.ToList();
            return View(Emplst);
        }
    }
}

Anonymous User

MindStick Training