View Single Post
  #1 (permalink)  
Old October 13th, 2011, 05:08 PM
JackHerr JackHerr is offline
Authorized User
Points: 108, Level: 2
Points: 108, Level: 2 Points: 108, Level: 2 Points: 108, Level: 2
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Nov 2007
Location: North Salem, NY, USA.
Posts: 23
Thanks: 3
Thanked 0 Times in 0 Posts
Default Chpt 8 Ajax Search Form

I am having trouble getting the Ajax search form in Chpt 8 to work. Instead of the search results appearing in the Home page, as they do for the non-Ajax search in Chpt 5, they appear in a separate/new page with no styling (for which I created no view). The book indicates that the form will replace the UpdateTargetId="searchresults", citing on page 191 that "in this example, you replace an element with the id of searchresults." I did not find anywhere in the example code such an id, and I therefore don't have it in my code. Is this the problem? Do I need to create an element somewhere with this id, and if so, what element and where? I am using a successfully completed Music Store MVC 3.0 tutorial per the .pdf downloaded from the asp.net website.

I would appreciate any help you can give me.

Here are the relevant classes, with some slight modifications from the code in the book, with _Layout.cshtml containing working code from the tutorial:

_Layout:
Code:
<!DOCTYPEhtml>
<html>
<head>
<title>@ViewBag.Title</title>
<linkhref="@Url.Content("~/Content/Site.css")"rel="stylesheet"type="text/css"/>
<linkhref="@Url.Content("~/Content/themes/base/jquery-ui.css")"rel="stylesheet"type="text/css"/>
<scriptsrc="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"type="text/javascript"></script>
<scriptsrc="@Url.Content("~/Scripts/jquery.unobrusive-ajax.min.js")"type="text/javascript"></script>
<scriptsrc="@Url.Content("~/Scripts/jquery-ui.min.js")"type="text/javascript"></script>
<scriptsrc="@Url.Content("~/Scripts/MusicScripts.js")"type="text/javascript"></script>
</head>
<body>
<divid="header">
<h1>
<ahref="/">ASP.NET MVC MUSIC STORE</a></h1>
<ulid="navlist">
<liclass="first"><ahref="@Url.Content("~")"id="current">Home</a></li>
<li><ahref="@Url.Content("~/Store/")">Store</a></li>
<li>
@{Html.RenderAction("CartSummary", "ShoppingCart");}
</li>
<li><ahref="@Url.Content("~/StoreManager/")">Admin</a></li>
</ul>
</div>
@{Html.RenderAction("GenreMenu", "Store");}
<divid="main">
@RenderBody()
</div>
<divid="footer">
built with <ahref="http://asp.net/mvc">ASP.NET MVC 3</a>
</div>
</body>
</html>
>
Index view in Home:
Code:
@{
ViewBag.Title = "Index";
}
<h2>
This is the Home Page</h2>
@using (Html.BeginForm("Search", "Home", FormMethod.Get))
{
<inputtype="text"name="q"/>
<inputtype="submit"value="Search"/>
}
@using (Ajax.BeginForm("ArtistSearch", "Home", newAjaxOptions
{
InsertionMode = InsertionMode.Replace,
HttpMethod = "GET",
OnFailure = "searchFailed",
LoadingElementId="ajax-loader",
UpdateTargetId = "searchresults"
}))
{
<inputtype="text"name="q"/>
<inputtype="submit"value="Search"/>
<imgalt=""id="ajax-loader"src="@Url.Content("~/Content/Images/ajax-loader.gif")"style="display:none"/>
}
ActionResult in Home controller:
Code:
publicActionResult ArtistSearch(string q)
{
var artists = storeDB.Artists.Where(a => a.Name.Contains(q)).ToList();
return PartialView(artists);
}
ArtistSearch partial view:
Code:
@model IEnumerable<MvcMusicStore.Models.Artist>
<divid="searchresults">
<table>
<tr>
<th>
Name
</th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
</tr>
}
</table>
</div>
Script in MusicScripts.js:
Code:
function searchFailed() { $("#searchresults").html("Problem with search."); }