具有多个部分的剃刀视图页面设置

时间:2013-02-11 02:25:02

标签: razor view asp.net-mvc-4

我查看了各种教程,但是我对如何执行我想要的内容并想要一些帮助来澄清我的想法感到非常困惑。

我将有一个名为Profile的剃刀视图页面;在该个人资料页面上,我有四个不同的部分:

  1. 密码更改
  2. 设置密码
  3. 用户名
  4. 传记。
  5. 我在考虑将这四个部分中的每一部分创建为部分部分,每个部分都有文本框和一个允许用户添加或更改信息的保存按钮。

    @model Projects.Models.PasswordModel
    @{
        ViewBag.Title = "Profile Account";
    }
    
    <hgroup class="title">
        <h1>@ViewBag.Title.</h1>
    </hgroup>
    
    <p class="message-success">@ViewBag.StatusMessage</p>
    
    
    <div id="wrap">
        <div id="right">
            @if (ViewBag.HasLocalPassword)
            {
                @Html.Partial("_ChangePasswordPartial")
            }
            else
            { 
                @Html.Partial("_SetPasswordPartial")
            }
        </div>
    
        <div id="left">
            @Html.Partial("_UserNamePartial")
            @Html.Partial("_BiographyPartial")
        </div>
    </div>
    

    如何正确设置主视图页面并正确显示和运行四个部分?我让他们显示,但当我尝试保存我对用户名所做的更改时,我会得到一个不同模型的错误 - 比如传记模型。我觉得他们不应该联系。我真的在寻找一个关于如何解决这个问题的明确教程,希望在我弄清楚之后能够制作一个。

    这是我的用户名部分

    @model Project.Models.UsernameModel
    
    @using (Html.BeginForm("_UsernamePartial", "Account")) {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary()
    
           <p>Username</p>
           @Html.TextBoxFor(m=>m.Username)
    
        <button class="btn btn-small" type="submit" value="Save Username">Save</button>
    }
    

    我的控制器

    GET:

    public ActionResult _UsernamePartial()
            {
                var usernameModel = new UsernameModel();
                using (var db = new DataContext())
                {
                    usernameModel.Nickname = (from u in db.Users
                                                  where u.ID == WebSecurity.CurrentUserId
                                                  select u.Username).FirstOrDefault();
                }
                return View(usernameModel);
            }
    

    POST:

    [HttpPost]
            public ActionResult _UsernamePartial(UsernameModel usernameModel, string returnUrl)
            {
                if (ModelState.IsValid)
                {
                    using (var db = new DataContext())
                    {
                         User user = db.Users.FirstOrDefault(m => m.ID == WebSecurity.CurrentUserId);
                         user.Username = usernameModel.Username;
                         db.SaveChanges();
                     }
                    return RedirectToAction("_UsernamePartial");
                }
                return View(returnUrl);
            }
    

    非常感谢您的帮助。

1 个答案:

答案 0 :(得分:1)

您需要确保将视图输入到正确的模型中。您的视图目前已输入PasswordModel模型,该模型似乎是您网页的一部分。如果您为每个部分创建一个由模型组成的模型,它将使这更容易:

class ProfileModel {
    PasswordModel Password { get; set; }
    BiographyModel Biography { get; set; }
    ...
}

然后,您可以将您的个人资料视图设置为ProfileModel。然后你可以将每个模型传递给partials:

@Html.Partial("_BiographyPartial",Model.Biography)

示例_BiographyPartial看起来像:

@model Projects.Models.BiographyModel
...
<h1>@Model.SomeBiographyProperty</h2>

您应该小心检查您的验证,假设您有一些,正在使用此设置正常工作。

或者,您可以将所有数据放入一个平面模型中,并将整个模型传递给每个局部视图。

编辑:部分视图不受控制器和操作的支持,它们只是使用从调用视图传递给它们的数据呈现的视图。您现在要做的是呈现_UsernamePartial操作。如果您想这样做,可以尝试使用Action代替Partial

<div id="left">
    @Html.Action("_UserNamePartial")
    ...
</div>

将该动作渲染为部分视图:

public ActionResult _UsernamePartial()
{
    var usernameModel = new UsernameModel();
    using (var db = new DataContext())
    {
        usernameModel.Nickname = (from u in db.Users
                                  where u.ID == WebSecurity.CurrentUserId
                                  select u.Username).FirstOrDefault();
    }
    return PartialView(usernameModel);
}