MVC, Normal partial view and List partial view. not working together!!! S.O.S. xD

Question

I have a view that contains 2 partial views.

@model ListViewModel
....
@{        
    Html.RenderPartial("EditCartItemsPartical");
    Html.RenderPartial("ShowProductINFO", Model.Products);
}

and I just want to create a from with the first partial, and a list with the second.

The partial views

EditCartItemsPartical.cshtml

@model  TestNewATM3._0.Models.CartItem
@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    <div class="form-horizontal">
        <div class="form-group">
            @Html.LabelFor(model => model.CartId, "CartId", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.CartId, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.CartId, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.ProductId, "ProductId", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.ProductId, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.ProductId, "", new { @class = "text-danger" })
            </div>
        </div>
        .... // more control for CartItem
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

ShowProductINFO.cshtml

@model IEnumerable<TestNewATM3._0.Models.AllProduct2>
<p>@Html.ActionLink("Create New", "Create")</p>
<table class="table">
    <tr>
        <th>ID</th>
        <th>@Html.DisplayNameFor(model => model.Title)</th>
    </tr>
    @foreach (var item in Model) {
        <tr>
            <td>@Html.DisplayFor(model => item.Id)</td>
            <td>@Html.DisplayFor(modelItem => item.Title)</td>
        </tr>
    }
</table>

And in my controller I got this.

public ActionResult Edit()
{
    var db = ApplicationDbContext.Create();
    var list = new ListViewModel
    {
        Products = db.AllProduct2s.ToList(),
        Users = db.Users.ToList(),
        Cart = db.Carts.ToList(),
        CartItem = db.CartItems.ToList()
    };
    return View(list);
}

But the problem is that I cant show both partial at the same time because if I send the list in my view, then my first partial gets a problem cause it want a @model TestNewATM3.0.Models.CartItem. but if I don't sent the list My list wont show because I don't send it.

So how do i show a normal partial form view and a List partial view at the same time?

Answer 1

I'm having a little difficulty understanding your examples (i.e you have an edit view with create buttons), it looks like your trying to create a view to edit the cart.

Note: I would suggest renaming the CartItem property of your model to CartItems for clarity, but I'll use the current property names for the examples below.

You could render the partial view for each of the items in the list like so, but this approach more is more than a little messy:

foreach(var cartItem in Models.CartItem){

    Html.RenderPartial("EditCartItemsPartical", cartItem);

}

A simpler and more performant approach would be to edit the first view so it takes a collection of cart items

Like so

@model  IEnumerable<TestNewATM3._0.Models.CartItem>

@using (Html.BeginForm()) 
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
    @foreach(var modelItem in Model.CartItem){      
        <h4>CartItem</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => modelItem.CartId, "CartId", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => modelItem.CartId, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => modelItem.CartId, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.ProductId, "ProductId", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => modelItem.ProductId, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => modelItem.ProductId, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Aantal, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => modelItem.Aantal, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => modelItem.Aantal, "", new { @class = "text-danger" })
            </div>
        </div>
    }       
    <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
    </div>      
</div>
}

Of course this will require you to change the server side code to receive a collection of cart items, but from the user's perspective not having to post a form back multiple times, to complete your changes is going to result in a better experience.

disclaimer: I changed the above view in notepad, might need to adjust a bit before it works perfectly

I hope this helps.