Question

在我的ASP.net MVC应用程序中（使用Razor视图）我有一个“ProductDetails”视图这将从数据库中检索“Product”模型。

Product对象，有一个“ProductVariation”集合（大小，价格，inStock等...）

这样的事情：

public class Product()
{
  public int ID { get; set; }
  public str Name { get; set; }

  public ICollection<ProductVariation> Variations { get; set; }
}

public class ProductVariation
{
  public int VariationID {get;set;}
  public bool ProductID {get;set;}
  public bool InStock {get;set;}
  public double Price {get;set;}
}

（显然这是一个非常简化的模型）

在我的ProductDetails视图中，我有一个下拉列表，可以选择变体。

我希望能够做的是根据选择显示/隐藏元素。

目前，我已经使用jQuery进行价格更新等。我这样做是通过创建一系列带有ID的标签，例如“1234-price” （1234代表VariationID）

我的select元素的值是VariationID 所以，我基本上使用jQuery选择器来获取我想要显示的ID的值，并隐藏所有其他ID。这很好。

但是，如果产品不可用（即InStock是假的）我想隐藏“购买”按钮，并显示一些缺货文本。

我该如何做这样的事情？

我应该从我的控制器返回的模型中在页面上创建一个Javascript“product”对象数组吗？

有更好的方法吗？

Answer 1

根据您的描述，使用模板系统，例如：http://api.jquery.com/category/plugins/templates/

首先，您将创建一个反映您的数据库模型的javascript对象。例如....（理想情况下，这将通过以下内容自动生成：

<script>
  var viewModel = @Html.Raw(JsonNetConverter.Serialize(Model))
</script>

然而，你要做到这一点，你应该得到这样的东西：

var viewModel = { VariationID: 1, ProductID: 1, InStock: true, Price: 9.99 };

在用户可以选择产品版本的下拉菜单中，您可以执行以下操作：

<select name="ProductVariations">
    <option value="1">Variation 1</option>
    <option value="2">Variation 2</option>
</select>

然后，您需要在控制器中执行操作，例如：

[HttpPost]
public ActionResult GetVariationById(int id)
{
    var model = new VariationModel();
    var variation = model.getVariationById(id);
    return View(variation);
}

最后，您使用从模型中返回的新数据重新渲染模板：

$("#view-template").tmpl(viewModel).appendTo("#selector");

使用C＃模型中的Javascript对象允许条件显示MVC Razor元素？

1 个答案: