Generate GridView in MVC4
  • Hi please how i can generate GridView in MVC4 thank you ... :)
  • 4 Comments sorted by
  • hi i'm going to show how we can generate gridview in mvc4 ..
    first you go to visual studion 2010 --> New project --->Mvc4  --> rasor 

    1-right click on the model and add new class called EMployee.cs,and add this namespace 
     using System.ComponentModel.DataAnnotations;

     public class Employee
            [Required(ErrorMessage="the id is requiered !!!!")]
            public int Id { get; set; }

            [Required(ErrorMessage="the name is requiered !!!!")]
            public string Nom { get; set; }


    2-right click on the same model and add class EMployeeBusnissLayer.cs,and add this method to retrive data from databse :

    public IEnumerable<Employee> Employe
                    SqlConnection conx = new SqlConnection(ConfigurationManager.AppSettings["cnx"]);
                    List<Employee> ListEmployees = new List<Employee>();
                    SqlCommand cmd = new SqlCommand("select * from Employee", conx);
                    SqlDataReader dr = cmd.ExecuteReader();
                    if (dr.HasRows)
                        while (dr.Read())
                            Employee employee = new Employee();
                            employee.Id = Convert.ToInt32(dr[0]);
                            employee.Nom = dr[1].ToString();



                    return (ListEmployees);

    3-right click on the Controller add new controller called EmployeeController,and add this code :

            // GET: /Employee/

            public ActionResult Index()
                EmployeeBusnissLayer employeeBusnissLayer = new EmployeeBusnissLayer();
                List<Employee> ListEmployees = employeeBusnissLayer.Employe.ToList();
                return View(ListEmployees);

    4-right click on this  Code and add new view called Index ,so automatically the view generate and add this code :

     @model IEnumerable<MvcWebGrid.Models.Employee>

        ViewBag.Title = "Home Page";

    <div id ="DivGrid">
            var grid = new WebGrid(source: Model, canPage: true, rowsPerPage:4, defaultSort:"ID");
            @grid.GetHtml(tableStyle: "PGrid", headerStyle: "Header", htmlAttributes: new { id = "DataTable" }, 
    columns: grid.Columns(
            grid.Column("Nom" , "Nom")


    and finally run your application i hop that help ... thank you ;) .
    you can see below images ....

    1366 x 736 - 321K
    1366 x 736 - 216K
    1366 x 736 - 218K
    1366 x 736 - 250K
    1366 x 736 - 144K
    1366 x 736 - 144K
    1366 x 768 - 203K
    1366 x 600 - 12K
  • The previous function is too long.With entity framework you can shorten this code to:

           public IEnumerable<Employee> Employe
                   var context=new EmployeeContext();
                    return context.Employees.ToList();


    More about EF here

  • yes you are right i just work without entity framework it's easy to use entity framework  thank you :).
  • Use free  kendoUI web framework with ASP.NET Web API( and you will ge better grid and  maintainable application.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, or you want to Ask a new Question, Please Login or Create a new Account by Clicking below

Login with Facebook

Popular Posts of the Week