How to use WebGrid in ASP.Net MVC

In this article we will learn about How to use WebGrid in ASP.Net MVC. Here we discuss how to use XML data read and fetched XML records that will be displayed in WebGrid using Model class in ASP.Net MVC.

XML File

I have the sample XML file customer.xml like below.

The XML file can be download here.

Model

Create a model of customer to hold the below properties.

	public class Customer
	{
	public int customerId { get; set; }
	public string firstName { get; set; }
	public string lastName { get; set; }
	public string email { get; set; }
	public string street { get; set; }
	public string city { get; set; }
	public string state { get; set; }
	public string zipCode { get; set; }
	}

view raw Customer.cs hosted with ❤ by GitHub

Controller

The Controller consists of one Action method.

GET operation

Inside the Index Action method, the XML file is read using the XmlDocument class object.

Then the Customer Node is selected using XPath query and a loop is executed over all the selected Nodes.

	public class HomeController : Controller
	{
	public ActionResult Index()
	{
	List<Customer> customers = new List<Customer>();
	//Load the XML file in XmlDocument.
	XmlDocument doc = new XmlDocument();
	doc.Load(Server.MapPath("~/customer.xml"));
	//Loop through the selected Nodes.
	foreach (XmlNode node in doc.SelectNodes("/CustomerDetails/customer"))
	{
	//Fetch the Node values and assign it to Model.
	customers.Add(new Customer
	{
	customerId = int.Parse(node["customer_id"].InnerText),
	firstName = node["first_name"].InnerText,
	lastName = node["last_name"].InnerText,
	email = node["email"].InnerText,
	street = node["street"].InnerText,
	city = node["city"].InnerText,
	state = node["state"].InnerText,
	zipCode = node["zip_code"].InnerText,
	});
	}
	return View(customers);
	}
	}

view raw HomeController.cs hosted with ❤ by GitHub

View

Inside the View, in the very first line the Customer class is declared as IEnumerable which specifies that the Model will be available as a Collection.

The WebGrid is initialized with the Model i.e. IEnumerable collection of Customer class objects as source.

	@using XML_WebGrid_aspnetmvc.Models
	@model IEnumerable<Customer>
	@{
	ViewBag.Title = "Home Page";
	WebGrid webGrid = new WebGrid(source: Model, canPage: true, canSort: true);
	}
	<div class="row">
	@webGrid.GetHtml(
	htmlAttributes: new { @id = "WebGrid", @class = "table" },
	columns: webGrid.Columns(
	webGrid.Column("customerId", "Customer Id"),
	webGrid.Column("firstName", "First Name"),
	webGrid.Column("lastName", "Last Name"),
	webGrid.Column("email", "Email"),
	webGrid.Column("street", "Street"),
	webGrid.Column("city", "City"),
	webGrid.Column("state", "State"),
	webGrid.Column("zipCode", "Zip Code")
	))
	</div>

view raw Index.cshtml hosted with ❤ by GitHub

Output

The output like below,

</> Find the Source Code in Github

  Summary

In this tutorial we discussed about How to use WebGrid in ASP.Net MVC. If have any question related to this topic then give your feedback.