In this post, we are going to demonstrate some simple Ajax updates. We will be using the AdentureWorks db for this. You can download it here if you don’t have it.
Launch VS2010 and create a new ASP.NET MVC 2 Application:
For this, we’ll skip creating the test project.
Next we’ll use LINQ to SQL to generate some data models. Right click on the Models node and Add Item (or Ctrl-Shift-A when the node is selected):
When the designer comes up, add the Product and ProductCategory tables.
In HomeController.cs create a new method called ProductSearch:
We’ll need to use our model, so add
using AWAjaxDemo.Models;
then we’ll add our new method:
public ActionResult ProductSearch(string query)
{
IList<Product> products = new List<Product>();
AWModelsDataContext db = new AWModelsDataContext();
if (!string.IsNullOrWhiteSpace(query))
{
products = db.Products.Where(p => p.Name.StartsWith(query)).OrderBy(p => p.Name).ToList();
}
else
products = db.Products.OrderBy(p => p.Name).ToList();
if (Request.IsAjaxRequest())
return View("ProductSearchResults", products);
else
return View(products);
}
We check to see if we have a query value coming in, if we do, we limit our query to names that start with the query. If not, we return them all. Also note, that we check to see if this is an Ajax call. If someone has javascript off, we still want this to be functional.
Compile the project so we’ll have the model types available to us when we create our partial view.
Right click on Views/Home and add a View. We’ll call this ProductSearchResults:
We’ll simplify the view down a bit to just include a few fields. Of course, ideally we’d use a view-model for this to limit what data is even available, but that’s not the point of this post.
<%@ Control Language="C#"
Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<AWAjaxDemo.Models.Product>>" %>
<table>
<tr>
<th>
Name
</th>
<th>
ProductNumber
</th>
<th>
Color
</th>
<th>
StandardCost
</th>
<th>
ListPrice
</th>
</tr>
<% foreach (var item in Model) { %>
<tr>
<td>
<%: item.Name %>
</td>
<td>
<%: item.ProductNumber %>
</td>
<td>
<%: item.Color %>
</td>
<td>
<%: String.Format("{0:F}", item.StandardCost) %>
</td>
<td>
<%: String.Format("{0:F}", item.ListPrice) %>
</td>
</tr>
<% } %>
</table>
So, now we have a simplified partial view.
Now we’ll add our main view. Right-click on the View/Home node and add a strongly typed empty view. Base it on the AWAjaxDemo.Models.Product type that we did for the partial view.
Replace the default code with this:
<%@Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master"
Inherits="System.Web.Mvc.ViewPage<IEnumerable<AWAjaxDemo.Models.Product>>"%>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Product Search
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<h2>
ProductSearch</h2>
<% using(Ajax.BeginForm("ProductSearch", new AjaxOptions { UpdateTargetId = "results"}))
{ %>
Search: <%=Html.TextBox("query")%> <input type="submit" value="Go" />
<div id="results">
<% Html.RenderPartial("ProductSearchResults", Model); %>
</div>
<%} %>
</asp:Content>
You’ll notice that the two Ajax scripts are referenced. They are added to mvc 2 applications by default. The other thing to notice is how the form is constructed. Normally the Html.BeginForm extension method is used. Here we are using the Ajax.Begin form method and passing it a new instance of AjaxOptions specifying the target to be updated. In our case, the target is the div with the id result. Our ProductSearchResults partial view will be rendered there after the Ajax call.
That was pretty easy … of course in a production environment, you’d want to be using caching to reduce the database calls.
Technorati Tags:
asp.net mvc,
ajax