Here's how to create a custom table for HTML helper in MVC.
Step 1
Create database and new project in Visual Studio.
Step 2
In Solution Explorer select Model and add a new Item.
Step 3
Select ADO.NET Entity Data model, then press Add.
Step 4
Select Generate from database and press Next.
Step 5
Select Yes from Drop down and press Next.
Step 6
Select the table you need and press Finish.
Step 7
Model1.edmx is created in the model. Now we can use this model in the View and the Controller to perform the Insert, Update and Delete operation. Here's Model1.edmx, save and close it.
Step 8
For more details on insert, update and delete you can visit my previous blog.
Step 9
Now in Solution Explorer, right-click on the project, then add new folder named "HtmlHelpers" and create one class file named "MvcHtmlExtensions".
Step 10
The following is the code for the class MvcHtmlExtensions.cs.
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Linq.Expressions;
- using System.Text;
- using System.Text.RegularExpressions;
- using System.Web;
- using System.Xml;
-
- namespace System.Web.Mvc.Html {#region TableColumn
-
-
-
-
- public interface ITableColumnInternal < TModel > where TModel: class {
- string ColumnTitle {
- get;
- set;
- }
- string Evaluate(TModel model);
- }
-
-
-
-
- public interface ITableColumn {
- ITableColumn Title(string title);
- }
-
-
-
-
-
-
- public class TableColumn < TModel,
- TProperty > : ITableColumn,
- ITableColumnInternal < TModel > where TModel: class {
-
-
-
- public string ColumnTitle {
- get;
- set;
- }
-
-
-
-
- public Func < TModel, TProperty > CompiledExpression {
- get;
- set;
- }
-
-
-
-
-
- public TableColumn(Expression < Func < TModel, TProperty >> expression) {
- string propertyName = (expression.Body as MemberExpression).Member.Name;
- this.ColumnTitle = Regex.Replace(propertyName, "([a-z])([A-Z])", "$1 $2");
- this.CompiledExpression = expression.Compile();
- }
-
-
-
-
-
-
- public ITableColumn Title(string title) {
- this.ColumnTitle = title;
- return this;
- }
-
-
-
-
-
-
- public string Evaluate(TModel model) {
- var result = this.CompiledExpression(model);
- return result == null ? string.Empty : result.ToString();
- }
- }
-
- #endregion TableColumn
-
- #region ColumnBuilder
-
-
-
-
-
- public class ColumnBuilder < TModel > where TModel: class {
- public TableBuilder < TModel > TableBuilder {
- get;
- set;
- }
-
-
-
-
-
- public ColumnBuilder(TableBuilder < TModel > tableBuilder) {
- TableBuilder = tableBuilder;
- }
-
-
-
-
-
-
-
- public ITableColumn Expression < TProperty > (Expression < Func < TModel, TProperty >> expression) {
- return TableBuilder.AddColumn(expression);
- }
- }
-
- #endregion ColumnBuilder
-
- #region TableBuilder
-
-
-
-
- public interface ITableBuilder < TModel > where TModel: class {
- TableBuilder < TModel > DataSource(IEnumerable < TModel > dataSource);
- TableBuilder < TModel > Columns(Action < ColumnBuilder < TModel >> columnBuilder);
- }
-
-
-
-
-
- public class TableBuilder < TModel > : ITableBuilder < TModel > where TModel: class {
- private HtmlHelper HtmlHelper {
- get;
- set;
- }
- private IEnumerable < TModel > Data {
- get;
- set;
- }
-
-
-
-
- private TableBuilder() {}
-
-
-
-
- internal TableBuilder(HtmlHelper helper) {
- this.HtmlHelper = helper;
-
- this.TableColumns = new List < ITableColumnInternal < TModel >> ();
- }
-
-
-
-
-
-
- public TableBuilder < TModel > DataSource(IEnumerable < TModel > dataSource) {
- this.Data = dataSource;
- return this;
- }
-
-
-
-
- internal IList < ITableColumnInternal < TModel >> TableColumns {
- get;
- set;
- }
-
-
-
-
-
-
-
- internal ITableColumn AddColumn < TProperty > (Expression < Func < TModel, TProperty >> expression) {
- TableColumn < TModel, TProperty > column = new TableColumn < TModel, TProperty > (expression);
- this.TableColumns.Add(column);
- return column;
- }
-
-
-
-
-
-
- public TableBuilder < TModel > Columns(Action < ColumnBuilder < TModel >> columnBuilder) {
- ColumnBuilder < TModel > builder = new ColumnBuilder < TModel > (this);
- columnBuilder(builder);
- return this;
- }
-
-
-
-
- public MvcHtmlString ToHtml(string id, string CssClass, string EditPath, string DeletePath) {
-
- var table = new TagBuilder("table");
- table.GenerateId(id);
- table.AddCssClass(CssClass);
-
-
- TagBuilder thead = new TagBuilder("thead");
- TagBuilder tr = new TagBuilder("tr");
- TagBuilder td = null;
-
- TagBuilder th = null;
- TagBuilder tbody = new TagBuilder("tbody");
-
-
- StringBuilder sb = new StringBuilder();
-
- int i = 0;
- foreach(ITableColumnInternal < TModel > tc in this.TableColumns) {
- th = new TagBuilder("th");
- if (i == 0) {
- th.InnerHtml = tc.ColumnTitle;
- th.MergeAttribute("style", "display:none;");
- } else {
- th.InnerHtml = tc.ColumnTitle;
-
- }
- i++;
- tr.InnerHtml += th.ToString();
- }
- th.InnerHtml = "Action";
- tr.InnerHtml += th.ToString();
- thead.InnerHtml = tr.ToString();
- sb.Append(thead.ToString());
-
-
- if (this.Data != null) {
-
- int row = 0;
- foreach(TModel model in this.Data) {
- if (model != null) {
- tr.InnerHtml = "";
-
- int j = 0;
- string ID = "";
- foreach(ITableColumnInternal < TModel > tc in this.TableColumns) {
- td = new TagBuilder("td");
- if (j == 0) {
- ID = tc.Evaluate(model);
- td.InnerHtml = tc.Evaluate(model);
- td.MergeAttribute("style", "display:none;");
- } else {
- td.InnerHtml = tc.Evaluate(model);
- }
- tr.InnerHtml += td.ToString();
- j++;
- }
- td.InnerHtml = "<a href='" + EditPath + ID + "'>edit</a> <a href='" + DeletePath + ID + "'>delete</a>";
- tr.InnerHtml += td.ToString();
- tbody.InnerHtml += tr.ToString();
- row++;
- }
- }
-
- sb.Append(tbody.ToString());
- table.InnerHtml = sb.ToString();
- }
- return new MvcHtmlString(table.ToString());
-
- }
- }
-
- #endregion TableBuilder
-
- #region MvcHtmlTableExtensions
-
- public static class MvcHtmlTableExtensions {
-
-
-
-
-
- public static ITableBuilder < TModel > TableFor < TModel > (this HtmlHelper helper) where TModel: class {
- return new TableBuilder < TModel > (helper);
- }
- }
-
- #endregion MvcHtmlTableExtensions
- }
Step 11
Now write code in the View like the following:
- @model IEnumerable
- <logindemo.Models.demoregistartion>
- @{
- ViewBag.Title = "RegistrationDetailList";
- Layout = "~/Views/Shared/_Layout.cshtml";
- }
- @using (Html.BeginForm("RegistrationDetailList", "Registration", FormMethod.Post))
- {
-
- <div class="panel-body">
- <div>
- <a href="/Registration/RegistrationDetail">Add Detail</a>
- </div>
- @(Html.TableFor
- <logindemo.Models.demoregistartion>()
- .Columns(column =>
- {
- column.Expression(p => p.UserID).Title("User ID");
- column.Expression(p => p.FirstName).Title("First Name");
- column.Expression(p => p.LastName).Title("Last Name");
- column.Expression(p => p.EmailID).Title("Email ID");
- column.Expression(p => p.City).Title("City");
-
- })
- .DataSource(this.Model)
- .ToHtml("basicTable", "table-bordered table-responsive", "/Registration/EditRegistrationDetail?UserID=", "/Registration/DeleteRegistrationDetail?UserID=")
- )
-
- </div>
- }
Step 12
The following is the display form created using HTML helper.