Question

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

我有一个产品页面。产品的每个变体都有一个特定的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并在发布表单时检索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>

Answer 1

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

如何将动态文本绑定到除使用隐藏的HTML控件之外的viewmodel

1 个答案: