MVC3 - 使用部分视图的多个表单

时间:2012-12-06 15:17:05

标签: asp.net-mvc-3 forms asp.net-mvc-4 partial-views renderaction

所以,我正在创建一个管理页面,我想在其上放置多个表单。所以,我尝试使用Partial View和RenderAction来完成它。

我的管理员索引视图:

@model Rad.ViewModels.AdminViewModel
@{
ViewBag.Title = "Admin";
}

<h2>Admin</h2>

<div>
@{ Html.RenderAction("AddProduct"); }
</div>

我的部分观点:

@model Rad.ViewModels.AdminAddProductViewModel

@using (Html.BeginForm("AddProduct", "Admin"))
{
<h1>@Html.LabelFor(model => model.Name)</h1>
@Html.TextBoxFor(model => model.Name)
@Html.ValidationMessageFor(model => model.Name)
<input type="submit" value="Add"/>
}

我的管理员控制器:

public class AdminController : Controller
{
    //
    // GET: /Admin/
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult AddProduct()
    {
        return PartialView();
    }

    [HttpPost]
    public ActionResult AddProduct(AdminAddProductViewModel data)
    {
        if (ModelState.IsValid)
        {

        }
        return View("Index");
    }
}

问题在于AddProduct的HttpPost版本。如果我将它保持为返回视图(“索引”),它将进入无限循环。但是,如果我返回PartialView(数据),它会正确显示错误,但没有围绕它的索引视图。因此,它只显示部分视图。有没有办法在一个页面上有多个表单并将服务器端验证返回到页面?

2 个答案:

答案 0 :(得分:5)

好的,我能够解决这个问题:

管理主要索引页:

@model Rad.ViewModels.AdminViewModel
@{
ViewBag.Title = "Admin";
}

<h2>Admin</h2>

<div>
@Html.Partial("AddProduct", Model.AddProduct)
</div>

添加产品部分视图:

@model Rad.ViewModels.AdminAddProductViewModel

@using (Html.BeginForm("AddProduct", "Admin"))
{
<h1>@Html.LabelFor(model => model.Name)</h1>
@Html.TextBoxFor(model => model.Name)
@Html.ValidationMessageFor(model => model.Name)
<input type="submit" value="Add"/>
}

简单的AdminAddProductViewModel:

public class AdminAddProductViewModel
{
    [DisplayName("Add Product:")]
    [Required]
    [StringLength(50)]
    [RegularExpression(@"^[a-zA-Z0-9\s]+$")]
    public string Name { get; set; }
}

包含AdminViewModel:

public class AdminViewModel
{
    public AdminAddProductViewModel AddProduct { get; set; }

    public AdminViewModel()
    {
        AddProduct = new AdminAddProductViewModel();
    }
}

管理员控制器:

public ActionResult Index()
    {
        AdminViewModel data = new AdminViewModel();
        return View(data);
    }

    [HttpGet]
    public ActionResult Index(AdminViewModel data)
    {
        return View(data);
    }

    [HttpPost]
    public ActionResult AddProduct(AdminAddProductViewModel data)
    {
        AdminViewModel admin = new AdminViewModel();
        admin.AddProduct = data;
        if (ModelState.IsValid)
        {

        }
        return View("Index", admin);
    }

现在,我知道我在谈论多个表单,并且只在这里显示一个表单,但是如果你想为此添加另一个表单,只需创建另一个局部视图,另一个子视图模型,并将该子视图模型添加到AdminViewModel。

答案 1 :(得分:0)

你试过ajax.beginform()吗? 在局部视图周围命名div,并将UpdateTargetId设置为该名称。

然后查询将替换旧的div。

不要忘记引用ajax的java脚本库!