jquery-ui自动完成asp.net mvc无法运行

Question

我在我的mv5网站上创建了一个表单,用户可以在其中撰写餐馆评论.在表格中有一个餐馆名称字段.我已经在字段中添加了jquery-ui自动完成功能,因此用户可以在网站数据库中搜索餐馆.但是,当我输入餐厅名称字段时.自动完成功能无法运行.

任何帮助,将不胜感激.

查看cshtml文件

@model BiteWebsite.Models.CompoundReviewModel

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Review</h4>
        <hr />
        @Html.ValidationSummary(true)
        <div class="form-group">
            @Html.LabelFor(model => model.RestaurantName, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBox("RestaurantName", null, new { id = "RestaurantSearch" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Title, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Title)
                @Html.ValidationMessageFor(model => model.Title)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Description, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Description)
                @Html.ValidationMessageFor(model => model.Description)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Food, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Food)
                @Html.ValidationMessageFor(model => model.Food)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Ambience, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Ambience)
                @Html.ValidationMessageFor(model => model.Ambience)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Service, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Service)
                @Html.ValidationMessageFor(model => model.Service)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Value, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Value)
                @Html.ValidationMessageFor(model => model.Value)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.RestaurantName, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBox("RestaurantName", null, new { id = "RestaurantSearch" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>

</div>
<script>
    $(function () {
        $("#RestaurantSearch").autocomplete({
            source: '@Url.Action("GetRestaurant")'

        });
    });
</script>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/jqueryui")

}

审查控制器

// GET: /Review/Create
        public ActionResult Create()
        {

            return View();
        }

        // POST: /Review/Create

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create(CompoundReviewModel Model)
        {
            var review = new Review()
            {
                Title = Model.Title,
                Description = Model.Description,
                Food = Model.Food,
                Ambience = Model.Ambience,
                Service = Model.Service,
                Value = Model.Value
            };
            if (ModelState.IsValid)
            {
                db.Reviews.Add(review);
                db.SaveChanges();
                return RedirectToAction("Index");
            }

            return View(review);
        }

        public JsonResult GetRestaurant(string term)
        {
            ApplicationDbContext db = new ApplicationDbContext();
            List<string> Restaurant;
            Restaurant = db.Restaurants.Where(x => x.Name.StartsWith(term)).Select(y => y.Name).ToList();
            return Json(Restaurant, JsonRequestBehavior.AllowGet);
        }

CompoundReviewModel

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;

namespace BiteWebsite.Models
{
    public class CompoundReviewModel
    {
        public Restaurant Restaurant { get; set; }
        public Review Review { get; set; }

        [Required]
        [Display(Name = "Title")]
        public string Title { get; set; }
        [Required]
        [Display(Name = "Description")]
        public string Description { get; set; }
        [Required]
        [Display(Name = "Food")]
        public int Food { get; set; }
        [Required]
        [Display(Name = "Ambience")]
        public int Ambience { get; set; }
        [Required]
        [Display(Name = "Service")]
        public int Service { get; set; }
        [Required]
        [Display(Name = "Value")]
        public int Value { get; set; }

        [Required]
        [Display(Name = "Restaurant Name")]
        public string RestaurantName { get; set; }



    }
}

Answer 1

好的,有两件事.

1. 对jQuery的引用
2. 对jquery ui css的引用.

添加这两个允许代码按我的方式工作,所有这些都与控制器端的虚拟数据有关.

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script>
    $(function () {
        $("#RestaurantSearch").autocomplete({
            source: '@Url.Action("GetRestaurant")'

        });
    });
</script>