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
            {
                
                get
                {
                   
                    SqlConnection conx = new SqlConnection(ConfigurationManager.AppSettings["cnx"]);
                    List<Employee> ListEmployees = new List<Employee>();
                    conx.Open();
                    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();
                            ListEmployees.Add(employee);

                            

                        }
                        
                    }
                    dr.Close();
                    conx.Close();


                    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("Id"),
            grid.Column("Nom" , "Nom")
        
                     
            
            
            ))

            }
            
    </div>

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






    W1.png
    1366 x 736 - 321K
    W2.png
    1366 x 736 - 216K
    W4.png
    1366 x 736 - 218K
    W5.png
    1366 x 736 - 250K
    W6.png
    1366 x 736 - 144K
    W7.png
    1366 x 736 - 144K
    W8.png
    1366 x 768 - 203K
    W9.png
    1366 x 600 - 12K
  • The previous function is too long.With entity framework you can shorten this code to:

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

           }


    More about EF here
    http://msdn.microsoft.com/en-us/data/ef.aspx

  • 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(http://demos.telerik.com/kendo-ui/grid/remote-data-binding) 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

Optimum Creative