Question

需要一些方法的建议。我使用表结构设计了一个视图来获取我需要的布局，并使用基于我的ViewModel的foreach循环填充该表。

我基本上希望用户能够更新一些字段，如noofusers等，我想要一个addotcart按钮，将这些值传递给控制器。

我目前遇到的问题是表单不会传递值，因为它们存在于表单外部。

如果我放入表格中的值，我会放弃从表格中获得的任何格式。

如果我重复表单中的值但更改为hidden for，我会从传入的模型中获取值而不是更新的值

我已经搜索了其他一些帖子并在这里有另一篇文章，建议不要使用foreach并使用for循环，但这并没有真正改变与我遇到的问题相关的任何内容。

代码如下所示 - 任何关于实现具有良好布局的简单表单并且仍然能够通过表单将值传递给控制器的一般方法的建议将不胜感激。

@model PagedList.IPagedList<ShoppingCartCatalogue>
@using Mojito.Domain.ViewModels
@using PagedList.Mvc;
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Mojito Products</h2>
<div class="col-md-9"></div>
<div class="col-md-3">
    @using (Html.BeginForm("Index", "MojitoProducts", FormMethod.Get))
    {
        <p>
            @Html.TextBox("SearchString", ViewBag.CurrentFilter as string)
            <input type="submit" value="Search" />
        </p>
    }
</div>

<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.FirstOrDefault().ImageData)
        </th>
        <th>
            @Html.ActionLink("Category", "Index", new { sortOrder = ViewBag.SortByCategory, currentFilter = ViewBag.CurrentFilter })
        </th>
        <th>
            @Html.ActionLink("Product", "Index", new { sortOrder = ViewBag.SortByProduct, currentFilter = ViewBag.CurrentFilter })
        </th>
        <th>
            @Html.DisplayNameFor(model => model.FirstOrDefault().Description)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.FirstOrDefault().TypeOfSubscription)
        </th>
        <th>
            @Html.ActionLink("Price per user", "Index", new { sortOrder = ViewBag.SortByPrice, currentFilter = ViewBag.CurrentFilter })
        </th>
        <th>
            @Html.DisplayNameFor(model => model.FirstOrDefault().NoOfUsers)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.FirstOrDefault().TotalPrice)
        </th>

    </tr>

    @foreach (ShoppingCartCatalogue t in Model)
    {

        <tr>
            <td>
                @if (t.ImageData != null)
                {
                    <div class="pull-left" style="margin-right: 10px">
                        <img class="img-thumbnail" width="75" height="75"
                             src="@Url.Action("GetImage", "MojitoProducts",
                                                  new { t.MojitoProductId })" />
                    </div>
                }
            </td>
            <td>
                @Html.DisplayFor(modelItem => t.Category, new { Name = "Category", id = "Category" })
            </td>
            <td>
                @Html.DisplayFor(modelItem => t.Name, new { Name = "Name", id = "Name" })
            </td>
            <td>
                @Html.DisplayFor(modelItem => t.Description, new { Name = "Description", id = "Description" })
            </td>
            <td>
                @Html.EnumDropDownListFor(modelItem => t.TypeOfSubscription, new { Name = "TypeOfSubscription", id = "TypeOfSubscription" })
            </td>
            <td>
                @Html.DisplayFor(modelItem => t.Price, new { Name = "Price", id = "Price" })
            </td>
            <td>
                @Html.TextBoxFor(modelItem => t.NoOfUsers, new { Name = "NoOfUsers", id = "NoOfUsers", type = "number", min = "1" })
            </td>
            <td>
                @if (t.TypeOfSubscription.ToString() == "Annual")
                {
                    t.TotalPrice = t.Price * 12;
                }
                else
                {
                    t.TotalPrice = t.Price;
                }
                @Html.DisplayFor(modelItem => t.TotalPrice, new { Name = "Total Price", id = "Total Price" })
            </td>
            <td>

                @using (Html.BeginForm("AddToCart", "ShoppingCart", FormMethod.Post))
                {
                    <div class="pull-right form-group">
                        @if (Request.Url != null)
                        {
                            @Html.HiddenFor(modelItem => t.TypeOfSubscription, new { Name = "TypeOfSubscription", id = "TypeOfSubscription" })
                            @Html.HiddenFor(modelItem => t.NoOfUsers, new { Name = "NoOfUsers", id = "NoOfUsers" })
                            @Html.HiddenFor(modelItem => t.MojitoProductId, new { Name = "MojitoProductId", id = "MojitoProductId" })
                            @Html.HiddenFor(modelItem => t.Category, new { Name = "Category", id = "Category" })
                            @Html.HiddenFor(modelItem => t.Name, new { Name = "Name", id = "Name" })
                            @Html.HiddenFor(modelItem => t.Description, new { Name = "Description", id = "Description" })
                            @Html.HiddenFor(modelItem => t.Price, new { Name = "Price", id = "Price" })
                            if (t.TypeOfSubscription.ToString() == "Annual")
                            {
                                t.TotalPrice = t.Price * 12;
                            }
                            else
                            {
                                t.TotalPrice = t.Price;
                            }
                            @Html.HiddenFor(modelItem => t.TotalPrice, new { Name = "Total Price", id = "Total Price" })
                            @Html.Hidden("returnUrl", Request.Url.PathAndQuery)
                            <input type="submit" class="btn btn-success" value="Add to cart" />
                        }

                    </div>
                }
            </td>
        </tr>

    }

</table>

<div class="col-md-12">
    Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount
</div>
@Html.PagedListPager(Model, page => Url.Action("Index",
        new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))

Answer 1

这是一个CSS问题，而不是真正的mvc问题。比较应用于表单外部表的css，将css应用于表单内的表。它可能只是在表和css文件中添加一个类。

Answer 2

3种可能的解决方案：

不要使用html表，而是使用css来布局控件在每个表单元素中为您提供表格布局（例如使用浮动或绝对定位的元素
使用jquery更新使用表单更新隐藏元素每当表格外的相应控件发生变化时（但是使用此解决方案，您只需渲染两倍的控件必要的，因为重复而生成无效的HTML ID＆＃39; S）
替换表单并使用按钮提交元素并使用jquery （$.post()方法）将值发布到控制器。该这种方法的优点是用户可以保留在表单上继续向购物车添加更多元素。页面会然后包含一个指向结帐页面的链接，该页面显示了所有项目已添加

MVC将值传递给控制器

2 个答案: