How to show two Partials view data on Index.cshtml

问题:

I have created a web application in mvc3 and created two partial views one having controls two dropdownlist. second having webgrid which shows data from database.

    partialview1.cshtml
    @model Mapping.Models.SecurityIdentifierMapping

    @using (Html.BeginForm("Mapping", "Home"))
    {
        @Html.DropDownList("SecurityID", Model.PricingSecurityID, "-- Select SecurityID --")
        <br />    
        @Html.DropDownList("CUSIPID", Model.PricingSecurityID, "-- Select CUSIPID --")
        <br />
        <button type="submit">Map</button>
    }

    partialview2.cshtml
    @model IEnumerable<Mapping.Models.SecurityIdentifierMapping>

    @{
        ViewBag.Title = "Mapping";
        WebGrid grid = null;
        if (Model.Count() > 0 ){
        grid = new WebGrid(source: Model,
                                defaultSort: "Id",
                                canPage: true,
                                canSort: true,
                                rowsPerPage:20);
        }
    }


    <h2>Mapping</h2>


    @if (grid != null)
    {
    @grid.GetHtml(
                    tableStyle: "grid",
                    headerStyle: "head",
                    alternatingRowStyle: "alt",
                    columns: grid.Columns(
                                                grid.Column("", header: null, format: @<text>@Html.ActionLink("Edit", "Edit", new { id = (int)item.id })  @Html.ActionLink("Delete", "Delete", new { id = (int)item.id })</text>),
                                                grid.Column("PricingSecurityID"),
                                                grid.Column("CUSIP")
                                              )

                    )
    }
    <br />
    <p>
        @Html.ActionLink("Back", "Index")
    </p>

    in index.cshtml


    <div>
    @Html.Partial("_ControlsPartial",)
    </div>

    <div>
    @Html.Partial("_WebGridPartial")
    </div>

inside Indexcontroller.cs in Index()

     public ActionResult Index()
            {
//FOR POPULATE DROPDOWN
                //SecurityIdentifierMapping objModel = new SecurityIdentifierMapping();
                //objModel.PricingSecurityID = objRepository.GetPricingSecurityID();
                //objModel.CUSIP = objRepository.GetCUSIP();
                //return View(objModel);

              //FOR  DISPLAY DATA IN WEBGRID
                return View(dbContext.SecurityIdentifierMappings);
            }

here problem is webgrid partial view is having@model IEnumerable<Mapping.Models.SecurityIdentifierMapping> and controlpartilview is having @model Mapping.Models.SecurityIdentifierMapping

so HOW CAN I CREATE A VIEWMODEL.cs A NEW CLASS WHICH WILL HAVE BOTH MODELS AND HOW CAN I WRITE IT IN INDEX(() SO THAT THAT METHOD WILL POPULATE DROPDOWN ALSO AND SHOW DATA IN WEBGRID ALSO ?

回答1:

Why not just create a custom View Model class that contains two properties:

public class SecurityIdentifierMappingViewModel
{
    public IEnumerable<SecurityIdentifierMapping> MappingList {get; set; }
    public SecurityIdentifierMapping Mapping {get; set; }
}

Then you can pass this custom view model to the Index view and the corresponding property as the view model of each of the partials

EDIT

Your Index action would then look something like this:

public ActionResult Index()
{
    // single mapping
    var mapping = new SecurityIdentifierMapping();
    maping.PricingSecurityID = objRepository.GetPricingSecurityID();
    mapping.CUSIP = objRepository.GetCUSIP();

    var viewModel = new SecurityIdentifierMappingViewModel
    {
        Mapping = mapping,
        MappingList = dbContext.SecurityIdentifierMappings.ToList()
    };

    return View(viewModel);
}

And in Index.cshtml:

@model SecurityIdentifierMappingViewModel

<div>
    @Html.Partial("_ControlsPartial", Model.Mapping)
</div>

<div>
    @Html.Partial("_WebGridPartial", Model.MappingList)
</div>