MVC 5 Ajax部分表单验证

时间:2015-07-17 09:26:25

标签: asp.net-mvc partial-views asp.net-mvc-ajax editortemplates

我在强类型视图中使用Ajax.BeginForm。在这个表单中,我有几个面板,它们包含模型属性,而这些属性又使用自己的模型和编辑器模板。我希望在结束时将整个模型与Ajax一起发布回服务器,但在此之前我会从一个面板转到另一个面板,并且需要在进入另一个模型之前对它们进行验证。

如何在单击“下一步”按钮时对每个面板和每个模型属性进行部分(服务器端)验证(在控制器操作中)?

我可以在点击每个下一个按钮时以某种方式调用控制器操作吗?如何传递我验证的特定选项卡的值?所有这一切都没有刷新页面。

模特:

public class OrderItem
{
    public int ItemId { get; set; }
    public ItemBasic BasicDetails { get; set; }
    public ItemSpecifics Specification { get; set; }
}

public class ItemBasic
{
    [Required]
    public string Type { get; set; }

    [Required]
    [StringLength(30)]
    public string SerialNumber { get; set; }
}

观点:

@model OrderItem

@Ajax.BeginForm(...)
{
    @Html.AntiForgeryToken()
    @Html.HiddenFor(x => x.ItemId)
    <div class="tab">
        @Html.EditorFor(x => x.ItemBasics)
        <input type="button" value="Next" />
    </div>
    <div class="tab">
        @Html.EditorFor(x => x.ItemSpecifics)
        <input type="button" value="Next" />
    </div>
    <input type="submit" value="Add to order" />
}

整个页面要复杂得多,我只是为了这个问题简化了它。

以前我为每个属性(而不是编辑器模板)使用了PartialViews,但是使用PartialView时,父模型在最后发布表单时无法看到属性模型。

此外,我需要根据字段中的用户输入/选择将更多数据加载到某些面板中,并且需要从服务器加载,因此本质上我需要在某些字段上调用操作并使用该操作填充其他字段结果

EG。在特定于项目的面板中,用户将一些项目添加到其模型列表属性中,它们显示为面板中的行列表,然后通过调用控制器操作可以编辑或删除每个项目。

使用PartialView我刚刚执行了一项操作,添加了用户输入,将新的ItemSpecific项添加到列表中,并将整个ItemSpecifics模型作为PartialViewResult返回到给定的面板仅显示面板中添加的ItemSpecific项目列表。

public class ItemSpecifics
{
    public string Name { get; set; }
    public string Description { get; set;}
    public string Ref { get; set;}
    public IEnumerable<ItemSpecifics> Items { get; set;}
}

2 个答案:

答案 0 :(得分:0)

最简单的方法是使用java脚本执行验证客户端,因为验证服务器上分离的每个面板很复杂。但是您可以在验证服务器端进行控制,并且如果值没有通过验证,则可以返回包含匹配错误消息的json结果。

我希望这个答案能以某种方式对你有所帮助

对于服务器端验证尝试这样的事情:

if(validation one == false)
{
    errorList.Add("validation one error");
}
if(validation two == false)
{
    errorList.Add("validation two error");
}
if(validation three == false)
{
    errorList.Add("validation three error");
}
if(errorList.Any)
{
    return JsonReturn(false, "you failed");
}
return JsonReturn(true, "success!");

答案 1 :(得分:0)

您可以做的最简单的事情是使用javascript进行客户端验证,然后使用后端的POST操作,您可以使用自定义逻辑来验证提交的模型。

另一种方法是使用部分视图返回原始方法,但不是为表单使用Razor助手,而是为您需要的输入字段执行常规jquery帖子($ ajax({...})