หลายรุ่นในมุมมอง

ฉันต้องการมี 2 รุ่นในหนึ่งมุมมอง หน้ามีทั้งและLoginViewModelRegisterViewModel

เช่น

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

ฉันต้องสร้าง ViewModel อีกอันที่มี 2 ViewModels เหล่านี้หรือไม่

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

ฉันต้องการแอตทริบิวต์การตรวจสอบความถูกต้องเพื่อนำไปสู่มุมมอง นี่คือเหตุผลที่ฉันต้องการ ViewModels

ไม่มีวิธีอื่นเช่น (ไม่มี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)
 }

มีหลายวิธี ...

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แต่อาจไม่ใช่กรณีนี้

ฉันขอแนะนำให้ใช้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)
}

และที่นั่นคุณจะมีการกระทำของคอนโทรลเลอร์ตัวเดียวดูและดูไฟล์สำหรับแต่ละการกระทำโดยที่แต่ละอันนั้นแตกต่างกันโดยสิ้นเชิงและไม่พึ่งพาซึ่งกันและกันเพื่ออะไร

อีกวิธีหนึ่งคือการใช้:

@model Tuple<LoginViewModel,RegisterViewModel>

ฉันได้อธิบายวิธีใช้วิธีนี้ทั้งในมุมมองและตัวควบคุมสำหรับตัวอย่างอื่น: สองรุ่นในหนึ่งมุมมองใน 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"})
}

โปรดทราบว่าฉันได้เปลี่ยนแอตทริบิวต์ชื่อสำหรับแต่ละคุณสมบัติด้วยตนเองเมื่อสร้างแบบฟอร์ม สิ่งนี้จำเป็นต้องทำมิฉะนั้นจะไม่ได้รับการแมปอย่างถูกต้องกับพารามิเตอร์ของรุ่นชนิดของวิธีเมื่อค่าถูกส่งไปยังวิธีการที่เกี่ยวข้องสำหรับการประมวลผล ฉันขอแนะนำให้ใช้วิธีแยกต่างหากในการประมวลผลแบบฟอร์มเหล่านี้แยกกันสำหรับตัวอย่างนี้ฉันใช้วิธี 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 ด้วยค่าจากนั้นส่งต่อไปยังมุมมอง

ใช้โมเดลมุมมองที่มีโมเดลมุมมองหลายแบบ:

   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)

ฉันต้องสร้างอีกมุมมองหนึ่งที่เก็บ 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)
     }

เพิ่ม 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

วิธีง่ายๆในการทำเช่นนั้น

เราสามารถโทรทุกรุ่นได้ก่อน

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

จากนั้นใช้โมเดลนี้อย่างง่ายดาย

คำแนะนำของฉันคือการทำให้รูปแบบมุมมองขนาดใหญ่:

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

ใน Index.cshtml ของคุณถ้าเช่นคุณมี 2 partials:

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

ฉันอยากจะบอกว่าวิธีแก้ปัญหาของฉันเป็นเหมือนคำตอบที่ให้ไว้ในหน้าสแต็คโอเวอร์โฟลว์นี้: ASP.NET MVC 4 หลายรุ่นในมุมมองเดียว?

อย่างไรก็ตามในกรณีของฉันแบบสอบถาม linq ที่ใช้ในตัวควบคุมไม่ทำงานสำหรับฉัน

นี่คือแบบสอบถามที่กล่าวว่า:

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

ดังนั้น "ในมุมมองของคุณเพียงระบุว่าคุณกำลังใช้คอลเลกชันโมเดลการดู" ไม่ได้ผลสำหรับฉันเช่นกัน

อย่างไรก็ตามความแตกต่างเล็กน้อยของวิธีการแก้ปัญหานั้นได้ผลสำหรับฉัน นี่คือทางออกของฉันในกรณีนี้จะช่วยให้ทุกคน

นี่คือรูปแบบการดูของฉันที่ฉันรู้ว่าฉันจะมีเพียงหนึ่งทีม แต่ทีมนั้นอาจมีหลายบอร์ด (และฉันมีโฟลเดอร์ ViewModels ภายในโฟลเดอร์รุ่นของฉัน btw ดังนั้นเนมสเปซ):

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" จากนั้นฉันจะต้องใช้เฉพาะเมื่อฉันทำซ้ำมากกว่าบอร์ดของทีม นี่คือมุมมองของฉัน:

@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 ดังนั้นจึงใช้เวลาสักครู่ในการคิดออก ดังนั้นฉันหวังว่าโพสต์นี้จะช่วยให้ใครบางคนคิดโครงการของพวกเขาในระยะเวลาอันสั้น :-)

คุณสามารถส่งผ่านวัตถุที่สองใน ViewBag หรือดูข้อมูลได้ตลอดเวลา

1. สร้างคลาสใหม่หนึ่งคลาสในโมเดลและคุณสมบัติของคุณLoginViewModelและRegisterViewModel:

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

2. จากนั้นใช้UserDefinedModelในมุมมองของคุณ

นี่คือตัวอย่างแบบย่อที่มี 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; }
    }
}