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

I'm looking to combine the AutoComplete and TagEditor features together, drawing the data to be used from a database. This is going to go on to populate a new entry as an string, but for now I'm just focusing on getting the features working.

我希望将AutoComplete和TagEditor功能结合在一起,绘制要从数据库中使用的数据。这将继续将一个新条目填充为字符串,但是现在我只专注于使这些功能正常工作。

So far, I've tried a couple of different approaches, from both the original examples to links here like jquery-ui-autocomplete-asp-net-mvc5-rendering-as-a-list, but I'm not going around in circles.

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

I have 2 main issues, and I'm not sure if they are linked or not.

我有两个主要问题,我不确定它们是否有联系。

Firstly, The TagEditor feature is working on my site as a standalone field. I set up a partial view as a test with 2 fields in place. The top one is formatting correctly as a Tag TextArea as expected, but the bottom one is where I am trying to link this into a HTML helper for a string field, it doesn't pick up the JQuery element.

首先,TagEditor功能在我的网站上作为独立字段工作。我将部分视图设置为具有2个字段的测试。最上面的一个正确格式化为Tag 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>

}

Secondly, the query doesn't want to use any of the Source values set in the function. This is the most recent version, where I'm trying to get the list of skills from the db and use them as the Source array's. I'm not seeing any JSON activity when I run the page and use the fields either. This is a couple of different ways I've tried.

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

Script in _Layout.cshtml - Version 1

_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) ...'
            }
        });
});

Script in _Layout.cshtml - Version 2

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

Home Controller

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

}

1 个解决方案

#1

To close out and answer:

结束并回答:

@stephenmuecke got me on the right track to ensure the Json include ToList and the bundle was correct.

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