将自动完成和 TagEditor Jquery 添加到 MVC

Question

我希望将 AutoComplete 和 TagEditor 功能结合在一起，从数据库中提取要使用的数据。这将继续以字符串的形式填充一个新条目，但现在我只专注于让这些功能正常工作。

到目前为止，我已经尝试了几种不同的方法，从原始示例到此处的链接，如 jquery-ui-autocomplete-asp-net-mvc5-rendering-as-a-list，但我不会绕圈子。

我有 2 个主要问题，我不确定它们是否相关。

首先，TagEditor 功能在我的网站上作为一个独立字段运行。我设置了一个部分视图作为测试，其中包含 2 个字段。顶部是按预期正确格式化为标记 TextArea，但底部是我试图将其链接到字符串字段的 HTML 帮助器的位置，它不拾取 JQuery 元素。

_SkillSearch.cshtml

@model NR.Models.Critvit

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<hr />
<div class="form-horizontal">
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-horizontal">
        <div class="form-group">
            @Html.LabelFor(model => model.KeySkills, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <textarea class="skills"></textarea>
                @Html.ValidationMessageFor(model => model.KeySkills, "", new { @class = "text-danger" })
            </div>
        </div>
        <br />
        <hr />

        <div class="form-group">
            @Html.LabelFor(model => model.KeySkills, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextAreaFor(model => model.KeySkills, new { htmlAttributes = new { id = "skills", @class = "skills form-control" } })
                @Html.ValidationMessageFor(model => model.KeySkills, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>
</div>

}

其次，查询不想使用函数中设置的任何 Source 值。这是最新版本，我试图从数据库中获取技能列表并将它们用作源数组。当我运行页面并使用这些字段时，我也没有看到任何 JSON 活动。这是我尝试过的几种不同的方法。

_Layout.cshtml 中的脚本 - 版本 1

<script>
$(document).ready(function () {
    $('#skillslist').tagEditor({
        autocomplete: {
            delay: 0, position: { collision: 'flip' },
            source: function(request, response) {
                $.ajax({
                    type: "POST",
                    url: "/skills/search",
                    dataType: "json",
                    data: {
                        term: request.term
                    },
                    error: function(xhr, textStatus, errorThrown) {
                        alert('Error: ' + xhr.responseText);
                    },
                    success: function(data) {
                        response($.map(data, function(c) {
                            return {
                                label: s.SkillName,
                                value: s.SkillId
                            }
                        }));
                    }
                });
            },
                forceLowercase: false,
                placeholder: 'Skills Titles (placeholder) ...'
            }
        });
});

_Layout.cshtml 中的脚本 - 第 2 版

<script type="text/javascript">
$(document).ready(function () {
    $('.skills').tagEditor({
        autocomplete: {
            delay: 0, position: { collision: 'flip' },
            source: '@Url.Action("GetSkillList")'},
                forceLowercase: false,
                placeholder: 'Skills Titles (placeholder) ...'
        });
});
</script>

家庭控制器

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using NR.DAL;
using NR.Models;

namespace NR.Controllers
{
public class HomeController : Controller
{
    private NRContext db = new NRContext();

    public ActionResult Index()
    {
        return View();
    }

    [Cut for space]

    public ActionResult GetSkillList(string term)
    {
        var result = from s in db.Skills
                     where s.SkillName.ToLower().Contains(term)
                     select s.SkillName;
        return Json(result.ToList(), JsonRequestBehavior.AllowGet);
    }
}

}

Answer 1

结束并回答：

@stephenmuecke 让我走上了正确的道路，以确保 Json 包含 ToList 并且捆绑包是正确的。