ASP.Net MVC Client Validation For Dynamically Added Form

This is how I have implemented the client side validation with MVC3 client side validation with JQuery validation plugin. The requirement was to create a model dialog with a form which is loaded via an Ajax request to the server.

1. Enable client validation in web.config

We need to enable client side validation in web.config application settings section like thism

 
 <appSettings>
          <add key="ClientValidationEnabled" value="true"/>
        <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
 </appSettings>
    

    2 The form
 In your form you need to have a FormContext otherwise it will not generate validation attributes.  If the FormContext is null we need to create a new FormContext  like this in your view.

 
@{using (Html.BeginForm("Create", "Person", FormMethod.Post)
  {
      if (this.ViewContext.FormContext == null)
      {
          this.ViewContext.FormContext = new FormContext();
      }
    // .....
  }

    3 Phrase validation attributes 
 Then after the ajax request we need to phrase validation attributes using JQuery like this,<br />

 
$.get("@Url.Action("Create", "Person")", null, function (data) {
         $('#yourDivId').html(data);
         $("form").removeData("validator");
         $("form").removeData("unobtrusiveValidation");
        $.validator.unobtrusive.parse("form");          
   });

Creating Categorized/Grouped Autocomplete Menu with JQuery

JQuery has given you a nice extendable library to create auto complete. But what if you want to customize it to have something like Facebook search autocomplete menu.  Here I have gathered several features of JQuery to make this customization. Here is my JQuery with ASP.net MVC3 but you can use whatever the backend which you can return a array of Json objects like this,
Here is my Search action in SearchController




public string Search(string term) { IList searchResultViewModels = new List(); // do your search logic here, for now i'm adding some dummy resuts like below, searchResultViewModels.Add(new SearchResultViewModel { Id = 1, ImageId = 2, Name = "test", SearchResultType = SearchResultType.People }); searchResultViewModels.Add(new SearchResultViewModel { Id = 2, ImageId = 3, Name = "testsdsd", SearchResultType = SearchResultType.People }); searchResultViewModels.Add(new SearchResultViewModel { Id = 3, ImageId = 4, Name = "FFaa", SearchResultType = SearchResultType.Companies }); searchResultViewModels.Add(new SearchResultViewModel { Id = 4, ImageId = 5, Name = "Teset", SearchResultType = SearchResultType.Companies }); return Json(searchResultViewModels); }



And here is my JQuery code,



$(document).ready(function () { //To override the functionality of _renderMenu to have a categorized menu $.widget( "custom.catcomplete", $.ui.autocomplete, { _renderMenu: function( ul, items ) { var self = this, currentCategory = ""; $.each( items, function( index, item ) { if ( item.SearchResultType != currentCategory ) { ul.append( "<li class='title_sr_re'>" + item.SearchResultType + "</li>" ); currentCategory = item.SearchResultType; } self._renderItem( ul, item ); }); } }); $('#txtSearch').each(function() { //this is to implement the default text in the search textbox $.data(this, 'default', this.value); $.data(this, 'defaultColor', "black"); $(this).css("color","Gray"); }) . focus(function() { if (!$.data(this, 'edited')) { $(this).css("color", $.data(this, 'defaultColor')); this.value = ""; } }) .change(function() {//For the default value in search $.data(this, 'edited', this.value != ""); }) .blur(function() {//For the default value in search if (!$.data(this, 'edited')) { $(this).val( $.data(this, 'default')); $(this).css("color","Gray"); } }) .catcomplete({ minLength: 0, selectFirst: true, source: "@Url.Action("Search", "Search")",// I am using MVC3 here ,you can give your own URL which returns //Json objects select: function (event, ui) { // you can handle the select event of the autocomplete (I'm redirecting to another URL here) location.href='@Url.Action("ContactProfile", "Contact")' +('?profileId=')+ui.item.Id; return false; }, open: function(event, ui) { var autocomplete = $( this ).data( "catcomplete" ), menu = autocomplete.menu; //to select first item in the autocomplete (then you can press enter to select it) menu.activate( $.Event({ type: "mouseenter" }), menu.element.children().first().next()); return false; } }).data("catcomplete")._renderItem = function (ul, item) {//override renderItem function to customize menu var term=$('#txtSearch').val(); var action='yourImageUrl; return $("<li class=\"listItem\" ></li>") .data("item.autocomplete", item) .append("<a>"+ "<img src='"+action+"?thumbnailId="+item.ImageId +"'></img>" + item.Name.replace(new RegExp('(' + item.Term + ')', 'gi'), "<b>$1</b>") + "</a>") .appendTo(ul); }; });