ASP.NET MVC: Using jQuery AutoComplete UI with WEB API

Last week when I was conducting a MVC training with one of my clients, I was asked about some possible ways to implement auto-complete in ASP.NET MVC Views, similar to what we have in Google Search or the AJAX Extender. My solution was to use Query UI. You can get this free library from www.jquery.com and www.jqueryui.com. If you use Visual Studio for your development, you can use the respective Nuget Packages to get the dependencies installed via Nuget.

For this article, the Sql Server Database server is used with ‘Company’ as database and ‘EmployeeInfo’ as the table. The script is as below:

CREATE TABLE [dbo].[EmployeeInfo](

    [EmpNo] [int] IDENTITY(1,1) NOT NULL,
    [EmpName] [varchar](50) NOT NULL,
    [Salary] [decimal](18, 0) NOT NULL,
    [DeptName] [varchar](50) NOT NULL,
    [Designation] [varchar](50) NOT NULL,
CONSTRAINT [PK_EmployeeInfo] PRIMARY KEY CLUSTERED
(
    [EmpNo] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF,
IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON)
ON [PRIMARY]
) ON [PRIMARY]
GO

Step 1: Open VS2012 and create a MVC application. Name it as ‘MVC_jQuery_AutoComplete’. In this project, add the model for the above table using Ado.NET EF. After completing the wizard for ADO.NET, the entity will be displayed as below:



Step 2: Build the Project. Now to add a WEB API Controller, right- click on the controller folder and add the new WEB API controller based upon the ADO.NET EF. This will generate Read/Write API Actions as below:



This step will add a new WEB API class with Read and Write methods. These methods perform communication using JSON.

Step 3: In the project, add a new empty EmployeeInfoController. This controller will only have the Index method. We are doing this so that we can add a new Empty Index View.

Step 4: Add a new Index Empty view in the project by right clicking on the Index method of the EmployeeInfoController class. In this View, add the HTML control as below:

Enter The Employee Name Here:


Step 5: In the Scripts folder add below script files, these you can get from www.jquery.comand www.jqueryui.com.

• jquery-1.8.2.js
• jquery-ui-1.9.0.js
• jquery-ui-1.9.0.min.js

In the CSS folder, add the following file:

• jquery-ui-1.9.0.custom.css

Step 6: Refer these files in the Index.cshtml as below:





Step 7: Write the below style in the Index.cshtml, this defines the appearance for the Auto-Complete:

 

Step 8: Add the following script shown here. This makes an AJAX call to the WEB API (your port may be different), the JSON data is received and then it is converted into an Array. This array is then passed to the source parameter of the autocomplete method defined for the textbox.

     

Step 9: Run the application and navigate to the EmployeeInfo/Index, you will see the textbox. Add some text into it. If it matches with the data returned from the WEB API call, it will be displayed in the AutoComplete area as below:



Conclusion 

Ideally we should restrict the number of rows returned to Top 10 or 20 results for performance considerations. It’s pretty easy to use the jQuery UI plugin and add AutoComplete behavior to a text box. Overall jQuery UI is a powerful tool kit to have in one’s web development portfolio. 

Download the entire source code 

Custom Validation for Cascading Dropdownlist in MVC Razor

This article will demonstrate, how to make and validate cascading dropdown list with in Asp.Net MVC4 Razor application using custom server-side and client-side validation. In this article, you will learn how set selected value with in Dropdown list in MVC Razor.

How to do it..

Follow the following steps for making and validating cascading dropdown list in mvc razor.

Step 1 : Design Model

 using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;
using System.Text.RegularExpressions;
 namespace Mvc4_Validate_CascadingDropdown.Models
 { 
public class RegistrationModel 
{
 [Required(ErrorMessage = "Please Enter Email Address")]
 [Display(Name = "UserName (Email Address)")]
 [RegularExpression(".+@.+\\..+", ErrorMessage = "Please Enter Correct Email Address")]
 public string UserName { get; set; }
 [Display(Name = "Country")]
 public Country Country { get; set; }
 [Display(Name = "City")]
 public City City { get; set; }
 [Required(ErrorMessage = "Please Enter Address")]
 [Display(Name = "Address")]
 [StringLength(200)]
 public string Address { get; set; }
 }
// IClientValidatable for client side Validation 
 public class MustBeSelectedAttribute : ValidationAttribute, IClientValidatable 
{
 public override bool IsValid(object value) {
 if (value == null || (int)value == 0)
 return false;
 else return true; 
} 
// Implement IClientValidatable for client side Validation 
public IEnumerable GetClientValidationRules(ModelMetadata metadata, ControllerContext context) 
{ 
return new ModelClientValidationRule[] 
{
 new ModelClientValidationRule { ValidationType = "dropdown", ErrorMessage = this.ErrorMessage } }; 
} 
}
 public class Country
 { 
[MustBeSelectedAttribute(ErrorMessage = "Please Select Country")] 
public int? ID { get; set; }
 public string Name { get; set; }
 }
 public class City 
{ 
[MustBeSelectedAttribute(ErrorMessage = "Please Select City")] 
public int? ID { get; set; } 
public string Name { get; set; }
 public int? Country { get; set; } 
}
} 

Step 2: Design View based on Model

 @model Mvc4_Validate_CascadingDropdown.Models.RegistrationModel
@{ ViewBag.Title = "Validating Cascading Dropdownlist";
}






Custom Validation for Cascading Dropdown List

@using (Html.BeginForm())

{

Custom Validation for Cascading Dropdown List

@Html.LabelFor(m => m.UserName)

@Html.TextBoxFor(m => m.UserName, new { maxlength = 50 })

@Html.ValidationMessageFor(m => m.UserName)

@Html.LabelFor(m => m.Country)

@Html.DropDownListFor(m => m.Country.ID, new SelectList(ViewBag.Country, "ID", "Name", ViewBag.SelCountry), new { style = "width:310px" })

@Html.ValidationMessageFor(m => m.Country.ID)

@Html.LabelFor(m => m.City)

@Html.DropDownListFor(m => m.City.ID, new SelectList(ViewBag.City, "ID", "Name", ViewBag.SelCity), new { style = "width:310px" })

@Html.ValidationMessageFor(m => m.City.ID)

@Html.LabelFor(m => m.Address)

@Html.TextAreaFor(m => m.Address, new { maxlength = 200 })

@Html.ValidationMessageFor(m => m.Address)

type="submit" value="Submit" />

}

Design Controller Based on Model & View

 using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Mvc4_Validate_CascadingDropdown.Models;
using System.Text.RegularExpressions;
namespace Mvc4_Validate_CascadingDropdown.Controllers {
 public class HomeController : Controller {
 #region Private Methods
 void BindCountry() {
 List lstCountry = new List
{
new Country { ID = null, Name = "Select" }, 
new Country { ID = 1, Name = "India" }, 
new Country { ID = 2, Name = "USA" } };
 ViewBag.Country = lstCountry;
 }
 //for server side
 void BindCity(int? mCountry) {
 try {
 if (mCountry != 0) 
{ 
//below code is only for demo, you can pick city from database
 int index = 1;
 List lstCity = new List{ 
new City { Country = 0, ID=null, Name = "Select" }, 
new City { Country = 1, ID=index++, Name = "Delhi" }, 
new City { Country = 1, ID=index++, Name = "Lucknow" }, 
new City { Country = 1, ID=index++, Name = "Noida" }, 
new City { Country = 1, ID=index++, Name = "Guragon" }, 
new City { Country = 1, ID=index++, Name = "Pune" }, 
new City { Country = 2, ID=index++, Name = "New-York" }, 
new City { Country = 2, ID=index++, Name = "California" },
 new City { Country = 2, ID=index++, Name = "Washington" }, 
new City { Country = 2, ID=index++, Name = "Vermont" }, };
 var city = from c in lstCity
 where c.Country == mCountry || c.Country == 0
 select c;
 ViewBag.City = city;
 }
 else {
 List City = new List { 
new City { ID = null, Name = "Select" } };
 ViewBag.City = City;
 }
 }
 catch (Exception ex) {
 }
 }
 #endregion
 //for client side using jquery
 public JsonResult CityList(int mCountry) {
 try {
 if (mCountry != 0) { 
//below code is only for demo, you can pick city from database
 int index = 1;
 List lstCity = new List{ 
new City { Country = 0, ID=null, Name = "Select" }, 
new City { Country = 1, ID=index++, Name = "Delhi" }, 
new City { Country = 1, ID=index++, Name = "Lucknow" }, 
new City { Country = 1, ID=index++, Name = "Noida" }, 
new City { Country = 1, ID=index++, Name = "Guragon" }, 
new City { Country = 1, ID=index++, Name = "Pune" }, 
new City { Country = 2, ID=index++, Name = "New-York" }, 
new City { Country = 2, ID=index++, Name = "California" }, 
new City { Country = 2, ID=index++, Name = "Washington" }, 
new City { Country = 2, ID=index++, Name = "Vermont" }, };
 var city = from c in lstCity
 where c.Country == mCountry || c.Country == 0
 select c;
 return Json(new SelectList(city.ToArray(), "ID", "Name"), JsonRequestBehavior.AllowGet);
 } 
}
 catch (Exception ex) {
 }
 return Json(null); 
}
 public ActionResult Index()
 {
 return View();
 }
 public ActionResult CustomDropdown()
 {
 BindCountry();
 BindCity(0);
 return View();
 }
 [HttpPost]
 public ActionResult CustomDropdown(RegistrationModel mRegister) 
{
 if (ModelState.IsValid) 
{
 return View("Completed");
 }
 else 
{
 ViewBag.SelCountry = mRegister.Country;
 BindCountry();
 ViewBag.SelCity = mRegister.City;
 if (mRegister.Country != null)
 BindCity(mRegister.Country.ID);
 else
 BindCity(null);
 return View(); 
}
 }
 }
} 

How it works..

It's time to run the project and let's see the result as shown below :

   

What do you think?

I hope you will enjoy the tricks while programming with MVC Razor. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

Download Code