08 October 2010

WebDataGrid in ASP.NET MVC Application

After writing the other three blogs (introduction/Code Sample/Test sample) on ASP.NET MVC 2.0, I was planned to get in to some of the details of routing, areas stuff like that. But some of my friends who were working with some sample MVC using WebDataGrid, were asking me few questions on that. So I thought to come up with a code sample on that. But I did not got any evolution version of WebDataGrid from Infragistics to work with.So for time being we can see the sample of ASP.NET Grid view. The same way you can consume WebDataGrid too. But it is true that we can’t give samples for lot of in built features which coming with   WebDataGrid like sorting, column resizing or whatever. 
Ok come back to the sample that we already created. If we don’t have please visit the link. We are going to do following steps:
  1. Create a view data model.
  2. Add new action/method in controller class.
  3. Modify the link button action in Site.Master.cs.
  4. Create a new View and add a WebDataGrid/Grid on it.
First we have to create a view model. Go ahead and create a view model under Models folder. The code looks something like this:
public class GridViewModel
{
   public IList<EmployeeModel> listEmployee { get; set; }
}
Secondly we need to add a controller method/action in the EmployeeControoler.cs and the code is going to looks:
public ActionResult SampleGridView()
{
    EmployeeDAL empDAL = new EmployeeDAL();
    List<EmployeeModel> employyesList = new List<EmployeeModel>();
    employyesList = empDAL.GetAllEmployees();
    var gvSample = new GridViewModel();
    gvSample.listEmployee = employyesList;
    return View(gvSample);
}
Thirdly Modify the link button to redirect to the new method/action we have created.
Html.ActionLink("Employee", "SampleGridView", "Employee")
Lastly we need to create a view which holds our WebDataGrid/grid. Go ahead and create a strongly typed view under employee sub folder:
Run the application and nothing is going to display on the new view that we created. Ok let’s see that what we have to do for displaying data in the grid. We need to open up a server side script now. The reason is that this is a data bound control and need data source properties to be set.

Now run the application and you will be able to see the grid populated with data. So for those who are using the code samples for WebDataGrid can still go ahead and play with rich behaviors properties that comes with Infragistics.
  

No comments: