ASP.NET MVC:在自动完成上保存多个值

时间:2013-06-04 17:33:02

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

我有一个mysql数据库,其中包含表“deliverrables”,“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;
}

我不知道如何在我的数据库中保存它 有人能帮助我吗?

2 个答案:

答案 0 :(得分:2)

如果我正确理解了您的问题,您已按照以下方式实施了代码处理:

  1. 有MVC操作方法,它返回包含不包含数据的输入占位符的视图
  2. 占位符本身可能是input type=text,ID = tags
  3. 在'dom ready'上你发出ajax请求从数据库中检索你的标签,json-serialized as array;当它到达时,你将它存储到tags变量(没有错误处理(!))
  4. 同时用jqueryui autocomplete装饰你的输入,它对用户输入做出反应并返回tags变量中的项目
  5. 由于输入已包含标记(以逗号分隔),因此过滤器是最后一个标记的第一个字母
  6. 因此,当用户输入一些逗号分隔的标签(可能其中一些可能是新的)并且现在想要将其保存到数据库时,您会遇到这种情况。对于每个输入,如果是已知标记,则必须将其存储到“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 =真/假)。棘手的部分可以设计视图模型   根据您的JSON对象 - this可以提供帮助。关于   集合this可能是有价值的信息。

         

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

答案 1 :(得分:1)

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