【问题标题】:Asp.net MVC Razor more than one form on a pageAsp.net MVC Razor 页面上有多个表单
【发布时间】:2010-11-21 12:42:35
【问题描述】:

我的网站上有一个注册页面 - 页面顶部是现有用户的登录表单。在主要区域有注册表。

登录是带有@model ViewModels.LoginViewModel 的部分视图 注册也是部分用@model ViewModels.RegViewModel

包含这些部分的主页是带有@model ViewModels.RegPageViewModel的视图

这个视图模型看起来像:

public class RegViewModel
{
    public RegisterVm RegisterVm { get; set; }
    public LoginVm LoginVm { get; set; }
}

当我将页面的注册部分(它的操作是注册/捕获 - 接收操作需要一个 RegisterVm)提交给它的控制器时,它抱怨传递了错误的视图模型

子视图及其视图模型是怎么回事?是否有处理此问题的标准方法?

我是否应该为此页面设置一个提交 URL,以确定它是登录请求还是注册请求,然后相应地处理帖子?不过这对我来说似乎很乱......

http://monobin.com/__d33cf45a4 - RegisterVm.cs(LoginVm.cs 和这个差不多)

http://monobin.com/__m69132f76 - RegPageVm.cs

Register.cshtml:

@model xxxx.ViewModels.RegPageVm
@{
    View.Title = "Register";
    Layout = "~/Views/Shared/_BareBones.cshtml";
}
<link rel="stylesheet" href="@Url.Content("~/Public/Css/signup.css")" type="text/css" />
<div id="sign-up-container">
    <div id="sign-up-box">
        <div id="sign-up-box-left">
            <img src="@Url.Content("~/Public/Images/Signup_176x81.png")" />
        </div>
        <div id="sign-up-box-right">
           @Html.Partial("_Register")
        </div>
    </div>
</div>
<div class="clear">
</div>

_Register.cshtml:

@model xxxx.ViewModels.RegisterVm

@using (Html.BeginForm("Capture", "Register", FormMethod.Post))
{
    <table class="sign-up-box-inner">
        <tr>
            <td class="label-area">
                @Html.LabelFor(x => x.Email)
            </td>
            <td class="field-area">
                @Html.TextBoxFor(x => x.Email, new { @class = "login-input", title = "Enter Name" })
            </td>
        </tr>
        <tr>
            <td class="label-area">
                @Html.LabelFor(x => x.Password)
            </td>
            <td class="field-area">
                @Html.PasswordFor(x => x.Password, new { @class = "login-input", title = "Enter Name" })
            </td>
        </tr>
        <tr>
            <td class="label-area">
                @Html.LabelFor(x => x.UserName)
            </td>
            <td class="field-area">
                @Html.TextBoxFor(x => x.UserName, new { @class = "login-input", title = "Enter Name" })
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="image" src="../../Public/Images/Submit_150x47.png" class="submit-button" />
            </td>
        </tr>
    </table>
    @Html.AntiForgeryToken()
}

最后是 RegisterController.cs:

public class RegisterController : Controller
    {
        public ActionResult Index()
        {
           return View();
        }

        [HttpPost, ValidateAntiForgeryToken]
        public ActionResult Capture(RegisterVm registerVm)
        {
            if (!ModelState.IsValid)
            {
                return View("index", new RegPageVm()
                {
                    LoginVm = new LoginVm(),
                    RegisterVm = registerVm
                });
            }

            return RedirectToAction("index", "Event");
        }
    }

w://

【问题讨论】:

  • 我们可以从视图中看到一些代码吗?
  • 不应该是@Html.Partial("_Register", Model.RegisterVm) 吗?

标签: asp.net-mvc viewmodel razor


【解决方案1】:

您需要确保表单元素(如文本框等)应具有与 RegisterVM 和 LoginVM 属性相同的 id。您的理论是正确的,但我认为您可能在 MVC 的命名约定中犯了一个错误。

如果您可以分享您的视图代码 + VM 类,那么我们将能够提供更好的帮助。

编辑:

查看您的代码,我认为您应该将视图模型传递给您的局部视图。比如下面这行相信应该是这样的 >

@Html.Partial("_Register", Model.RegisterVm)

【讨论】:

  • 我正在使用 Html.TextBoxFor(x=>x.PropertyName) 所以应该解决这个问题吗?
  • 应该可以。我们可以再次看到您的代码吗?视图,部分视图之一及其对应的视图模型。将模型传递给局部视图可能会出现一些问题。
【解决方案2】:

根据你对 nEEbz 的回答:

您正在使用:

Html.TextBoxFor(x=>x.LoginVM.Email) // i guess

这会变成&lt;input name="LoginVM.Email" ...&gt;

注意LoginVM. 部分

您的登录操作可能如下所示:

public ActionResult Login(LoginVM model) { }

所以它需要像 EmailPassword 这样的字段名称,而不是 LoginVM.EmailLoginVM.Password

因此您可以改用Html.Textbox(这样字段名称就不会自动创建)。

【讨论】:

  • 子视图相应地具有@model ViewModels.LoginViewModel 和@model ViewModels.RegViewModel,因此它们不使用该符号 - 我假设 mvc 知道匹配 viewmodel 层次结构 - 或者我是错误的?我是否需要通过指定要以某种方式使用的视图模型部分来调用 RenderPartial?
  • 您检查过创建的 HTML 吗? (查看源代码)
猜你喜欢
  • 2020-08-22
  • 2010-09-10
  • 2014-06-03
  • 2021-02-23
  • 1970-01-01
  • 1970-01-01
  • 2022-01-14
  • 2018-03-18
  • 1970-01-01
相关资源
最近更新 更多