MVC将值传递给控制器

Question

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

我本质上希望用户能够更新诸如noofusers等的某些字段，并且我想拥有一个addotcart按钮，它将这些值传递给控制器​​。

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

如果我以表格的形式输入值，则会丢失从拥有表中获得的所有格式。

如果我在表单中重复这些值，但更改为“隐藏”，则会从传递的模型中获取值，而不是更新后的值

我搜索了其他一些帖子，并在这里还有另一篇帖子，建议不要使用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种可能的解决方案：

1. 不要使用html表，而应使用CSS在每个form元素内布置控件，从而为您提供表格布局（例如，使用float或绝对定位的元素
2. 每当表单外部的相应控件发生更改时，都使用jquery更新该表单的隐藏元素（但使用此解决方案，您只需呈现所需控件的两倍，并且由于ID重复而生成无效的html）
3. 用按钮替换表单并提交元素，然后使用jquery（ $.post()方法）将值发布到控制器。 这种方法的优点是用户可以停留在表单上，​​并且可以继续向购物车中添加更多元素。 然后，该页面将包含指向结帐页面的链接，该页面显示已添加的所有项目