Home > MVC > How to use grid in MVC using GridMvc



How to use grid in MVC using GridMvc

In this article, we have described with an example code, how to use a grid in MVC using GridMvc.


In this article, we have described with an example code, how to use a grid in MVC using GridMvc.

This is a very useful control in MVC. we can use this for easily filtering, sorting and paging of data in gridmvc and automatically bind to and display the data from a model.

 

Required Namespace:

You will need to use the following namespaces.

using System.Configuration;

using System.Data.SqlClient;

 

Index.cshtml

We have used the gridmvc code below. You can have a look at it and learn.

@model IEnumerable<Html_Grid_MVC.Models.Customers>

@{

    ViewBag.Title = "How to use grid in mvc using GridMvc";

}

@using GridMvc.Html

<h2>Index</h2>

<script src="~/Scripts/jquery-1.10.2.js"></script>

<link href="@Url.Content("~/Content/Gridmvc.css")" rel="stylesheet" />

<script src="@Url.Content("~/Scripts/gridmvc.min.js")"></script>

<script src="~/bootstrap/js/bootstrap.min.js"></script>

<link href="~/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

<link href="~/Content/Site.css" rel="stylesheet" />

<div class="container">

    <div style="margin-top: 10px"></div>

    <div class="logo col-sm-12 text-center col-md-12 ">

    </div>

    <div class="clearfix"></div>

    <fieldset>

        <legend class="legend">All Customers Detail</legend>

        <div style="margin-top: 5px"></div>

        <div class="test" style="overflow: scroll; height: 500px; width: 1000px">

            <div style="width: 1000px">

                <div class="panel">

                    <div class="panel-body">

                        @Html.Grid(Model).Columns(columns =>

                    {

                        columns.Add(c => c.customerID).Titled("CustomerID");

                        columns.Add(c => c.FirstName).Titled("FirstName");

                        columns.Add(c => c.LastName).Titled("LastName");

                        columns.Add(c => c.CreatedDate).Titled("CreatedDate").Format("{0:dd/MM/yyyy}");

                        columns.Add(c => c.Address).Titled("Address");

                    }).WithPaging(10);

                    </div>

                </div>

            </div>

        </div>

    </fieldset>

</div>

 

Model C#

we have provided model code below.

public class Customers

    {

        public int customerID { get; set; }

        public string FirstName { get; set; }

        public string LastName { get; set; }

        public string Address { get; set; }

        public DateTime CreatedDate { get; set; }

    }

 

Controller C#

public ActionResult Index()

        {

            List<Customers> customers = PopulateCustomers();

            return View(customers);

        }

 

        [NonAction]

        private List<Customers> PopulateCustomers()

        {

 

            List<Customers> customers = new List<Customers>();

            string constr = Convert.ToString(ConfigurationManager.ConnectionStrings["Connection"]);

            SqlConnection con = new SqlConnection(constr);

            SqlCommand cmd = new SqlCommand("Select * from dim_Customer_Master", con);

            con.Open();

            SqlDataReader idr = cmd.ExecuteReader();

            if (idr.HasRows)

            {

                while (idr.Read())

                {

                    customers.Add(new Customers

                    {

                        customerID = Convert.ToInt32(idr["Customer_id"]),

                        FirstName = Convert.ToString(idr["FirstName"]),

                        LastName = Convert.ToString(idr["lastname"]),

                        CreatedDate = Convert.ToDateTime(idr["createddate"]),

                        Address = Convert.ToString(idr["Address"])

                    });

                }

            }

 

            return customers;

        }

 

Output

How to use grid in MVC using GridMvc

 

Download



Note: All contents are copyright of their authors.



Comments



Leave a Reply

Comment:*
Email ID:*


Name:*