Razor vs ASPX View Engine

Difference Between Razor View Engine and ASPX View Engine

View Engine is responsible for rendering the view into html form to the browser. Now by default, Asp.net MVC support Web Form(ASPX) and Razor View Engine. There are many third party view engines (like Spark, Nhaml etc.) that are also available for Asp.net MVC. Now, Asp.net MVC is open source and can work with other third party view engines like Spark, Nhaml. In this article, I would like to expose the difference between Razor & Web Form View Engine.

Razor View Engine VS Web Form(ASPX) View Engine

Razor View Engine

Web Form View Engine

Razor Engine is an advanced view engine that was introduced with MVC3. This is not a new language but it is a new markup syntax.

Web Form Engine is the default view engine for the Asp.net MVC that is included with Asp.net MVC from the beginning.

The file extensions used with Razor Engine are different from Web Form Engine. It has .cshtml (Razor with C#) or .vbhtml (Razor with VB) extension for views, partial views, editor templates and for layout pages.

The file extensions used with Web Form Engine are also like Asp.net Web Forms. It has .aspx extension for views, .ascx extension for partial views & editor templates and .master extension for layout/master pages.

Razor has new and advance syntax that are compact, expressive and reduces typing.

Web Form Engine has the same syntax like Asp.net Web Forms uses for .aspx pages.

Razor syntax are easy to learn and much clean than Web Form syntax. Razor uses @ symbol to make the code like as:

 @Html.ActionLink("SignUp", "SignUp") 

Web Form syntax are borrowed from Asp.net Web Forms syntax that are mixed with html and sometimes make a view messy. Webform uses <% and %> delimiters to make the code like as:

 <%: Html.ActionLink("SignUp", "SignUp") %> 

Razor Engine support TDD (Test Driven Development) since it is not depend on System.Web.UI.Page class.

Web Form Engine doesn't support TDD (Test Driven Development) since it depend on System.Web.UI.Page class which makes the testing complex.

CRUD Operations using jQuery

This article will demonstrate, how to create an Asp.Net MVC application with CRUD (Create, Read, Update, Delete) Operations using jQuery JSON and Entity Framework 4.1. Suppose you have below table in database.

 CREATE TABLE [dbo].[Customer]
 (
 [CustID] [int] IDENTITY(1,1) PRIMARY KEY,
 [Name] [varchar](100) NULL,
 [Address] [varchar](200) NULL,
 [ContactNo] [varchar](20) NULL,
 ) 

Now add Ado.Net Entity Data Model to Model of your MVC application and genearate model from SQL Server database by adding above Customer table like as:

Create Operation

 

Read Operation

Update Operation

 

Delete Operation

 

View Code for CRUD Operations

 @model Mvc4_CRUD_jQueryDialog.Models.PagedCustomerModel
@{
 ViewBag.Title = "Web Grid";
 WebGrid grid = new WebGrid(rowsPerPage: Model.PageSize);
 grid.Bind(Model.Customer, autoSortAndPage: false, rowCount: Model.TotalRows ); 
}
<link href="@Url.Content("~/Content/themes/base/minified/jquery-ui.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function () {
 $("#CreateCustomer").live("click", function (e) {
 // e.preventDefault(); use this or return false
 var url = $(this).attr('href');
 $("#dialog-edit").dialog({
 title: 'Create Customer',
 autoOpen: false,
 resizable: false,
 height: 355,
 width: 400,
 show: { effect: 'drop', direction: "up" },
 modal: true,
 draggable: true,
 open: function (event, ui) {
 $(this).load(url);
 }, close: function (event, ui) {
 $(this).dialog('close');
 }
});
 $("#dialog-edit").dialog('open'); return false;
 });
 $(".editDialog").live("click", function (e) { // e.preventDefault(); use this or return false
 var url = $(this).attr('href');
 $("#dialog-edit").dialog({
 title: 'Edit Customer',
 autoOpen: false,
 resizable: false,
 height: 355,
 width: 400,
 show: { effect: 'drop', direction: "up" },
 modal: true,
 draggable: true,
 open: function (event, ui) {
 $(this).load(url);
 }, close: function (event, ui) {
 $(this).dialog('close');
 }
 });
 $("#dialog-edit").dialog('open');
 return false;
 });
 $(".confirmDialog").live("click", function (e) {
 // e.preventDefault(); use this or return false
 var url = $(this).attr('href');
 $("#dialog-confirm").dialog({
 autoOpen: false,
 resizable: false,
 height: 170,
 width: 350,
 show: { effect: 'drop', direction: "up" },
 modal: true,
 draggable: true,
 buttons: {
 "OK": function () {
 $(this).dialog("close");
 window.location = url;
 }, "Cancel": function () {
 $(this).dialog("close");
 } } });
 $("#dialog-confirm").dialog('open');
 return false;
 });
 $(".viewDialog").live("click", function (e) {
 // e.preventDefault(); use this or return false
 var url = $(this).attr('href');
 $("#dialog-view").dialog({
 title: 'View Customer',
 autoOpen: false,
 resizable: false,
 height: 250,
 width: 400,
 show: { effect: 'drop', direction: "up" },
 modal: true,
 draggable: true,
 open: function (event, ui) {
 $(this).load(url);
 },
 buttons: {
 "Close": function () {
 $(this).dialog("close");
 }
 },
 close: function (event, ui) {
 $(this).dialog('close'); }
 });
 $("#dialog-view").dialog('open');
 return false;
 });
 $("#btncancel").live("click", function (e) {
 // location.reload(true);
 $("#dialog-edit").dialog('close');
 }); }); 
</script>
<h2>
 CRUD Operations using jQuery dialog and WebGrid</h2>
 <br />
<div style="color: Green; font-weight: bold">
 @TempData["msg"]
</div>
<br />
@grid.GetHtml(
 fillEmptyRows: false,
 alternatingRowStyle: "alternate-row",
 headerStyle: "grid-header",
 footerStyle: "grid-footer",
 mode: WebGridPagerModes.All,
 firstText: "<< First",
 previousText: "< Prev",
 nextText: "Next >",
 lastText: "Last >>",
 columns: new[] { grid.Column("CustID", header: "ID", canSort: false),
 grid.Column("Name", header: "Name", format: @<text>
 @Html.ActionLink((string)item.Name, "View", new { id = item.CustID }, new { @class = "viewDialog" })</text> ), 
grid.Column("Address"), grid.Column("ContactNo", header: "Contact No" ), grid.Column("", header: "Actions", format: @<text>
 @Html.ActionLink("Edit", "Edit", new { id = item.CustID }, new { @class = "editDialog"/*, data_dialog_id = "edit-Dialog"*/ }) |
@Html.ActionLink("Delete", "Delete", new { id = item.CustID }, new { @class = "confirmDialog"})
</text>
 )
})
<br />
<a id="CreateCustomer" href="..\Home\Create">Create Customer</a>
<div id="dialog-confirm" style="display: none">
 <p>
 <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
 Are you sure to delete ?
 </p>
 </div>
<div id="dialog-edit" style="display: none">
</div>
<div id="dialog-view" style="display: none">
</div> 

View Code for CRUD Operations

 public class HomeController : Controller
 {
 ModelServices mobjModel = new ModelServices();
 public ActionResult Index() {
 return View();
 }
 public ActionResult Demo() 
{
 Response.Redirect("http://www.dotnet-tricks.com/Tutorial/mvclist");
 return View();
 }
 //Bind Web Grid and also do paging 
public ActionResult WebGrid(int page = 1, string sort = "name", string sortDir = "ASC")
 {
 const int pageSize = 5;
 var totalRows = mobjModel.CountCustomer();
 sortDir = sortDir.Equals("desc", StringComparison.CurrentCultureIgnoreCase) ? sortDir : "asc";
 var validColumns = new[] { "custid", "name", "address", "contactno" };
 if (!validColumns.Any(c => c.Equals(sort, StringComparison.CurrentCultureIgnoreCase)))
{ sort = "custid";
}
 var customer = mobjModel.GetCustomerPage(page, pageSize, "it." + sort + " " + sortDir);
 var data = new PagedCustomerModel() {
 TotalRows = totalRows,
 PageSize = pageSize,
 Customer = customer
 };
 return View(data);
 }
 public ActionResult Create()
 {
 if (Request.IsAjaxRequest())
 {
 ViewBag.IsUpdate = false;
 return View("_Customer");
 }
 else return View();
 }
 public ActionResult View(int id) {
 var data = mobjModel.GetCustomer(id);
 if (Request.IsAjaxRequest())
 {
 CustomerModel cust = new CustomerModel();
 cust.CustID = data.CustID;
 cust.Name = data.Name;
 cust.Address = data.Address;
 cust.ContactNo = data.ContactNo;
 return View("_ViewCustomer", cust);
 }
 else
 return View(data);
 }
 public ActionResult Edit(int id)
 {
 var data = mobjModel.GetCustomer(id);
 if (Request.IsAjaxRequest())
 {
 CustomerModel cust = new CustomerModel();
 cust.CustID = data.CustID;
 cust.Name = data.Name;
 cust.Address = data.Address;
 cust.ContactNo = data.ContactNo;
 ViewBag.IsUpdate = true;
 return View("_Customer", cust);
 }
 else
 return View(data);
 }
 public ActionResult Delete(int id)
 {
 bool check = mobjModel.DeleteCustomer(id);
 var data = mobjModel.GetCustomer();
 return RedirectToAction("WebGrid");
 }
 [HttpPost]
 public ActionResult CreateEditCustomer(CustomerModel mCust, string Command)
 {
 // Validate the model being submitted
 if (!ModelState.IsValid)
 {
 return PartialView("_Customer", mCust);
 }
 else if (Command == "Save")
 {
 Customer mobjcust = new Customer();
 mobjcust.CustID = mCust.CustID;
 mobjcust.Address = mCust.Address;
 mobjcust.ContactNo = mCust.ContactNo;
 mobjcust.Name = mCust.Name;
 bool check = mobjModel.CreateCustomer(mobjcust);
 if (check)
 {
 TempData["Msg"] = "Data has been saved succeessfully";
 ModelState.Clear();
 return RedirectToAction("WebGrid", "Home");
 }
 }
 else if (Command == "Update")
 {
 Customer mobjcust = new Customer();
 mobjcust.CustID = mCust.CustID;
 mobjcust.Address = mCust.Address;
 mobjcust.ContactNo = mCust.ContactNo;
 mobjcust.Name = mCust.Name;
 bool check = mobjModel.UpdateCustomer(mobjcust);
 if (check)
 {
 TempData["Msg"] = "Data has been updated succeessfully";
 ModelState.Clear();
 return RedirectToAction("WebGrid", "Home");
 }
 }
 return PartialView("_Customer");
 }
 }