ASP.NET MVC: 自动完成中如何保存多个值

Question

我有一个包括“deliverables”、“tags”和“deliverables_has_tags”表的mysql数据库。我想将标签链接到交付内容。

以下是在我的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>

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

但现在我想将其保存在我的存储库中。 在我的控制器的操作方法中：

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

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

- nielsv

---

有一种方法可以将serializeArray()的集合进行模型绑定，请参见https://dev59.com/22855IYBdhLWcg3wViu3#4402080。 - OzrenTkalcecKrznaric

Answer 1

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

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

因此，您面临的情况是，用户已经输入了几个逗号分隔的标记（可能其中一些是新的），现在想要将其保存到数据库。 对于每个输入，如果那是一个已知的标记，则必须将其存储到“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对象可能是棘手的部分 - 这个 可能会有所帮助。关于集合方面的信息，这个 可能会很有价值。

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

- OzrenTkalcecKrznaric

Answer 2

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

- Jeroen K