Archive

Posts Tagged ‘controller’

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

How to update model data in receiving action

May 30, 2011 Leave a comment

When using all the standard out-of-the-box fuctionality of ASP.NET MVC, you may notice that you simply can’t just update a model’s properties in an action method.  Oh the code will execute just fine, but the data you see on the page will not reflect updates from code.  Here’s an example of what I mean:

[HttpPost]
public ActionResult Index(myModel m)
{
   if (ModelState.IsValid)
   {
      // do some stuff
      m.Message = "data submitted";
   }
   return View(m);
 }

The new value of m.Message will not be reflected on the page.  Instead you will see the previous value.  For the updates to be reflected you must remove the old data from Model State.  You do this in one of two ways:

  • Either clear out the affected properties, one by one using ModelState.Remove(propertyName)
  • Or just clear out the entire model state with ModelState.Clear()

So the above code becomes:

[HttpPost]
public ActionResult Index(myModel m)
{
   if (ModelState.IsValid)
   {
      // do some stuff
      ModelState.Clear()
      m.Message = "data submitted";
   }
   return View(m);
}

-Krip

P.S. credit

Categories: ASP.NET, MVC Tags: , , ,