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

Question

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

到目前为止，我已经尝试了几种不同的方法，从原始示例到 link 这里的 jquery-ui-autocomplete-asp-net-mvc5-rendering-as-a-list，但我不会原地踏步。

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

首先，TagEditor 功能作为一个独立的字段在我的网站上运行。我将部分视图设置为具有 2 个字段的测试。最上面的一个按预期正确格式化为 Tag TextArea，但最下面的一个是我试图将其 link 转换为字符串字段的 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>

}

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

_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 并且包是正确的。

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

Adding Autocomplete and TagEditor Jquery to MVC

html

jquery

asp.net-mvc-5

jquery-tageditor