如何将动态文本绑定到视图模型而不是使用隐藏的 HTML 控件答案

【问题标题】：How to bind dynamic text to a viewmodel other than using a hidden HTML control如何将动态文本绑定到视图模型而不是使用隐藏的 HTML 控件
【发布时间】：2015-07-23 12:34:20
【问题描述】：

如何将动态文本绑定到视图模型？

我有一个产品页面。产品的每个变体都有一个特定的SKU (stock keeping unit)。例如（这些只是示例）：

Green shirt 将有一个 SKU 或 greenshirt-001
Blue shirt 将有 SKU 的 blueshirt-001

当页面第一次加载时，我加载了该产品的所有不同颜色 (shirt) 和默认 SKU，假设默认 SKU 是 greenshirt-001。所以用户会在页面上看到greenshirt-001作为文本。

当用户选择另一种颜色时，例如蓝色衬衫，那么我需要它在服务器上运行一些东西并显示有关蓝色衬衫的信息。现在blueshirt-001 在页面上显示为文本。

页面上还有一个add to cart 按钮。当用户单击此按钮时，我希望将此产品变体添加到购物车中。我想检索当前正在向用户显示的 SKU。

向用户显示此 SKU 并在发布表单时检索它的最佳方式是什么？除了使用隐藏控件之外，我想不出一种方法将其显示为 HTML 控件，然后检索帖子上的值？

@using (Html.BeginForm("Details", "Product", FormMethod.Post, new { role = "form" }))
{
     <div class="product-details">
          <div class="sku">Item #: @Model.StockKeepingUnit.SKU</div>
          <div>@Html.HiddenFor(m => m.StockKeepingUnit.SKU)</div>
     </div>
     <div class="actions">
          <button type="submit" class="btn btn-primary">Primary</button>
          <button type="button" class="btn btn-default" id="test-button">Default</button>
     </div>
}

为了让我现在的生活更轻松，我添加了一个 ID 为 test-button 的按钮。这只是为了在我编写服务器端代码之前进行测试。此按钮所做的只是将 SKU 更改为其他内容。例如，它将greenshirt-001 更改为blueshirt-001。目前我只是在隐藏控件上更改它。

有没有办法放弃隐藏控件而只将其绑定到另一个显示控件？

这是我对HttpGet的操作方法：

public async Task<ActionResult> Details(int productId)
{
     ProductViewModel model = await productTask.DetailsAsync(productId);
     if (model == null)
     {
          throw new HttpException(404, "404");
     }

     return View(model);
}

这是我在HttpPost 上的操作方法的部分代码：

[HttpPost]
public ActionResult Details(ProductViewModel model)
{
     if (!ModelState.IsValid)
     {
          return View(model);
     }

     // Do something
     return View(model);
}

还有我的 jQuery 代码来更改 SKU：

<script>
     $(document).ready(function () {
          $('#test-button').click(function () {
               $("#StockKeepingUnit_SKU").val("blueshirt-001");
          });
     });
</script>

【问题讨论】：

由于您将值呈现为视图中的文本（我假设在 div 中？）然后您可以使用 var sku = $(yourDiv).text() 获取值以避免生成额外的隐藏输入
我在提交表单时需要返回vale。我需要绑定它，以便我可以在服务器端检索它，以便我可以用它做一些事情。
好的（我假设您会使用 ajax 将商品添加到购物车）。由于您正在进行正常提交，因此需要隐藏输入（或者您可以将值添加到表单路由参数）
您也可以随时使用@Html.TextBoxFor() 并将其设为只读（并删除显示文本）

标签： c# asp.net .net asp.net-mvc razor

【解决方案1】：

尝试使用 CSS 样式（只读）文本框。例如移除边框并使背景与周围空间相同。通过这种方式，它将显示给用户（我理解这是有意的），并且它也将与 FORM 一起发布到服务器。

【讨论】：