This library requires JQuery, JQuery-UI available on the client.

This tutorial shows how to use this library in an Asp.Net MVC 4 application.

A basic knowledge of the MVC framework is required.

We will create a page to display a list of paged Contacts using the Ajax Grid. Clicking on a Contact will take you to a page where the Contact details can be edited.

Create a new ASP.NET MVC 4 Web Application using the Internet Application template.
Visual Studio 2012 comes with MVC 4 installed. If you are using Visual Studio 2010 you need to download and install the MVC 4 framework.

Download the library and unzip into the root folder of your mvc application.

In the "~/App_Start/BundleConfig.cs" file add the following to the RegisterBundles method
public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {    
        ...
        //Make sure the jquery and jqueryui bundles are also registered here   

        bundles.Add(new ScriptBundle("~/bundles/web-ajax/scripts").Include(
            "~/web-ajax/scripts/web-ajax-grid.js",
            "~/web-ajax/scripts/web-ajax-data.js"));

        bundles.Add(new StyleBundle("~/web-ajax/css").Include(
            "~/web-ajax/css/web-ajax-grid.css",
            "~/web-ajax/css/web-ajax-data.css"));
    }

In the "~/Views/Shared/_Layout.cshtml" file add the following to the <head> tag
<!DOCTYPE html>
<html lang="en">
    <head>
        ...

        @Styles.Render("~/web-ajax/css")

	@Scripts.Render("~/bundles/jquery")

	@Scripts.Render("~/bundles/jqueryui")
        
	@Scripts.Render("~/bundles/web-ajax/scripts")
        
    </head>
    ...



Add a new class file ContactModels.cs file to the Models folder. This will contain the model for our Contact data.
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Data.Entity;
using System.Globalization;
using System.Web.Mvc;
using System.Web.Security;

namespace MvcApplication1.Models
{
    public class Contact
    {
        public long Id {get;set;}

        public string Name {get;set;}

        public string Address {get;set;}

        public DateTime DateOfBirth {get;set;}

        public string Email { get; set; }

        public string Phone { get; set; }

        public string Website { get; set; }
    }	
}

Right click on the Controllers folder and add a new controller called ContactsController
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcApplication1.Controllers
{
    using Models;

    public class ContactsController : Controller
    {
        Contact[] contacts; 

        public ContactsController()
        {
            //Set up the sample data - all contacts
            var l=new List<Contact>();
            for(var i=0;i<24;i++)
            {
                 l.Add(new Contact(){
                    Id=i+1,
                    Name="John Murphy",
                    Address="55, Geen Lawns", 
                    DateOfBirth=new DateTime(1975, 1, 1)
                 });
             }
             contacts = l.ToArray();
        }

        public ActionResult Index()
        {
            return View();
        }		

        [HttpPost]
        public ActionResult GetPage(int? rowsPerPage, int page)
        {
            try
            {
                var totalcount = contacts.Length;
      
		if (!rowsPerPage.HasValue)
			rowsPerPage = totalcount;

                var pageOfPeople = contacts.Skip((rowsPerPage ?? 0) * page)
                                          .Take(rowsPerPage ?? totalcount).ToArray();
				
                return Json(new { TotalCount = totalcount, Data = pageOfPeople });
             }
             catch (Exception x)
             {
                 return Json(new { Success = false, Message= x.Message});
             }
        }

        public ActionResult Contact(int id)
        {
            var contact = contacts.FirstOrDefault(c => c.Id == id);

            return View(contact);
        }

        [HttpPost]
        public ActionResult Save(Contact c)
        {
            try
            {
                 return Json(new { Success=true, Data = c.Id });
            }
	    catch (Exception x) 
            {
                return Json(new { Success = false, Message = x.Message });
            }
	}
    }
}

Add a new view for the Index action called Index and use all the defaults (do this by right clicking inside the Index() method and select "Add View...")
@{
	ViewBag.Title = "Contacts";
}


<div class="ph">
	<ul>
		<li>Contacts</li>
	</ul>
</div>


<table id="myGrid" class="ajax-grid" 
	href="@Href("~/contacts/getpage")" 
	rowsperpage="10" 
	rowurl="@Href("~/contacts/contact")">
		<tr>
			<th>Id</th>
			<th>Name</th>
			<th>Address</th>
			<th bind="DateOfBirth">Date of Birth</th>
		</tr>
</table>






Last edited Dec 19, 2012 at 5:54 PM by dpembroke, version 34

Comments

No comments yet.