ASP.NET MVC：在自动完成时保存多个值答案

【问题标题】：ASP.NET MVC: Save multiple values on autocompleteASP.NET MVC：在自动完成时保存多个值
【发布时间】：2013-05-31 05:08:50
【问题描述】：

我有一个 mysql 数据库，其中包含“deliverables”、“tags”和“deliverables_has_tags”表。我想将标签链接到可交付成果。

这就是我在我的 javascript 文件中所做的：

<script type="text/javascript" language="javascript">
    $(function () {
        var object = {};
        $.ajax({
            type: "GET",
            url: "/Deliverable/Tags",
            dataType: "json",
            success: function (data) {
                object.tags = data;
            }
        });

        function split(val) {
            return val.split(/,\s*/);
        }
        function extractLast(term) {
            return split(term).pop();
        }
        $("#tags")
        // don't navigate away from the field on tab when selecting an item
            .bind("keydown", function (event) {
                if (event.keyCode === $.ui.keyCode.TAB &&
                $(this).data("ui-autocomplete").menu.active) {
                    event.preventDefault();
                }
            })

.autocomplete({
    minLength: 0,
    source: function (request, response) {
        // delegate back to autocomplete, but extract the last term
        response($.ui.autocomplete.filter(
object.tags, extractLast(request.term)));
    },
    focus: function () {
        // prevent value inserted on focus
        return false;
    },
    select: function (event, ui) {
        var terms = split(this.value);
        // remove the current input
        terms.pop();
        // add the selected item
        terms.push(ui.item.value);
        // add placeholder to get the comma-and-space at the end
        terms.push("");
        this.value = terms.join(", ");

        return false;
    }
});
    });
</script>

我可以在我的文本框中添加多个标签。

但现在我想将它保存在我的存储库中。在控制器中的我的 Action 方法中：

repository.AddDeliverable(model.Title, model.Description, model.UsernameID, data, datatwo, model.VideoUrl, model.AfstudeerrichtingID, model.ProjectID);

标签操作：

public JsonResult Tags()
{
    var data = (repository.GetTags()).ToArray();

    return Json(data, JsonRequestBehavior.AllowGet);
}

在我的存储库中：

public IQueryable<string> GetTags()
{
    return from tag in entities.tags
           orderby tag.tag_name
           select tag.tag_name;
}

我不知道如何将其保存在我的数据库中。
有人可以帮帮我吗？

【问题讨论】：

有一种方法可以模型绑定serializeArray()'d 集合，请参阅http://stackoverflow.com/questions/4402036/jquery-ajax-posting-array-to-asp-net-mvc-controller/4402080#4402080

标签： asp.net mysql asp.net-mvc many-to-many

【解决方案1】：

在 post 操作中，包含 FormCollection 集合作为参数并从中收集您的标签。没有自动的方法。您可以实现一些自定义模型绑定，但这可能不值得。

【讨论】：

【解决方案2】：

如果我正确理解了您的问题，您已按如下方式实现了您的标签处理：

有一种 MVC 操作方法可以返回视图，其中输入占位符不包含数据
占位符本身可能是input type=text，id=tags
在“dom 就绪”时，您触发 ajax 请求以从数据库中检索您的标签，json 序列化为数组；当它到达时，您将其存储到 tags 变量（无错误处理（！））
同时，您使用 jqueryui 自动完成来装饰您的输入，该自动完成对用户输入做出反应并从 tags 变量返回项目
由于输入已经包含标签（逗号分隔），您的过滤器是最后一个标签的首字母

因此，当用户输入了几个逗号分隔的标签（可能其中一些可能是新的）并且现在想要将其保存到数据库时，您会遇到这种情况。对于每个输入，如果这是一个已知标签，则必须将其存储到“deliverables_has_tags”。如果有新标签，则必须将其同时存储到“tags”和“deliverables_has_tags”中。

最常见的情况是使用“保存”按钮开始保存过程。让我们来分析一下你在这个过程中需要做什么。

1) 按钮点击

单击按钮时，您使用 js 转换逗号分隔的标签字符串对数组使用split(term) 之类的逻辑，并将其序列化。你可以使用serializeArray 进行序列化并手动创建 JSON 对象，或使用序列化整个表单 $('#yourForm').serialize()。我会选择第一个选项因为这样我可以更好地控制 JSON 格式并避免 MVC 默认模型绑定器的问题。

2) Ajax 调用

当 JSON 对象准备好发送时，您会触发 ajax POST 请求您的 MVC POST 操作方法。当你总是保存状态时避免 GET，因为新版本的浏览器可以扫描您的页面并使用 GET 请求主动预加载 url。你不想在这里。的当然，在 ajax 调用中使用您的数据作为数据参数。

3) 动作方法

当请求到达时，你必须在你的控制器中处理它使用新的操作方法。通常在这种情况下，您将拥有 public JsonResult SaveTags(SaveTagsModel saveTags) { ... } 之类的东西使用您的存储库保存标签并返回结果说“OK”或“ERROR”之类的东西（比如 response.isSaved=true/false）。棘手的部分可能是设计视图模型根据您的 JSON 对象 - this 可能会有所帮助。而关于收藏this 可能是有价值的信息。

保存时，使用事务确保一次保存所有内容。首先检查数据库中是否存在每个标签并插入那些不存在。之后，检查每个标签是否有合适的 deliverables_has_tags 中的 n-n 关系，如果没有则插入。我相信您应该对两者使用相同的存储库封装操作。

【讨论】：