MVC部分视图验证

时间:2014-02-08 10:22:01

标签: asp.net asp.net-mvc asp.net-mvc-partialview

我试图了解MVC中的部分视图... 我想要完成的是拥有一个主视图,它可以呈现两个部分视图。 每个局部视图都包含一个不同的ViewModel(带有DataAnnotations)。当我提交其中一个部分视图的表单时,如果出现服务器端验证错误,我希望主视图再次显示该部分的验证消息。

任何以正确方式提示的提示都将深受赞赏。

1 个答案:

答案 0 :(得分:2)

您可以使用示例解决方案 -

让我们按照以下方式创建一个复杂的模型 -

public class Person
{
    public Contact contact { get; set; }
    public Vehicle vehicle { get; set; }
}

public class Contact
{
    [Required]
    public string Email { get; set; }
}

public class Vehicle
{
    [Required]
    public string Name { get; set; }
}

然后让我们按照以下方式创建一个带有索引操作的主控制器,此操作将创建一个简单的虚拟模型并将其绑定到索引视图 -

public class MainController : Controller
{
       public ActionResult Index()
       {
           Person p = new Person();
           p.contact = new Contact();
           p.vehicle = new Vehicle();
           return View(p);
       }
}

索引视图将是 -

@model MVC.Controllers.Person

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

@using (Html.BeginForm("Submit","Main",FormMethod.Post)) 
{
    @Html.EditorFor(x => x.contact, "~/Views/Main/EditorTemplates/Contact.cshtml")
    @Html.EditorFor(x => x.vehicle, "~/Views/Main/EditorTemplates/Vehicle.cshtml")    
    <input type="submit" value="click"/>
}

在上面的视图中,我使用了编辑器视图,而不是使用部分视图。原因是部分视图在模型绑定复杂模型时提供了非常丰富的经验。

所以我在Main View文件夹中创建了EditorTemplated文件夹,并在其中放置了以下文件。

Contact.cshtml -

@model MVC.Controllers.Contact

@Html.LabelFor(model => model.Email, new { @class = "control-label col-md-2" })
@Html.EditorFor(model => model.Email)
@Html.ValidationMessageFor(model => model.Email)

Vehicle.cshtml -

@model MVC.Controllers.Vehicle

@Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })
@Html.EditorFor(model => model.Name)
@Html.ValidationMessageFor(model => model.Name)

通过上面的设置,我们可以去运行应用程序并显示以下屏幕 -

enter image description here

这个表单将发布到提交主控制器的动作,所以这将是我的提交动作 -

    public ActionResult Submit(Person p)
    {
        if (!ModelState.IsValid)
            return View("Index", p);
        else
        {
            // do something
            return View();
        }
    }

当我们点击按钮而不输入任何值时,将触发验证,我们应该看到如下错误消息 -

enter image description here

在正常的有效情况下,您可以提交表单然后运行业务逻辑。