MVC 在下拉列表中选择值时使用 ajax 发布值

Question

我在一个表单中有几个下拉列表。每次用户在这些下拉列表之一中选择一个值时，我是否希望将该值保存到后端（数据库）。我不想重新加载页面，所以我想实现这一点的最佳方法是使用 ajax，这就是我需要帮助的。

当我在下拉列表中选择一个值时，如何让它自动将值发布到服务器端。我应该为每个下拉列表制作一个表格，以便我可以单独更新它们吗？如何让它以 ajax 调用的形式发布值，而不是重新加载页面？我在 ASP MVC 上使用 JQuery 和 JQuery mobile。

出于演示目的，让我展示一些代码，就像现在一样： 视图模型：

public class ColorViewModel
{
    public ColorViewModel()
    {
        Options = new List<string>(){ "red", "blue", "green" };
    }

    public string Value { get; set; }

    public List<string> Options { get; set; }
}

查看：

@model IEnumerable<ColorViewModel>

@using (Html.BeginForm())
{
    foreach(var item in Model)
    {
        Html.DropDownListFor(m => m.Value, Model.Options)
    }
    <input type="submit" value="Save">
}

我想从表单中删除提交按钮，并在用户选择一个值时完成表单的所有提交（我想这可以通过使用 javascript 来实现）

Answer 1

我最终没有发布表单，而是在每个选择输入发生变化时发布它们。我必须在发布的元素上使用“data-”属性附加我需要的所有值。例如，如果您想要一个 ID 附加到它：

@Html.DropDownListFor(m => m.Value, Model.Options, new { @data_Id = Model.Id, })

使用 jQuery，你可以这样做：

$(function() {
    $('.dropdown').change(function() {
        $.ajax(
            {
                type: "POST",
                url: "Controller/Action",
                data: {
                    Value: $(this).val(),
                    Id: $(this).attr('data-Id'),
                }
            });
    });
});

它现在将发布到指定的 url。如果您有一个与您在数据中发布的对象具有相同属性名称的对象，它将自动将正确的值填充到这些对象中。

另一个小笔记。如果您想采用另一种方法来发布整个表单（就像我首先所做的那样），您必须隐藏提交按钮，然后使用 javascript 触发其单击事件以使用 ajax。只要用javascript正常提交表单，表单就会正常提交，不使用ajax。

Answer 2

Javascript 是您最好的选择。像这样的：

@using (Html.BeginForm("", "", FormMethod.Post, new { id = "myForm" }))
{
    foreach(var item in Model)
    {
        Html.DropDownListFor(m => m.Value, Model.Options, new { id = "myList" })
    }
}

<script type="text/javascript">
    $(document).ready(function() {
        $("#myList").change(function() {
            $("#myForm").submit();
        });
    });
</script>

Answer 3

默认情况下，MVC 应该为这个字段渲染id="Value"（你可以在帮助方法的 HTML 参数中覆盖它）。

然后使用 jquery（如果您使用的是 MVC 项目模板，您应该已经在项目中拥有它）您可以发布您的表单：

$(function() {
    $('#Value').change(function() {
        this.form.submit();
    });
});