MVC,正常局部视图和列表局部视图。不合作!!! S.O.S.的xD

时间:2016-12-06 14:51:10

标签: asp.net-mvc visual-studio razor

我有一个包含2个部分视图的视图。

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

我只想用第一个部分创建一个from,用第二个创建一个列表。

部分观点

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>

在我的控制器中,我得到了这个。

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

但问题是我不能同时显示两个部分,因为如果我在我的视图中发送list,那么我的第一个部分会遇到问题,因为它需要@model TestNewATM3.0.Models.CartItem。但如果我没有发送列表我的列表不会显示,因为我不发送它。

那么如何同时显示普通的局部表格视图和列表局部视图呢?

1 个答案:

答案 0 :(得分:0)

我对你的例子有一点了解(比如你有一个带有创建按钮的编辑视图),看起来你试图创建一个视图来编辑购物车。

注意:为了清楚起见,我建议将模型的CartItem属性重命名为CartItems,但我将使用当前属性名称作为下面的示例。

您可以像这样渲染列表中每个项目的局部视图, 但这种做法更多的是有点凌乱:

foreach(var cartItem in Models.CartItem){

    Html.RenderPartial("EditCartItemsPartical", cartItem);

}

更简单,更高效的方法是编辑第一个视图,以便获取购物车项目的集合

喜欢这样

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

当然,这需要您更改服务器端代码以接收购物车项目的集合,但从用户的角度来看,不必多次发布表单,完成更改将带来更好的体验

免责声明:我在记事本中更改了上述视图,可能需要先调整一下才能完美运行

我希望这会有所帮助。