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 (mvc grid) and automatically bind to and display the data from a model.

 

You can refer the link for filtering, sorting, and paging in gridmvc How to use Filterable, Sortable and WithPaging in MVC using GridMvc.

 

You can refer the link for GridMvc DLL How to add GridMvc DLL in MVC.

 

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:*