Using ASP.NET MVC and Ajax to check names availability.

Posted by César Intriago on October 30, 2009 · 13 Comments 

This article demonstrates how to use ASP.NET MVC Ajax and JQuery to create a MVC User Control that checks the availability of a name. For example you may want to create a URL route that includes project names as parameters and you want to make sure those names are unique. The control will look like this:

Key Validator

Using jQuery and ASP.NET MVC Ajax we can call the view’s controller to check the availability of the name:

Validating project name.

Project name available.

 

Project name already in use.

Open Visual Studio 2008 and create a new ASP.NET MVC 1.0 project, now we need to create the KeyValidatorController class inside the Controllers folder:

 

KeyValidatorController.cs

   1: using System;

   2: using System.Collections.Generic;

   3: using System.Linq;

   4: using System.Web;

   5: using System.Web.Mvc;

   6: using System.Web.Mvc.Ajax;

   7: using System.Threading;

   8:  

   9: namespace CheckKeyName.Controllers

  10: {

  11:     public class KeyValidatorController : Controller

  12:     {

  13:         //

  14:         // GET: /KeyValidator/Check

  15:  

  16:         public ActionResult Check(string projectName)

  17:         {

  18:             Thread.Sleep(5000);

  19:  

  20:             if (!String.Equals(projectName, "superProject", StringComparison.InvariantCultureIgnoreCase))

  21:                 return Content("Available");

  22:  

  23:             return Content("Already in use.");

  24:         }

  25:     }

  26: }

 

As you can see in line 18, we are using the Thread.Sleep(5000) method to simulate a 5 seconds delay in our application while the information is retrieved.

Line 20 compares the project name with a hardcoded string and in line 23 we return the text result to the view, pretty simple right? (In a real application we would replace lines 20 and 21 by the actual code to access a names catalog and perform the validation). 

In lines 21 and 23 we are using the Content accion result to return a string to the View.

Now lets create the KeyValidator View by adding a new MVC User Control inside the Shared folder of the Views:

KeyValidator.ascx

   1: <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

   2:  

   3: <script language="javascript">

   4:  

   5:     function checking() {

   6:         $("#statusMsg").html('');

   7:         $("#checkButton").hide();

   8:     }

   9:  

  10:     function checked() {

  11:         $("#checkButton").show();

  12:  

  13:         if ($("#statusMsg").html() != "Available")

  14:             $("#statusMsg").addClass("error");

  15:         else

  16:             $("#statusMsg").removeClass("error");

  17:     }

  18:  

  19:     function previewUrl(e) {

  20:         $("#statusMsg").html('');

  21:         $("#projectUrl").html(e.value);

  22:  

  23:     }

  24:  

  25: </script>

  26:  

  27: <%using (Ajax.BeginForm("Check", "KeyValidator", new AjaxOptions { 

  28:       LoadingElementId = "working",

  29:       OnBegin = "checking",

  30:       UpdateTargetId = "statusMsg",

  31:       OnSuccess = "checked"

  32:       

  33:   } )) { %>

  34:  

  35:     <%= Html.TextBox("projectName", null, new { onkeyup = "javascript:previewUrl(this);", style = "float:left;" })%>

  36:     <input id="checkButton" type="submit" value="check"/>

  37:     <img id="working" alt="working" src="../../Content/Images/working.gif" style="display:none;" />

  38:     <div id="statusMsg" style="display:inline"></div>

  39:     <div class="clear"></div>

  40:     http://server/project/<div id="projectUrl" style="display:inline"></div>

  41: <% } %>

 

In this View we are using the Ajax.BeginForm helper to create an Ajax form that will post the data to the Check action of the KeyValidator controller. In line 27 we are setting the following Ajax Form properties:

• LoadingElementId = "working"
  
  The ID of the Html element that will be displayed while the request is been completed. In this case we are displaying a progress bar. Note the style="display:none;" attribute in line 37 to hide the image, the MVC Ajax helper will automatically display the image when necessary.
• OnBegin = "checking"
  
  The name of the JavaScript function that will be called when the user clicks on the Check button, this function clears any status message and hides the Check button.
• UpdateTargetId = "statusMsg"
  
  The ID of the Html element that will be filled with the controller text result.
• OnSuccess = "checked"
  
  The name of the JavaScript function that will be called after completing the validation process, in this function we check the controller response and set the style of the text.
• In line 35 we are using another helper to render a TextBox and we show how to hook the onKeyUp java script event with our previewUrl method to  update the preview URL text.

 

Finally lets modify our Home page to add our user control, open the Index view and add the code to render the partial view (Line 12):

 

Index.aspx

   1: <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

   2:  

   3: <asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">

   4:     Home Page

   5: </asp:Content>

   6:  

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

   8:     <h2><%= Html.Encode(ViewData["Message"]) %></h2>

   9:     <p>

  10:         To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.

  11:     </p>

  12:     <% Html.RenderPartial("KeyValidator"); %>

  13: </asp:Content>

 

If you run your application, enter different project names and see how the URL preview is updated as you type in, when you press the Check button the progress bar will be displayed and a few seconds later the reponse will be presented to the user.

 

Download the source code

Advertisement

Filed under ASP.NET, MVC