Josh McGee Josh McGee - 2 days ago 6
Ajax Question

Using Autocomplete on Second Level Page in ASP.net MVC

I know this is probably something really easy.

I'm trying to use an autocomplete function to fill in a field when a user registers. I've tried the script on an index page for the controller (such as ~/home or ~/Account). But when I go down a level to Account/Register, how do I include the script in my Return View?

Account Controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Transactions;
using System.Web;
using System.Web.Mvc;
using System.Web.Security;
using DotNetOpenAuth.AspNet;
using Microsoft.Web.WebPages.OAuth;
using WebMatrix.WebData;
using AccountModule_Attempt_5.Filters;
using AccountModule_Attempt_5.Models;

namespace AccountModule_Attempt_5.Controllers
{
[Authorize]
[InitializeSimpleMembership]
public class AccountController : Controller
{

[AllowAnonymous]
public ActionResult Index()
{

return View();
}

//
// GET: /Account/Register

UsersContext db = new UsersContext();
public ActionResult autocomplete(string term)
{

var model =
db.Customers
.Where(r => r.No_.StartsWith(term))
//.Take(10)

.Select(r => new
{
label = r.No_
});
return Json(model, JsonRequestBehavior.AllowGet);
}


[AllowAnonymous]
public ActionResult Register()
{

return View();
}


Javascript

$(function () {

// autocomplete
var submitAutocompleteForm = function (event, ui) {
var $input = $(this);
$input.val(ui.item.label);

var $form = $input.parents("form:first");
$form.submit();
}


var createAutocomplete = function () {
var $input = $(this);
var options = {
source: $input.attr("data-otf-autocomplete"),
select: submitAutocompleteForm,
};

$input.autocomplete(options);
};

$("input[data-otf-autocomplete]").each(createAutocomplete);
});


View

@model AccountModule_Attempt_5.Models.RegisterModel
@{
ViewBag.Title = "Register";
}


@using (Html.BeginForm()) {
@Html.AntiForgeryToken()
@Html.ValidationSummary()

<fieldset>
<legend>Registration Form</legend>
<ol>

<li>
@Html.LabelFor(m => m.Customer_No_)
@Html.TextBoxFor(m => m.Customer_No_, new { data_otf_autocomplete = Url.Action("Autocomplete")})
</li>
</ol>
}


_layout

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>
</div>
<div class="float-right">
<section id="login">
@Html.Partial("_LoginPartial")
</section>
<nav>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("Customer", "Index", "Customer")</li>
<li>@Html.ActionLink("User Profile", "Index", "UserProfile")</li>
<li>@Html.ActionLink("Roles", "Index", "Roles")</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
</div>
</div>
</footer>

@*@Scripts.Render("~/bundles/jquery")
<script src="@Url.Content("~/Scripts/autocomplete.js")" type="text/javascript"></script>*@
@Scripts.Render("~/bundles/otf")
@RenderSection("scripts", required: false)
</body>
</html>


BundleConfig.cs

using System.Web;
using System.Web.Optimization;

namespace AccountModule_Attempt_5
{
public class BundleConfig
{
// For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
public static void RegisterBundles(BundleCollection bundles)
{

bundles.Add(new ScriptBundle("~/bundles/otf").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery-ui-{version}.js",
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*",
"~/Scripts/otf.js"
));

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));

// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));
}
}
}

Answer

Ok, I feel dumb. It was a simple typo. I had @Scripts.Render("~/Content/themes/base") instead of @Styles.Render("~/Content/themes/base")

Comments