我在 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; }
}
}
最佳答案
好的,有两件事。
- 对 jQuery 的引用
- 对 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>
关于jquery-ui 自动完成 asp.net mvc 不运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21911448/