View Single Post
  #5 (permalink)  
Old October 14th, 2011, 02:22 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 Please Look at Code to See What's Wrong

I think I have all of your suggestions covered. Here are the complete relevant code blocks. If you have time, please look at them to see where I have slipped up. Thanks.

_Layout view -- Please note that I elected to put all link and script references in this view, which the text seems to suggest will work.
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.all.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.unobtrusive-ajax.min.js")"type="text/javascript"></script>
<scriptsrc="@Url.Content("~/Scripts/jquery-ui-1.8.11.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 of Home Controller -- Please note addition now of the data-autocomplete-source attribute. Also, please note that I kept the simple search built earlier in the book. Both searches work. It is just the autocomplete feature that is not working.
Code:
@model List<MvcMusicStore.Models.Album>
@{
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 Title"/>
}
@using (Ajax.BeginForm("ArtistSearch", "Home", newAjaxOptions
{
InsertionMode = InsertionMode.Replace,
HttpMethod = "GET",
OnFailure = "searchFailed",
LoadingElementId = "ajax-loader",
UpdateTargetId = "searchresults"
}))
{
<inputtype="text"name="q"data-autocomplete-source="@Url.Action("QuickSearch", "Home")"/>
<inputtype="submit"value="Search Artist"/>
<imgalt=""id="ajax-loader"src="@Url.Content("~/Content/Images/ajax-loader.gif")"style="display:none"/>
}
<divid="searchresults">
</div>
Complete Home Controller -- Please note that I built the tutorial with a database-first implementation of the database, hence the difference in model name.
Code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcMusicStore.Models;
namespace MvcMusicStore.Controllers
{
publicclassHomeController : Controller
{
MusicStoreEntitiesInModel storeDB = newMusicStoreEntitiesInModel();
//
// GET: /Home/
publicActionResult Index()
{
return View();
}
publicActionResult Search(string q)
{
var albums = storeDB.Albums.Include("Artist").Where(a => a.Title.Contains(q) || q == null).Take(10);
return View(albums);
}
publicActionResult QuickSearch(string term)
{
var artists = GetArtists(term).Select(a => new { value = a.Name });
return Json(artists, JsonRequestBehavior.AllowGet);
}
publicActionResult ArtistSearch(string q)
{
var artists = GetArtists(q);
return PartialView(artists);
}
privateList<Artist> GetArtists(string searchString)
{
return storeDB.Artists.Where(a => a.Name.Contains(searchString)).ToList();
}
}
}
MusicScripts.js -- Please note that I use the first of the two forms you suggest.
Code:
/// <reference path="jquery-1.5.1.js" />
/// <reference path="jquery-ui-1.8.11.js" />
$(function () {
$("input[data-autocomplete-source]").each(function () {
var target = $(this);
target.autocomplete({ source: target.attr("data-autocomplete-source") });
});
});
function searchFailed() { $("#searchresults").html("Sorry, there was a problem with the search."); }