2

这是我的第一篇文章，所以请各位小伙伴们放轻松。我正在尝试实现一个利用 jquery 自动完成的创建表单。创建表单允许用户通过提交按钮输入将保存到我的数据库中的数据。这是我的代码：

控制器

    // GET: /Inspection1/Create
    public ActionResult Create()
    {
        InspectionInfo model = new InspectionInfo
        {
            Submitted = DateTime.Now,
            Contact = new Contact()
        };

        ViewBag.CountyName = new SelectList(db.Counties, "CountyName", "CountyName");


        return View(model);
    }

    //
    // POST: /Inspection1/Create

    [HttpPost]
    public ActionResult Create(InspectionInfo inspectioninfo)
    {
            if (ModelState.IsValid)
        {
            db.InspectionInfos.Add(inspectioninfo);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        return View(inspectioninfo);
    }

    // this allows for autocompletion behavior
    public ActionResult QuickSearchContact(string term)
    {
        var contacts = db.Contacts
                        .Where(r => r.ContactName.Contains(term))
                        .Take(10)
                        .Select(r => new { label = r.ContactName });
        return Json(contacts, JsonRequestBehavior.AllowGet);

    }

楷模

  public class InspectionInfo
  {
    [Key]
    public int InspectionId { get; set; }

    [DataType(DataType.Date)]
    public virtual DateTime Submitted { get; set; }
    [DataType(DataType.MultilineText)]
    [MaxLength(1000)]
    public string Comments { get; set; }

    [Required]
    public Contact Contact { get; set; }


 public class Contact
 {
    [Key]
    public string ContactName { get; set; }

看法：

<div class="editor-label">
        @Html.LabelFor(model => model.Contact)
    </div>
    <div class="editor-field">
        <input type ="text" name ="q" data-autocomplete=  
       "@Url.Action("QuickSearchContact", "Inspection")"/> 
        @Html.ValidationMessageFor(model => model.Contact.ContactName)
    </div>

JS

$(document).ready(function () {

  $(":input[data-autocomplete]").each(function () {

  $(this).autocomplete({ source: $(this).attr("data-autocomplete")});
  });

自动完成功能似乎工作正常。它将根据我的需要从数据库中提取列数据。但是，在用户保存表单后，在自动完成文本框中输入的任何数据都会在数据库中显示为 NULL。在这里的帮助将不胜感激。

4

3 回答 3

1

为了使模型绑定起作用，通常输入名称必须与模型的属性名称匹配。令人惊讶的是，您已将输入命名为“q”

<input type ="text" name ="q" data-autocomplete="..."/>

只需根据您的型号重命名即可

<input type ="text" name="Contact.ContactName" data-autocomplete="..."/>
于 2012-10-19T20:16:34.363 回答
0

您没有上面的代码，但是，而不是使用

 <input type ="text" name ="q" data-autocomplete=          "@Url.Action("QuickSearchContact", "Inspection")"/>

使用：@EditorFor(x = x.NameOfTextBox)

然后将输入按钮包裹在 using 标记中

@using (Html.BeginForm("Create", "NameOfController", FormMethod.Post){

 //all your model stuff goes here

}

或使用和 actionlink 而不是：

@Html.ActionLink("Submit", "Create", "NameOfController", Model)
于 2012-10-19T20:17:56.253 回答
0

提供的信息没有说明，但很可能自动完成部分没有写在视图的表单元素中：

    @using (Html.BeginForm()) 
    {
        <p>
            ...
        </p>
     }

在 MVC 中，表单定义在括号 { .... } 中，如上。

于 2012-10-19T20:19:44.500 回答