C# MVC对话框验证

您好，我正在尝试验证一个下拉列表，如果以这种方式选择：

$('#dialog').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            title: 'Add building',
            modal: true,
            open: function(event, ui) {

                $(this).load("@Url.Action("AddView",new {@ViewBag.from})");
            },
            buttons: {
                "Add": function () {
                    $("#LogOnForm").submit();
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });

看法

代码

---

问题是，当用户没有选择任何东西，验证工作，然后对话框消失，安装它只是一个带有验证消息的纯html页面，我怎么能阻止它并保持弹出

如果要保持模态对话框打开，则需要使用AJAX。您需要将$LogOnForm.submit转换为提交，并使用其回调将对话框的表单替换为部分视图结果，而不是$LogOnForm.submit

下面是一个行动大纲：

首先，您需要修改对话框以接受部分

<div id="dialog">
    <div id="content">
       <!-- partial view inserted here -->
    </div>
</div>

AJAX帖子，这样您就不会离开此页面

"Add": function() {
    $.ajax({
        url: "/HolidayEvents/AddBuilding",
        type: "POST",
        data: $("#LogOnForm").serialize()
    })
    .done(function(partialResult) {
        // validation error OR success
        $("#content").html(partialResult);
    });
}

您可能还需要防止表单提交的默认行为，因为您通过AJAX处理提交

$("#LogOnForm").on("submit", function(e) {
    e.preventDefault();
});

您的操作将返回回调中partialResult的部分视图

[HttpPost]
public ActionResult AddBuilding(AddBuildingViewModel buildingModel)
{
    if (!ModelState.IsValid)
    {
        ...
        return PartialView("AddView", modelError);
    }

    ...
    return PartialView("SuccessView", model);
}

因为我们使用了AJAX，所以不会出现到索引的浏览器导航，所以用成功视图替换对话框内容。“成功”视图需要一个“验证”按钮，以便用户可以关闭对话框或导航到新页面

open: function(event, ui) {
    $("#content").load("@Url.Action("AddView",new {@ViewBag.from})");
}

"Add": function() {
    $.ajax({
        url: "/HolidayEvents/AddBuilding",
        type: "POST",
        data: $("#LogOnForm").serialize()
    })
    .done(function(partialResult) {
        // validation error OR success
        $("#content").html(partialResult);
    });
}

$("#LogOnForm").on("submit", function(e) {
    e.preventDefault();
});

[HttpPost]
public ActionResult AddBuilding(AddBuildingViewModel buildingModel)
{
    if (!ModelState.IsValid)
    {
        ...
        return PartialView("AddView", modelError);
    }

    ...
    return PartialView("SuccessView", model);
}