WebGrid is a powerful tool in ASP.NET MVC 3 that allows developers to display tabular data on their website. With its easy-to-use functionalities, developers can easily customize the appearance and behavior of their tables. One of the most useful features of WebGrid is the ability to use TextBoxes within the grid itself. In this article, we will explore how to use TextBoxes in WebGrid using the Razor syntax.
To begin with, let's create a simple MVC 3 application. Open Visual Studio and select File > New > Project. Choose ASP.NET MVC 3 Web Application and give it a suitable name. Select the Razor View Engine and click OK to create the project.
Once the project is created, we can start working on our WebGrid. First, we need to add the necessary packages to our project. Right-click on the project in the Solution Explorer and select Manage NuGet Packages. Search for "WebGrid" and install the latest version of the package. This will add all the necessary files to our project.
Next, we need to create a model class that will contain the data for our WebGrid. Right-click on the Models folder and select Add > Class. Name the class "Employee" and add the following properties to it:
public class Employee
{
public int EmployeeId { get; set; }
public string Name { get; set; }
public string Department { get; set; }
public string Designation { get; set; }
}
Now, we need to create a controller that will handle the data for our WebGrid. Right-click on the Controllers folder and select Add > Controller. Name the controller "EmployeeController" and select the "MVC 3 Controller with read/write actions and views, using Entity Framework" template. Click Add and Visual Studio will create a controller with all the necessary actions and views for CRUD operations on the "Employee" model.
Next, we need to add the necessary code to our view to display the WebGrid. Open the Index.cshtml file in the Views > Employee folder. Replace the default code with the following:
@model IEnumerable<WebGridDemo.Models.Employee>
@{
ViewBag.Title = "Employee List";
}
<h2>Employee List</h2>
@{
var grid = new WebGrid(Model);
}
@grid.GetHtml(
columns: grid.Columns(
grid.Column("EmployeeId", "Employee ID"),
grid.Column("Name", "Name"),
grid.Column("Department", "Department"),
grid.Column("Designation", "Designation"),
grid.Column(format: @<text>@Html.TextBox("EmployeeId", item.EmployeeId)</text>, header: "Update Employee ID"),
grid.Column(format: @<text>@Html.TextBox("Name", item.Name)</text>, header: "Update Name"),
grid.Column(format: @<text>@Html.TextBox("Department", item.Department)</text>, header: "Update Department"),
grid.Column(format: @<text>@Html.TextBox("Designation", item.Designation)</text>, header: "Update Designation")
)
)
In the above code, we have created a WebGrid with columns for the "EmployeeId", "Name", "Department", and "Designation" properties of our "Employee" model. We have also added four additional columns with TextBoxes that will allow us to update the values of these properties.
Now, run the project and you will see a WebGrid with the employee data. You can click on the TextBoxes in the "Update" columns to change the values and then click on the "Update" button at the bottom of the grid to save the changes.
In conclusion, using TextBoxes in WebGrid using Razor syntax is a simple and efficient way to update tabular data in ASP.NET MVC 3. With just a few lines of code, we can create a fully functional grid with editable cells. This feature can be especially useful when working with large datasets that require frequent updates. So go ahead and try out this feature in your next MVC 3 project. Happy coding!
