显示弹出消息或视图，具体取决于模型验证

Question

想象一个在结帐时有几个步骤（视图）的网上商店。 当客户按下“下一步”按钮时，将调用相应的“操作”方法。 在这种方法中，需要进行一些验证，检查客户是否可以自由进行，或订单是否有问题。 根据验证结果，我希望发生以下两种情况之一：

A）生成并显示下一个视图。

B）客户停留在当前页面，但是弹出一个模态对话框，其中包含一条错误消息。

我已经尝试了几种在网络上发现的方法，但是到目前为止没有任何效果。 我尝试的最后一件事是使用AJAX，但实际上我不知道这是否是正确的方法。

public ActionResult SomeAction()
{
    if (ModelState.IsValid)
    { 
        return View();
    }
    // If not valid
    return errorMessage          
}


$(document).ready(function () {
    $("#btn").click(function () {
        $.ajax({
            url: "/Home/SomeAction",
            async: true,
            success: function (result) {
                if (!result.success) {
                    alert(result.error);
                }
                // Else display view
            }
        });

Answer 1

您要在模式弹出窗口中显示局部视图吗？ 如果是这样，您可以像已经使用的那样使用JQuery AJAX方法，但是将其与JQuery弹出/灯箱插件结合使用以显示结果HTML。

因此，在您的代码中，“ / Home / SomeAction”是弹出窗口的PartialView，从Controller返回一个“ PartialView”，并且当您在JQuery“ success：”事件中收到HTML时，可以使用（例如）“ Jquery Colorbox”来显示它（请参阅此处： http : //www.jacklmoore.com/colorbox/ ）

Answer 2

很难说您想如何实现这样的工作流程，但是我想到的一件事是使用ie返回值。 TempData存储中的错误，并进行正确的重定向到下一步，或者如果验证失败到同一步骤。

对于这样的简单模型：

public class Cart
{
    [Required]
    public string Item { get; set; }

    [Required]
    public string Quantity { get; set; }
}

控制器的一些代码示例如下所示：

public class CartController : Controller
{
    //
    // GET: /Cart/
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Index(Cart model)
    {
        if (ModelState.IsValid)
            return RedirectToAction("Step1");

        TempData["Error"] = "Validation failed";
        return View();
    }

    public ActionResult Step1()
    {
        // add more logic, steps etc
        return View();
    }
}

在视图方面：

@using (Html.BeginForm())
{
     <fieldset>
       <p>
            <label for="Id">Item:</label>
            @Html.TextBox("Item") 
            @Html.ValidationMessage("Item", "*")
            @Html.Editor("Quantity")
       </p> 
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

@if (TempData["Error"] != null)
{
    <p>Please fix all errors!</p>
}

我可能会将其嵌入到视图母版页中。 仅用于那些步骤。

编辑：更改了一些代码，添加了更多实际示例：-)顺便说一句。 请记住，使用这种机制可以从MVC框架免费获得验证，因此在需要时可以突出显示字段。 如果需要，您也可以稍后将此模型传递给其他步骤。 总的来说，这里有一个不错的验证入门指南： http : //www.asp.net/mvc/overview/older-versions/getting-started-with-aspnet-mvc4/adding-validation-to-the-model

如果您想采用AJAX方式，则可以使用以下方法：

$.post("@Url.Action("Index")", values, function(data) {
    // add logic for loading next page or error
});

值对象在哪里，您将必须使用适当的结构来构造自己。

祝好运！

Answer 3

无需ajax来检查表单，为什么不只是几行JavaScript？ 像“单击时，如果'电子邮件'输入字段为空，则发出警报”等。那里有很多表单验证插件，例如jQuery内联表单验证 ，只需将其谷歌搜索即可。

参见： http : //www.w3schools.com/js/js_validation.asp