视图中的多个模型

Question

我想在一个视图中有 2 个模型。该页面同时包含LoginViewModel 和RegisterViewModel。

例如

public class LoginViewModel
{
    public string Email { get; set; }
    public string Password { get; set; }
}

public class RegisterViewModel
{
    public string Name { get; set; }
    public string Email { get; set; }
    public string Password { get; set; }
}

我是否需要制作另一个包含这 2 个 ViewModel 的 ViewModel？

public BigViewModel
{
    public LoginViewModel LoginViewModel{get; set;}
    public RegisterViewModel RegisterViewModel {get; set;}
}

我需要将验证属性提交给视图。这就是我需要 ViewModel 的原因。

有没有其他方式比如（没有BigViewModel）：

 @model ViewModel.RegisterViewModel
 @using (Html.BeginForm("Login", "Auth", FormMethod.Post))
 {
        @Html.TextBoxFor(model => model.Name)
        @Html.TextBoxFor(model => model.Email)
        @Html.PasswordFor(model => model.Password)
 }

 @model ViewModel.LoginViewModel
 @using (Html.BeginForm("Login", "Auth", FormMethod.Post))
 {
        @Html.TextBoxFor(model => model.Email)
        @Html.PasswordFor(model => model.Password)
 }

Answer 1

有很多方法...

1. 与您的 BigViewModel 你这样做：

   @model BigViewModel    
   @using(Html.BeginForm()) {
       @Html.EditorFor(o => o.LoginViewModel.Email)
       ...
   }
   

2. 您可以创建 2 个额外的视图

   登录.cshtml

   @model ViewModel.LoginViewModel
   @using (Html.BeginForm("Login", "Auth", FormMethod.Post))
   {
       @Html.TextBoxFor(model => model.Email)
       @Html.PasswordFor(model => model.Password)
   }
   

   和 register.cshtml 一样

   创建后，您必须在主视图中呈现它们并将它们传递给 viewmodel/viewdata

   所以它可能是这样的：

   @{Html.RenderPartial("login", ViewBag.Login);}
   @{Html.RenderPartial("register", ViewBag.Register);}
   

   或

   @{Html.RenderPartial("login", Model.LoginViewModel)}
   @{Html.RenderPartial("register", Model.RegisterViewModel)}
   

3. 在您的网站中使用 ajax 部分变得更加独立

4. iframes，但可能不是这样的

Answer 2

我建议使用 Html.RenderAction 和 PartialViewResults 来完成此操作；它将允许您显示相同的数据，但每个部分视图仍然有一个视图模型，并且不需要 BigViewModel

所以您的视图包含如下内容：

@Html.RenderAction("Login")
@Html.RenderAction("Register")

其中Login 和Register 都是控制器中的操作，定义如下：

public PartialViewResult Login( )
{
    return PartialView( "Login", new LoginViewModel() );
}

public PartialViewResult Register( )
{
    return PartialView( "Register", new RegisterViewModel() );
}

Login 和 Register 将成为驻留在当前视图文件夹或共享文件夹中的用户控件，并希望如下所示：

/Views/Shared/Login.cshtml：（或/Views/MyView/Login.cshtml）

@model LoginViewModel
@using (Html.BeginForm("Login", "Auth", FormMethod.Post))
{
    @Html.TextBoxFor(model => model.Email)
    @Html.PasswordFor(model => model.Password)
}

/Views/Shared/Register.cshtml：（或/Views/MyView/Register.cshtml）

@model ViewModel.RegisterViewModel
@using (Html.BeginForm("Login", "Auth", FormMethod.Post))
{
    @Html.TextBoxFor(model => model.Name)
    @Html.TextBoxFor(model => model.Email)
    @Html.PasswordFor(model => model.Password)
}

你有一个控制器动作，每个动作的视图和查看文件，每个动作完全不同，并且在任何事情上不相互依赖。

Answer 3

另一种方法是使用：

@model Tuple<LoginViewModel,RegisterViewModel>

我已经在另一个示例中解释了如何在视图和控制器中使用此方法：Two models in one view in ASP MVC 3

在您的情况下，您可以使用以下代码实现它：

在视图中：

@using YourProjectNamespace.Models;
@model Tuple<LoginViewModel,RegisterViewModel>

@using (Html.BeginForm("Login1", "Auth", FormMethod.Post))
{
        @Html.TextBoxFor(tuple => tuple.Item2.Name, new {@Name="Name"})
        @Html.TextBoxFor(tuple => tuple.Item2.Email, new {@Name="Email"})
        @Html.PasswordFor(tuple => tuple.Item2.Password, new {@Name="Password"})
}

@using (Html.BeginForm("Login2", "Auth", FormMethod.Post))
{
        @Html.TextBoxFor(tuple => tuple.Item1.Email, new {@Name="Email"})
        @Html.PasswordFor(tuple => tuple.Item1.Password, new {@Name="Password"})
}

注意，我在构建表单时手动更改了每个属性的 Name 属性。这需要完成，否则在将值发送到关联方法进行处理时，它不会正确映射到模型类型的方法参数。我建议使用单独的方法来分别处理这些表单，对于这个例子，我使用了 Login1 和 Login2 方法。 Login1 方法需要有一个RegisterViewModel 类型的参数，而Login2 需要一个LoginViewModel 类型的参数。

如果需要操作链接，您可以使用：

@Html.ActionLink("Edit", "Edit", new { id=Model.Item1.Id })

在控制器的视图方法中，需要创建一个 Tuple 类型的变量，然后传递给视图。

例子：

public ActionResult Details()
{
    var tuple = new Tuple<LoginViewModel, RegisterViewModel>(new LoginViewModel(),new RegisterViewModel());
    return View(tuple);
}

或者您可以用值填充 LoginViewModel 和 RegisterViewModel 的两个实例，然后将其传递给视图。

Answer 4

使用包含多个视图模型的视图模型：

   namespace MyProject.Web.ViewModels
   {
      public class UserViewModel
      {
          public UserDto User { get; set; }
          public ProductDto Product { get; set; }
          public AddressDto Address { get; set; }
      }
   }

在你看来：

  @model MyProject.Web.ViewModels.UserViewModel

  @Html.LabelFor(model => model.User.UserName)
  @Html.LabelFor(model => model.Product.ProductName)
  @Html.LabelFor(model => model.Address.StreetName)

Answer 5

我是否需要创建另一个包含这两个视图的视图？

答案：否

是否还有其他方式，例如（没有 BigViewModel）：

是的，您可以使用元组（在具有多个模型的视图中带来魔力）。

代码：

 @model Tuple<LoginViewModel, RegisterViewModel>


    @using (Html.BeginForm("Login", "Auth", FormMethod.Post))
    {
     @Html.TextBoxFor(tuple=> tuple.Item.Name)
     @Html.TextBoxFor(tuple=> tuple.Item.Email)
     @Html.PasswordFor(tuple=> tuple.Item.Password)
    }


    @using (Html.BeginForm("Login", "Auth", FormMethod.Post))
     {
      @Html.TextBoxFor(tuple=> tuple.Item1.Email)
      @Html.PasswordFor(tuple=> tuple.Item1.Password)
     }

Answer 6

将此 ModelCollection.cs 添加到您的模型中

using System;
using System.Collections.Generic;

namespace ModelContainer
{
  public class ModelCollection
  {
   private Dictionary<Type, object> models = new Dictionary<Type, object>();

   public void AddModel<T>(T t)
   {
      models.Add(t.GetType(), t);
   }

   public T GetModel<T>()
   {
     return (T)models[typeof(T)];
   }
 }
}

控制器：

public class SampleController : Controller
{
  public ActionResult Index()
  {
    var model1 = new Model1();
    var model2 = new Model2();
    var model3 = new Model3();

    // Do something

    var modelCollection = new ModelCollection();
    modelCollection.AddModel(model1);
    modelCollection.AddModel(model2);
    modelCollection.AddModel(model3);
    return View(modelCollection);
  }
}

观点：

enter code here
@using Models
@model ModelCollection

@{
  ViewBag.Title = "Model1: " + ((Model.GetModel<Model1>()).Name);
}

<h2>Model2: @((Model.GetModel<Model2>()).Number</h2>

@((Model.GetModel<Model3>()).SomeProperty

Answer 7

一个简单的方法来做到这一点

我们可以先调用所有模型

@using project.Models

然后用 viewbag 发送你的模型

// for list
ViewBag.Name = db.YourModel.ToList();

// for one
ViewBag.Name = db.YourModel.Find(id);

在视野中

// for list
List<YourModel> Name = (List<YourModel>)ViewBag.Name ;

//for one
YourModel Name = (YourModel)ViewBag.Name ;

然后像模型一样轻松使用它

Answer 8

我的建议是制作一个大视图模型：

public BigViewModel
{
    public LoginViewModel LoginViewModel{get; set;}
    public RegisterViewModel RegisterViewModel {get; set;}
}

在您的 Index.cshtml 中，例如，如果您有 2 个部分：

@addTagHelper *,Microsoft.AspNetCore.Mvc.TagHelpers
@model .BigViewModel

@await Html.PartialAsync("_LoginViewPartial", Model.LoginViewModel)

@await Html.PartialAsync("_RegisterViewPartial ", Model.RegisterViewModel )

在控制器中：

model=new BigViewModel();
model.LoginViewModel=new LoginViewModel();
model.RegisterViewModel=new RegisterViewModel(); 

Answer 9

我想说我的解决方案就像这个 stackoverflow 页面上提供的答案：ASP.NET MVC 4, multiple models in one view?

但是，就我而言，他们在控制器中使用的 linq 查询对我不起作用。

这是说查询：

var viewModels = 
        (from e in db.Engineers
         select new MyViewModel
         {
             Engineer = e,
             Elements = e.Elements,
         })
        .ToList();

因此，“在您的视图中只需指定您正在使用视图模型的集合”对我也不起作用。

但是，该解决方案的细微变化确实对我有用。这是我的解决方案，以防万一这对任何人都有帮助。

这是我的视图模型，我知道我将只有一个团队，但该团队可能有多个板（顺便说一句，我的 Models 文件夹中有一个 ViewModels 文件夹，因此是命名空间）：

namespace TaskBoard.Models.ViewModels
{
    public class TeamBoards
    {
        public Team Team { get; set; }
        public List<Board> Boards { get; set; }
    }
}

现在这是我的控制器。这是与上面引用的链接中的解决方案最显着的区别。我构建了 ViewModel 以不同的方式发送到视图。

public ActionResult Details(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }

            TeamBoards teamBoards = new TeamBoards();
            teamBoards.Boards = (from b in db.Boards
                                 where b.TeamId == id
                                 select b).ToList();
            teamBoards.Team = (from t in db.Teams
                               where t.TeamId == id
                               select t).FirstOrDefault();

            if (teamBoards == null)
            {
                return HttpNotFound();
            }
            return View(teamBoards);
        }

然后在我看来，我没有将其指定为列表。我只是做“@model TaskBoard.Models.ViewModels.TeamBoards”然后当我迭代团队的董事会时，我只需要一个 for each。这是我的看法：

@model TaskBoard.Models.ViewModels.TeamBoards

@{
    ViewBag.Title = "Details";
}

<h2>Details</h2>

<div>
    <h4>Team</h4>
    <hr />


    @Html.ActionLink("Create New Board", "Create", "Board", new { TeamId = @Model.Team.TeamId}, null)
    <dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => Model.Team.Name)
        </dt>

        <dd>
            @Html.DisplayFor(model => Model.Team.Name)
            <ul>
                @foreach(var board in Model.Boards)
                { 
                    <li>@Html.DisplayFor(model => board.BoardName)</li>
                }
            </ul>
        </dd>

    </dl>
</div>
<p>
    @Html.ActionLink("Edit", "Edit", new { id = Model.Team.TeamId }) |
    @Html.ActionLink("Back to List", "Index")
</p>

我对 ASP.NET MVC 还很陌生，所以我花了一点时间才弄清楚这一点。所以，我希望这篇文章能帮助人们在更短的时间内为他们的项目弄清楚。 :-)

Answer 10

1. 在您的模型和LoginViewModel 和RegisterViewModel 的属性中创建一个新类：

   public class UserDefinedModel() 
   {
       property a1 as LoginViewModel 
       property a2 as RegisterViewModel 
   }
   

2. 然后在你的视图中使用UserDefinedModel。

Answer 11

您始终可以在 ViewBag 或 View Data 中传递第二个对象。

Answer 12

这是一个使用 IEnumerable 的简化示例。

我在视图上使用了两个模型：一个带有搜索条件的表单（SearchParams 模型）和一个用于结果的网格，并且我一直在纠结如何在同一个视图上添加 IEnumerable 模型和另一个模型。这是我想出的，希望对某人有所帮助：

@using DelegatePortal.ViewModels;

@model SearchViewModel

@using (Html.BeginForm("Search", "Delegate", FormMethod.Post))
{

                Employee First Name
                @Html.EditorFor(model => model.SearchParams.FirstName,
new { htmlAttributes = new { @class = "form-control form-control-sm " } })

                <input type="submit" id="getResults" value="SEARCH" class="btn btn-primary btn-lg btn-block" />

}
<br />
    @(Html
        .Grid(Model.Delegates)
        .Build(columns =>
        {
            columns.Add(model => model.Id).Titled("Id").Css("collapse");
            columns.Add(model => model.LastName).Titled("Last Name");
            columns.Add(model => model.FirstName).Titled("First Name");
        })

... )

SearchViewModel.cs：

namespace DelegatePortal.ViewModels
{
    public class SearchViewModel
    {
        public IEnumerable<DelegatePortal.Models.DelegateView> Delegates { get; set; }

        public SearchParamsViewModel SearchParams { get; set; }
....

DelegateController.cs：

// GET: /Delegate/Search
    public ActionResult Search(String firstName)
    {
        SearchViewModel model = new SearchViewModel();
        model.Delegates = db.Set<DelegateView>();
        return View(model);
    }

    // POST: /Delegate/Search
    [HttpPost]
    public ActionResult Search(SearchParamsViewModel searchParams)
    {
        String firstName = searchParams.FirstName;
        SearchViewModel model = new SearchViewModel();

        if (firstName != null)
            model.Delegates = db.Set<DelegateView>().Where(x => x.FirstName == firstName);

        return View(model);
    }

SearchParamsViewModel.cs：

namespace DelegatePortal.ViewModels
{
    public class SearchParamsViewModel
    {
        public string FirstName { get; set; }
    }
}