web-dev-qa-db-ja.com

ビュー内の複数のモデル

1つのビューに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をもう1つ作成する必要がありますか？

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)
 }
asp.net-mvcasp.net-mvc-3
281
Shawn Mclean

たくさんの方法があります...

  1. あなたのBigViewModelであなたがすること：

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

  2. 追加のビューを2つ作成できます

    Login.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、しかしおそらくそうではありません

251
Omu

これを実現するには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は、現在のViewフォルダまたはSharedフォルダのいずれかに存在するユーザーコントロールになり、次のようになります。

/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)
}

そしてそこにあなたはそれぞれ全く全く異なっていて、何にも依存していないそれぞれのアクションのための単一のコントローラーアクション、ビューそしてビューファイルを持っています。

121
TheRightChoyce

別の方法は以下を使用することです：

@model Tuple<LoginViewModel,RegisterViewModel>

別の例として、ビューとコントローラーの両方でこのメソッドを使用する方法を説明しました。 ASP MVC 3の1つのビューの2つのモデル

あなたの場合、次のコードを使用して実装できます。

ビューで：

@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の2つのインスタンスに値を入力して、ビューに渡すことができます。

109
Hamid Tavakoli

複数のビューモデルを含むビューモデルを使用します。

   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)
20
Yini

これら2つのビューを保持する別のビューを作成する必要がありますか？

答え：いいえ

（BigViewModelなしで）のような他の方法はありません：

はい 、Tupleを使うことができます（複数のモデルを持っているという点で魔法をもたらします）。

コード： 

 @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)
     }
9
VCody

この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
5
Morten Frederiksen

私の解決策はこのstackoverflowページで提供された答えのようだったと言いたいです： ASP.NET MVC 4、1つのビューで複数のモデル？

しかし、私の場合は、彼らが彼らのコントローラで使用しているlinqクエリは私にとってはうまくいきませんでした。

これはクエリです。

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

そのため、「ビュー内でビューモデルのコレクションを使用していることを指定する」だけではうまくいきませんでした。

しかし、その解決策のわずかな変更は私にはうまくいきました。これがだれにでも役立つ場合の私の解決はここにあります。

これは私のビューモデルです。チームは1つだけですが、そのチームには複数のボードがある場合があります（そして、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"を実行するだけです。それから私はチームのボードを反復するときにそれぞれに1つずつ必要です。これが私の見解です。

@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にかなり慣れていないので、これを理解するのに少し時間がかかりました。だから、私はこの記事が誰かが彼らのプロジェクトのためにもっと短い時間枠でそれを理解するのを手助けすることを望みます。 :-)

2
Notso

私のアドバイスは、ビッグビューモデルを作ることです。

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();
2
alin

それをする簡単な方法

すべてのモデルを最初に呼び出すことができます

@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 ;

それなら簡単にこれをModelのように使う

2
Pnsadeghy

viewBagまたはView Dataに2番目のオブジェクトを渡すことができます。

1
Nada N. Hantouli

  1. モデルとLoginViewModelおよびRegisterViewModelのプロパティに新しいクラスを1つ作成します。

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

  2. それならあなたのビューでUserDefinedModelを使ってください。

1
user4282639

これは、IEnumerableを使用した簡単な例です。

ビューで2つのモデルを使用していました：検索条件（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; }
    }
}
0
live-love