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")

}

审查 Controller

// 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);
        }

CompoundReview模型

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 的引用。

添加这两个内容使代码可以按原样对我来说工作，所有这些都可以在 Controller 端使用虚拟数据。

<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>