Shiju Varghese's Blog : jQuery

EFMVC App Migrated to ASP.NET MVC 4

shiju — Thu, 01 Mar 2012 07:04:52 GMT

I have upgraded my EFMVC app from ASP.NET MVC 3 to ASP.NET MVC 4 Beta. EFMVC is a demo web app initially built for demonstrating ASP.NET MVC and EF Code First. Now I am planning to add more features onto EFMVC and want to add cloud specific features with Windows Azure. You can expect more implementations in future releases.

The current migration does not contains any major code changes. I have added a Windows Azure web role and will add some cloud specific features on later. The migration process was very smooth and the Autofac.MVC3 has been working with ASP.NET MVC 4 app without any issue. But I am having some issues with Autofac.MVC3 package while integrating with ASP.NET Web API services. I have used the current AutofacDependencyResolver class to integrating with DependencyResolver. The ASP.NET Web API expects a System.Web.Http.Services.IDependencyResolver implementation instead of System.Web.Mvc.IDependencyResolver which is used by ASP.NET MVC.

The below is the updated feature list of the EFMVC app

Windows Azure Web Role
CRUD demo in ASP.NET MVC 4 with Entity Framework 4.3 Code First
Generic repository for Entity Framework Code First
Repository Pattern and Unit of Work
Dependency Injection using Autofac
Razor View Engine
Solution Architectures using Commands(write operations), Command Handlers, Command Dispatcher
ASP.NET Web API

You can download the source from http://efmvc.codeplex.com/

EFMVC – A demo web app using ASP.NET MVC 3 and EF 4.1 Code First

shiju — Tue, 03 May 2011 13:59:34 GMT

I have created a demo web app for some of my previous blog posts and can be download from http://efmvc.codeplex.com/. The following technologies are used for the web app

ASP.NET MVC 3
Entity Framework 4.1 Code First
Microsoft Unity 2.0
jQuery Mobile

The following are the main features of the web application

CRUD demo in ASP.NET MVC 3 with Entity Framework 4.1 Code First
Razor View Engine
Generic repository for Entity Framework 4.1 Code First
Repository Pattern and Unit of Work
Dependency Injection using Unity 2.0
Mobile specific pages using JQuery Mobile
ASP.NET MVC Area for Mobile specific pages
Automatic redirection to mobile specific pages if users are accessing from Mobile browsers.
Using EF 4.1 Code First with a custom Membership/Role providder (Altairis Web Security Toolkit)

Mobile enabled web apps with ASP.NET MVC 3 and jQuery Mobile

shiju — Fri, 25 Feb 2011 08:20:43 GMT

In my previous blog posts, I have demonstrated a simple web app using ASP.NET MVC 3 and EF Code First. In this post, I will be focus on making this application for mobile devices. A single web site will be used for both mobile browsers and desktop browsers. If users are accessing the web app from mobile browsers, users will be redirect to mobile specific pages and will get normal pages if users are accessing from desktop browsers. In this demo app, the mobile specific pages are maintained in an ASP.NET MVC Area named Mobile and mobile users will be redirect to MVC Area Mobile.

Let’s add a new area named Mobile to the ASP.NET MVC app. For adding Area, right click the ASP.NET MVC project and select Area from Add option. Our mobile specific pages using jQuery Mobile will be maintained in the Mobile Area.

ASP.NET MVC Global filter for redirecting mobile visitors to Mobile area

Let’s add an ASP.NET MVC Global filter for redirecting mobile visitors to Mobile area. The below Global filter is taken from the sample app http://aspnetmobilesamples.codeplex.com/ created by the ASP.NET team. The below filer will redirect the Mobile visitors to an ASP.NET MVC Area Mobile.

  public class RedirectMobileDevicesToMobileAreaAttribute : AuthorizeAttribute
    {
        protected override bool AuthorizeCore(System.Web.HttpContextBase httpContext)
        {
            // Only redirect on the first request in a session
            if (!httpContext.Session.IsNewSession)
                return true;
 
            // Don't redirect non-mobile browsers
            if (!httpContext.Request.Browser.IsMobileDevice)
                return true;
 
            // Don't redirect requests for the Mobile area
            if (Regex.IsMatch(httpContext.Request.Url.PathAndQuery, "/Mobile($|/)"))
                return true;
 
            return false;
        }
 
        protected override void HandleUnauthorizedRequest(AuthorizationContext filterContext)
        {
            var redirectionRouteValues = GetRedirectionRouteValues(filterContext.RequestContext);
            filterContext.Result = new RedirectToRouteResult(redirectionRouteValues);
        }
 
        // Override this method if you want to customize the controller/action/parameters to which
        // mobile users would be redirected. This lets you redirect users to the mobile equivalent
        // of whatever resource they originally requested.
        protected virtual RouteValueDictionary GetRedirectionRouteValues(RequestContext requestContext)
        {
            return new RouteValueDictionary(new { area = "Mobile", controller = "Home", action = "Index" });
        }
    }
 

Let’s add the global filer RedirectMobileDevicesToMobileAreaAttribute to the global filter collection in the Application_Start() of Global.asax.cs file

 GlobalFilters.Filters.Add(new RedirectMobileDevicesToMobileAreaAttribute(), 1);
 

Now your mobile visitors will be redirect to the Mobile area. But the browser detection logic in the RedirectMobileDevicesToMobileAreaAttribute filter will not be working in some modern browsers and some conditions. But the good news is that ASP.NET’s browser detection feature is extensible and will be greatly working with the open source framework 51Degrees.mobi. 51Degrees.mobi is a Browser Capabilities Provider that will be working with ASP.NET’s Request.Browser and will provide more accurate and detailed information. For more details visit the documentation page at http://51degrees.codeplex.com/documentation.

Let’s add a reference to 51Degrees.mobi library using NuGet

We can easily add the 51Degrees.mobi from NuGet and this will update the web.config for necessary configuartions.

Mobile Web App using jQuery Mobile Framework

jQuery Mobile Framework is built on top of jQuery that provides top-of-the-line JavaScript in a unified User Interface that works across the most-used smartphone web browsers and tablet form factors. It provides an easy way to develop user interfaces for mobile web apps. The current version of the framework is jQuery Mobile Alpha 3.
We need to include the following files to use jQuery Mobile.

The jQuery Mobile CSS file (jquery.mobile-1.0a3.min.css)
The jQuery library (jquery-1.5.min.js)
The jQuery Mobile library (jquery.mobile-1.0a3.min.js)

Let’s add the required jQuery files directly from jQuery CDN . You can download the files and host them on your own server.

jQuery Mobile page structure

The basic jQuery Mobile page structure is given below

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head>
<body>

<div data-role="header">
<h1>Page Title</h1>
</div>

<div data-role="content">
<p>Page content goes here.</p>
</div>

<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>

</body>
</html>

The data- attributes are the new feature of HTML5 so that jQuery Mobile will be working on browsers that supporting HTML 5. You can get a detailed browser support details from http://jquerymobile.com/gbs/ . In the Head section we have included the Core jQuery javascript file and jQuery Mobile Library and the core CSS Library for the UI Element Styling. These jQuery files are minified versions and will improve the performance of page load on Mobile Devices.

The jQuery Mobile pages are identified with an element with the data-role="page" attribute inside the <body> tag.

Within the "page" container, any valid HTML markup can be used, but for typical pages in jQuery Mobile, the immediate children of a "page" are div element with data-roles of "header", "content", and "footer".

The div data-role="content" holds the main content of the HTML page and will be used for making user interaction elements. The div data-role="header" is header part of the page and div data-role="footer" is the footer part of the page.

Creating Mobile specific pages in the Mobile Area

Let’s create Layout page for our Mobile area

 <!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
    <script src="http://code.jquery.com/jquery-1.5.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>    
</head>
 
   <body>
 @RenderBody()   
</body>
</html>
 

In the Layout page, I have given reference to jQuery Mobile JavaScript files and the CSS file.

Let’s add an Index view page

Index.chtml

 @{
    ViewBag.Title = "Index";
}
<div data-role="page"> 
<div data-role="header">
     <h1>Expense Tracker Mobile</h1>
 </div> 
 <div data-role="content">  
 <ul data-role="listview">
    <li>@Html.Partial("_LogOnPartial")</li>
     <li>@Html.ActionLink("Home", "Index", "Home")</li>
     <li>@Html.ActionLink("Category", "Index", "Category")</li>                    
     <li>@Html.ActionLink("Expense", "Index", "Expense")</li>
 </ul>
 </div>
 <div data-role="footer">      
    Shiju Varghese | <a href="http://weblogs.asp.net/shijuvarghese">Blog
    </a> | <a href="http://twitter.com/shijucv">Twitter</a>
  </div>
 </div>
 

In the Index page, we have used data-role “listview” for showing our content as List View

Let’s create a data entry screen

create.cshtml

 @model MyFinance.Domain.Category
@{
    ViewBag.Title = "Create Category";
}
  <div data-role="page">
<div data-role="header">
     <h1>Create Category</h1>    
        @Html.ActionLink("Home", "Index","Home",null, new { @class = "ui-btn-right" })   
  </div>    
 
  <div data-role="content">
    @using (Html.BeginForm("Create","Category",FormMethod.Post))
    {
      <div data-role="fieldcontain">
       @Html.LabelFor(model => model.Name)
       @Html.EditorFor(model => model.Name)
       <div>
          @Html.ValidationMessageFor(m => m.Name)
       </div>
        </div>
        <div data-role="fieldcontain">
        @Html.LabelFor(model => model.Description)
        @Html.EditorFor(model => model.Description)          
        </div>           
        <div class="ui-body ui-body-b">
        <button type="submit" data-role="button" data-theme="b">Save</button>
      </div>
    }       
</div>
</div>
 

In jQuery Mobile, the form elements should be placed inside the data-role="fieldcontain"

The below screen shots show the pages rendered in mobile browser

Index Page

Create Page

Source Code

You can download the source code from http://efmvc.codeplex.com

Summary

We have created a single web app for desktop browsers and mobile browsers. If a user access the site from desktop browsers, users will get normal web pages and get mobile specific pages if users access from mobile browsers. If users are accessing the website from mobile devices, we will redirect to a ASP.NET MVC area Mobile. For redirecting to the Mobile area, we have used a Global filer for the redirection logic and used open source framework 51Degrees.mobi for the better support for mobile browser detection. In the Mobile area, we have created the pages using jQuery Mobile and users will get mobile friendly web pages. We can create great mobile web apps using ASP.NET MVC and jQuery Mobile Framework.

Developing web apps using ASP.NET MVC 3, Razor and EF Code First - Part 2

shiju — Fri, 14 Jan 2011 03:20:18 GMT

In my previous post Developing web apps using ASP.NET MVC 3, Razor and EF Code First - Part 1, we have discussed on how to work with ASP.NET MVC 3 and EF Code First for developing web apps. We have created generic repository and unit of work with EF Code First for our ASP.NET MVC 3 application and did basic CRUD operations against a simple domain entity. In this post, I will demonstrate on working with domain entity with deep object graph, Service Layer and View Models and will also complete the rest of the demo application. In the previous post, we have done CRUD operations against Category entity and this post will be focus on Expense entity those have an association with Category entity. You can download the source code from http://efmvc.codeplex.com .

The following frameworks will be used for this step by step tutorial.

   1. ASP.NET MVC 3 RTM
   2. EF Code First CTP 5
   3. Unity 2.0

Domain Model

Category Entity

 public class Category 
  {
      public int CategoryId { get; set; }
      [Required(ErrorMessage = "Name Required")]
      [StringLength(25, ErrorMessage = "Must be less than 25 characters")]
      public string Name { get; set;}
      public string Description { get; set; }
      public virtual ICollection<Expense> Expenses { get; set; }
  }
 

Expense Entity

  public class Expense
    {       
        public int ExpenseId { get; set; }       
        public string  Transaction { get; set; }
        public DateTime Date { get; set; }
        public double Amount { get; set; }
        public int CategoryId { get; set; }
        public virtual Category Category { get; set; }
    }
 

We have two domain entities - Category and Expense. A single category contains a list of expense transactions and every expense transaction should have a Category.

Repository class for Expense Transaction

Let’s create repository class for handling CRUD operations for Expense entity

 public class ExpenseRepository : RepositoryBase<Expense>, IExpenseRepository
    {
    public ExpenseRepository(IDatabaseFactory databaseFactory)
        : base(databaseFactory)
        {
        }           
    }
public interface IExpenseRepository : IRepository<Expense>
{
}
 

Service Layer

If you are new to Service Layer, checkout Martin Fowler's article Service Layer . According to Martin Fowler, Service Layer defines an application's boundary and its set of available operations from the perspective of interfacing client layers. It encapsulates the application's business logic, controlling transactions and coordinating responses in the implementation of its operations. Controller classes should be lightweight and do not put much of business logic onto it. We can use the service layer as the business logic layer and can encapsulate the rules of the application.

Let’s create a Service class for coordinates the transaction for Expense

 public interface IExpenseService
{
    IEnumerable<Expense> GetExpenses(DateTime startDate, DateTime ednDate);
    Expense GetExpense(int id);        
    void CreateExpense(Expense expense);
    void DeleteExpense(int id);
    void SaveExpense();
}
public class ExpenseService : IExpenseService
{
    private readonly IExpenseRepository expenseRepository;       
    private readonly IUnitOfWork unitOfWork;
    public ExpenseService(IExpenseRepository expenseRepository, IUnitOfWork unitOfWork)
    {         
        this.expenseRepository = expenseRepository;
        this.unitOfWork = unitOfWork;
    }
    public IEnumerable<Expense> GetExpenses(DateTime startDate, DateTime endDate)
    {
        var expenses = expenseRepository.GetMany(exp => exp.Date >= startDate && exp.Date <= endDate);
        return expenses;
    }
    public void CreateExpense(Expense expense)
    {
        expenseRepository.Add(expense);
        unitOfWork.Commit();
    }
    public Expense GetExpense(int id)
    {
        var expense = expenseRepository.GetById(id);
        return expense;
    }
    public void DeleteExpense(int id)
    {
        var expense = expenseRepository.GetById(id);
        expenseRepository.Delete(expense);
        unitOfWork.Commit();
    }
    public void SaveExpense()
    {
        unitOfWork.Commit();
    }
}
 

View Model for Expense Transactions

In real world ASP.NET MVC applications, we need to design model objects especially for our views. Our domain objects are mainly designed for the needs for domain model and it is representing the domain of our applications. On the other hand, View Model objects are designed for our needs for views. We have an Expense domain entity that has an association with Category. While we are creating a new Expense, we have to specify that in which Category belongs with the new Expense transaction. The user interface for Expense transaction will have form fields for representing the Expense entity and a CategoryId for representing the Category. So let's create view model for representing the need for Expense transactions.

 public class ExpenseViewModel
{
    public int ExpenseId { get; set; }
 
    [Required(ErrorMessage = "Category Required")]
    public int CategoryId { get; set; }
 
    [Required(ErrorMessage = "Transaction Required")]
    public string Transaction { get; set; }
 
    [Required(ErrorMessage = "Date Required")]
    public DateTime Date { get; set; }
 
    [Required(ErrorMessage = "Amount Required")]
    public double Amount { get; set; }
 
    public IEnumerable<SelectListItem> Category { get; set; }
}
 

The ExpenseViewModel is designed for the purpose of View template and contains the all validation rules. It has properties for mapping values to Expense entity and a property Category for binding values to a drop-down for list values of Category.

Create Expense transaction

Let’s create action methods in the ExpenseController for creating expense transactions

 public ActionResult Create()
{
    var expenseModel = new ExpenseViewModel();
    var categories = categoryService.GetCategories();
    expenseModel.Category = categories.ToSelectListItems(-1);
    expenseModel.Date = DateTime.Today;
    return View(expenseModel);
}
[HttpPost]
public ActionResult Create(ExpenseViewModel expenseViewModel)
{
            
        if (!ModelState.IsValid)
        {
            var categories = categoryService.GetCategories();
            expenseViewModel.Category = categories.ToSelectListItems(expenseViewModel.CategoryId);
            return View("Save", expenseViewModel);
        }
        Expense expense=new Expense();
        ModelCopier.CopyModel(expenseViewModel,expense);
        expenseService.CreateExpense(expense);
        return RedirectToAction("Index");
            
}
 

In the Create action method for HttpGet request, we have created an instance of our View Model ExpenseViewModel with Category information for the drop-down list and passing the Model object to View template. The extension method ToSelectListItems is shown below

 public static IEnumerable<SelectListItem> ToSelectListItems(
        this IEnumerable<Category> categories, int  selectedId)
{
    return
 
        categories.OrderBy(category => category.Name)
                .Select(category =>
                    new SelectListItem
                    {
                        Selected = (category.CategoryId == selectedId),
                        Text = category.Name,
                        Value = category.CategoryId.ToString()
                    });
}
 

In the Create action method for HttpPost, our view model object ExpenseViewModel will map with posted form input values. We need to create an instance of Expense for the persistence purpose. So we need to copy values from ExpenseViewModel object to Expense object. ASP.NET MVC futures assembly provides a static class ModelCopier that can use for copying values between Model objects. ModelCopier class has two static methods - CopyCollection and CopyModel.CopyCollection method will copy values between two collection objects and CopyModel will copy values between two model objects. We have used CopyModel method of ModelCopier class for copying values from expenseViewModel object to expense object. Finally we did a call to CreateExpense method of ExpenseService class for persisting new expense transaction.

List Expense Transactions

We want to list expense transactions based on a date range. So let’s create action method for filtering expense transactions with a specified date range.

 public ActionResult Index(DateTime? startDate, DateTime? endDate)
{
    //If date is not passed, take current month's first and last dte 
    DateTime dtNow;
    dtNow = DateTime.Today;
    if (!startDate.HasValue)
    {
        startDate = new DateTime(dtNow.Year, dtNow.Month, 1);
        endDate = startDate.Value.AddMonths(1).AddDays(-1);
    }
    //take last date of start date's month, if end date is not passed 
    if (startDate.HasValue && !endDate.HasValue)
    {
        endDate = (new DateTime(startDate.Value.Year, startDate.Value.Month, 1)).AddMonths(1).AddDays(-1);
    }
    var expenses = expenseService.GetExpenses(startDate.Value ,endDate.Value);
    //if request is Ajax will return partial view
    if (Request.IsAjaxRequest())
    {
        return PartialView("ExpenseList", expenses);
    } 
    //set start date and end date to ViewBag dictionary
    ViewBag.StartDate = startDate.Value.ToShortDateString();
    ViewBag.EndDate = endDate.Value.ToShortDateString();
    //if request is not ajax
    return View(expenses);
}
 

We are using the above Index Action method for both Ajax requests and normal requests. If there is a request for Ajax, we will call the PartialView ExpenseList.

Razor Views for listing Expense information

Let’s create view templates in Razor for showing list of Expense information

ExpenseList.cshtml

 @model IEnumerable<MyFinance.Domain.Expense>
 
<table>
        <tr>
            <th>Actions</th>
            <th>Category</th>
            <th>
                Transaction
            </th>
            <th>
                Date
            </th>
            <th>
                Amount
            </th>
        </tr>
 
    @foreach (var item in Model) {
    
        <tr>
            <td>
                @Html.ActionLink("Edit", "Edit",new { id = item.ExpenseId })
                @Ajax.ActionLink("Delete", "Delete", new { id = item.ExpenseId }, new AjaxOptions { Confirm = "Delete Expense?", HttpMethod = "Post", UpdateTargetId = "divExpenseList" })
            </td>
             <td>
                @item.Category.Name
            </td>
            <td>
                @item.Transaction
            </td>
            <td>
                @String.Format("{0:d}", item.Date)
            </td>
            <td>
                @String.Format("{0:F}", item.Amount)
            </td>
        </tr>
    
    }
 
    </table>
    <p>
        @Html.ActionLink("Create New Expense", "Create") | 
        @Html.ActionLink("Create New Category", "Create","Category")
    </p>
 

Index.cshtml

 @using MyFinance.Helpers;
@model IEnumerable<MyFinance.Domain.Expense>
@{
    ViewBag.Title = "Index";
}
   <h2>Expense List</h2>
   <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.ui.datepicker.js")" type="text/javascript"></script> 
<link href="@Url.Content("~/Content/jquery-ui-1.8.6.custom.css")" rel="stylesheet" type="text/css" />
 
   @using (Ajax.BeginForm(new AjaxOptions{ UpdateTargetId="divExpenseList", HttpMethod="Get"})) {
    <table>
        <tr>
        <td>
        <div> 
          Start Date: @Html.TextBox("StartDate", Html.Encode(String.Format("{0:mm/dd/yyyy}", ViewData["StartDate"].ToString())), new { @class = "ui-datepicker" }) 
        </div>
        </td>
        <td><div>
           End Date: @Html.TextBox("EndDate", Html.Encode(String.Format("{0:mm/dd/yyyy}", ViewData["EndDate"].ToString())), new { @class = "ui-datepicker" }) 
         </div></td>
         <td> <input type="submit" value="Search By TransactionDate" /></td>
        </tr>
    </table>         
 }
  <div id="divExpenseList">    
        @Html.Partial("ExpenseList", Model)
    </div>
 <script type="text/javascript">
    $().ready(function () {
        $('.ui-datepicker').datepicker({
            dateFormat: 'mm/dd/yy',
            buttonImage: '@Url.Content("~/Content/calendar.gif")',
            buttonImageOnly: true,
            showOn: "button"
        });
    });
</script>
 

Ajax search functionality using Ajax.BeginForm

The search functionality of Index view is providing Ajax functionality using Ajax.BeginForm. The Ajax.BeginForm() method writes an opening <form> tag to the response. You can use this method in a using block. In that case, the method renders the closing </form> tag at the end of the using block and the form is submitted asynchronously by using JavaScript. The search functionality will call the Index Action method and this will return partial view ExpenseList for updating the search result. We want to update the response UI for the Ajax request onto divExpenseList element. So we have specified the UpdateTargetId as "divExpenseList" in the Ajax.BeginForm method.

Add jQuery DatePicker

Our search functionality is using a date range so we are providing two date pickers using jQuery datepicker. You need to add reference to the following JavaScript files to working with jQuery datepicker.

jquery-ui.js
jquery.ui.datepicker.js

For theme support for datepicker, we can use a customized CSS class. In our example we have used a CSS file “jquery-ui-1.8.6.custom.css”. For more details about the datepicker component, visit jquery UI website at http://jqueryui.com/demos/datepicker . In the jQuery ready event, we have used following JavaScript function to initialize the UI element to show date picker.

  <script type="text/javascript">
    $().ready(function () {
        $('.ui-datepicker').datepicker({
            dateFormat: 'mm/dd/yy',
            buttonImage: '@Url.Content("~/Content/calendar.gif")',
            buttonImageOnly: true,
            showOn: "button"
        });
    });
</script>
 

Source Code

You can download the source code from http://efmvc.codeplex.com/ .

Summary

In this two-part series, we have created a simple web application using ASP.NET MVC 3 RTM, Razor and EF Code First CTP 5. I have demonstrated patterns and practices such as Dependency Injection, Repository pattern, Unit of Work, ViewModel and Service Layer. My primary objective was to demonstrate different practices and options for developing web apps using ASP.NET MVC 3 and EF Code First. You can implement these approaches in your own way for building web apps using ASP.NET MVC 3. I will refactor this demo app on later time.

ASP.NET MVC Tip: Ajax and Validations using jQuery

shiju — Wed, 01 Oct 2008 06:03:00 GMT

jQuery is now part of the ASP.net development platform and it is going to ship with Visual Studio in the future and will also be the part of ASP.NET MVC installation. ASP.NET MVC will be the first product to include jQuery. Guru Gu’s blog entry has the full details regarding this. This is a great decision from Microsoft and I hope that the community would be happy about the great decision taken by Microsoft. And this is another good step for web development after the ASP.NET MVC technology. jQuery is an excellent java script library and very popular among the web developers regardless of technology. In this post, I demonstrate how to integrate jQuery with ASP.NET MVC and will be explain how to send Ajax requests and also show client side validation using jQuery. I am using a blog application for this demo and it will show how to post a comment of a blog entry using Ajax request and will also show partial rendering with the help of a user control.

The below is the class diagram of the example I have used for this demo.

Controller

The below is the code of BlogController. It has two action methods and first one is for getting the single blog post including all comments and another action is for post a comment for the particular blog post. I am going to call the AddComment method ( ActionName Post) using Ajax request using jQuery.

public class BlogController : Controller{

private readonly ICommentRepository comments =new CommentRepository();

private readonly IPostRepository posts = new PostRepository();

[AcceptVerbs( "GET" )]

public ActionResult Post( int id )

{

return View( posts.Retrieve().Where( p => p.ID == id ).Single() );

}

[AcceptVerbs( "POST" )]

[ActionName( "Post" )]

public ActionResult AddComment( int postId, string commentAuthor, string commentText ) {

var comment = new Comment{

PostID = postId,

Author = commentAuthor,

Text = commentText,

DatePosted = DateTime.Now

};

try {

comments.Create( comment );

return View("PostComment", comment);

}

catch( Exception ex )

{

throw ex;

}

View

<asp:Content ID="content" ContentPlaceHolderID="MainContent" runat="server">

<h2>

<% =Html.ActionLink( ViewData.Model.Title,"Post",

new { id = ViewData.Model.ID } )%>

</h2>

<div>Posted by <strong><% =ViewData.Model.Author%>

</strong> on <strong><% =ViewData.Model.DatePosted%></strong>

</div>

<p>

<% =ViewData.Model.Text.Replace( "\n", "<br />" )%>

</p>

<h3>Comments</h3>

<% if( ViewData.Model.Comments.Count > 0 )

{ %>

<%foreach( var comment in ViewData.Model.Comments )

{ %>

<% Html.RenderPartial("PostComment", comment); %>

<% } %>

</div><form id="new_comment" action="/Blog/Post" method="post">

<legend>Add Comment</legend>

</li> <li>

<label for="text"><span class="required">Comment: </span></label>

</li> </ul></fieldset>

</form> </asp:Content>

Displaying the comments

<% if( ViewData.Model.Comments.Count > 0 )

{ %>

<%foreach( var comment in ViewData.Model.Comments )

{ %>

<% Html.RenderPartial("PostComment", comment); %>

<% } %>

The above code iterating through Comments collection of our ViewData and also calling the PostComment user control with comment object as ViewData for displaying a single comment. This user control is also using for partial rendering when we send Ajax request.

PostComment.ascx

<u><% =ViewData.Model.Author%> commented on

<% =ViewData.Model.DatePosted%>:</u><p>

<% =ViewData.Model.Text%></p>

Client Side Validation

For client side validation, I am using jQuery Validation plugin. For more details about the jQuery plugin, visit http://bassistance.de/jquery-plugins/jquery-plugin-validation/ . This validation framework is very easy to use. You just put class="text required" for a required field validator. For an email validation, you need to put class="text email".

The validation process will be working with the jQuery method validate of form object.

$(function() {

// for highlight

var elements = $("input[type!='submit'], textarea, select");

elements.focus(function(){

$(this).parents('li').addClass('highlight');

});

elements.blur(function()

{

$(this).parents('li').removeClass('highlight');

});

$("#new_comment").validate() // for validation

});

You can optionally add validation rules along with validate method. The below code added validation rules included with validate method of form object.

$("#new_comment").validate({

rules: {

commentText: "required",

commentAuthor: {

required: true,

minlength: 2

email: {

required: true,

email: true

}

messages: {

commentText: "Please enter Comment"

commentAuthor: {

required: "Please enter your Name"

minlength: "Your Name must consist of at least 2 characters" },

email: " Please enter a valid email address”

}

});

jQuery includes

Ajxa using jQuery

$(document).ready(function() {

$("#ajaxLoader").hide();

$("#new_comment").submit(function()

{

addComment(this);

return false;

});

jQuery method $(document).ready() will executes when the DOM has been loaded and in this function we handles the onsubmit event of the form. In the onsubmit event, we calling the addComment function and then the return false statement prevent the form submit and we submit the form post using Ajax.

addComment function

function addComment(form)

{

$("#ajaxLoader").show();

$.ajax(

{type: form.method,

url: form.action,

data: $(form).serialize(),// Form data

dataType: "html",

completed: $("#ajaxLoader").hide(),

success: function(result)

{

var domObj = $(result); // create element from result html $("#post_comment").append(domObj); // append to end of comment list

error: function(error)

{

alert(error);

}

});

}

The above code sends the form data to the controller action Post using Ajax . The dataType: "html" represent that we want partial HTML result for our Ajax request. In the success function of our Ajax request, we append the result HTML to the <div> element named post_comment. This will dynamically add the new comment to the end of the comment list.

success: function(result)

{

var domObj = $(result);// create element from result html $("#post_comment").append(domObj); // append to end of comment list

}

Controller Action

[AcceptVerbs( "POST" )]

[ActionName( "Post" )]

public ActionResult AddComment( int postId, string commentAuthor, string commentText ) {

var comment = new Comment{

PostID = postId,

Author = commentAuthor,

Text = commentText,

DatePosted = DateTime.Now

};

try {

comments.Create( comment );

return View("PostComment", comment);

}

catch( Exception ex )

{

throw ex;

}

Our Ajax request will call the AddComment method and this will create a new comment for the given Post. After the data persist, we calling the return View("PostComment", comment). PostComment is our user control with new added comment object as the model of our View. So that the user control will generates markup for the new comment and our Ajax request will get the output as the HTML that rendered by the user control. So we can dynamically add the new markup to the HTML element of our post comment list. User control is very powerful technique for partial rendering. You can download the jQuery from http://docs.jquery.com/Downloading_jQuery and jQuery validation pugin from http://bassistance.de/jquery-plugins/jquery-plugin-validation. You can read Rick Strahl’s excellent article about jQuery from here.

Update : You can download the source code from MVCjQuery.zip