Archive

Posts Tagged ‘css’

Training videos and articles on Microsoft web development

December 12, 2013 Leave a comment

Web Standards Update for Visual Studio 2010 SP1

June 16, 2011 Leave a comment

Some tweaks to Visual Studio 2010 SP1 to support better intellisense for HTML 5, CSS 3, and JavaScript.

From what I gather no Visual Studio 2010 code is changed (Hence why it is on the Visual Studio Gallery).

Download here.

Details on Hanselman’s blog here.

-Krip

 

How to use jQuery autocomplete with MVC

June 2, 2011 2 comments

Gone are the days of hand coding AJAX to get auto complete textboxes (a.k.a. incremental search).  jQuery’s Autocomplete widget does all the heavy lifting for you.

Want to know how to use it with an ASP.NET MVC app?  Microsoft has documented this step-by-step on their asp.net site.  The article shows how to use the widget two ways: 1) with items hard-coded on the page, and 2) with items retrieved from a call to the server (controller action).

To give you a leg up I’ll share my experience.

1. When setting the Source to point to the URL of your action, I used the razor markup instead of the angle bracket / percent side syntax.

So, the updated code looks like:

$("#Title").autocomplete({ 
   source: '@Url.Action("List")', 
   select: function (event, ui) { 
      $("#movieID").val(ui.item.id); 
      } 
   });

2. The name of the parameter in the controller action must be “term” – any other name results in a null value being passed in.

3. Be sure that the property of the names you want to display is called “label”.

public ActionResult List(string term) { 
   var results = from m in _repository.Movies 
                 where m.Title.StartsWith(term) 
                 select new { label = m.Title, id = m.Id }; 
   return Json(results.ToArray(), JsonRequestBehavior.AllowGet); 
}

4. To get the right visual look you need to include some stylesheets:

   <link href="@Url.Content("~/Content/themes/base/jquery.ui.base.css")"
      rel="stylesheet" type="text/css" />
   <link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")"
      rel="stylesheet" type="text/css" />
   <link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")"
      rel="stylesheet" type="text/css" />

-Krip