MVC中同一页面上有多个ViewModel

Question

I do have a form where in I have three partial Views and one Grid so for all these 4 there are 4 Different ViewModel is being used.Now as per My understanding there would be one more ViewModel which includes all the 4 ViewModel and out of which one would be IEnumarable that would be used by Grid.

My Code goes as follows:

    @model IEnumerable<Invoice.Models.ViewModels.Setup.AccountViewModel>

    @{
        ViewBag.Title = "Account";
        Layout = "~/Views/Shared/_LayoutGrid.cshtml";
    }



        @(Html.Kendo().Grid(Model)
            .Name("Account")
            .Columns(columns =>
            {

                columns.Bound(p => p.AccountType).Title("Account Type").Width(250);

                columns.Bound(p => p.AccountName).Title("Account Name").Width(300);

                columns.Bound(p => p.Currency).Title("Currency").Width(120);

                columns.Bound(p => p.Status).ClientTemplate("#=data.Status#").Width(150);

            })
            .ToolBar(toolbar =>
             {
                 toolbar.Template(@<text>
                    <div class="row-fluid">
                        <div class="span1">
                            <div class="toolbar" style="height:25px;">
                                <ul id="menu" style="width:38px; margin-left:22px;" class="span6">
                                    <li style="width:36px;">
                                        <i class="fa fa-plus"></i>
                                        <ul>
                                            @foreach (var account in @ViewBag.AccountType)
                                            {
                                                <li style="width:100px;" class="openid">
                                                    @if(@account.Value=="Bank")
                                                    {
                                                    <label id="Bank1">@account.Value</label>
                                                    }
                                                    @if(@account.Value=="CreditCard")
                                                    {
                                                    <label id="Credit">@account.Value</label>
                                                    }
                                                    @if(@account.Value=="Cash")
                                                    {
                                                    <label id="Cash1">@account.Value</label>
                                                    }
                                                </li>

                                            }
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </text>);
             })


            <div id="Bank">
            @Html.Partial("_BankDetails")
        </div>

        <div id="Cash">
            @Html.Partial("_CashDetails")
        </div>

        <div id="Credit">
            @Html.Partial("_CreditCardDetails")
    </div>

Here as You can see I am Using AccountViewModel that is being used for displaying the Grid Only but there are 3 More ViewModel for Submiting these Partial View.

Answer 1

You could create a view models which combines the 4 view models you need:

public class FullAcountModel
{
    public IEnumerable<AccountViewModel> Accounts { get; set; }

    public CashDetails CashDetails { get; set; }

    public BankDetails BankDetails { get; set; }

    public CreditCardDetails CreditCardDetails { get; set; }
}

With this model you can create the grid like this:

@(Html.Kendo().Grid(Model.Accounts)

And the partials like this:

@Html.Partial("_BankDetails", Model.BankDetails)