Question

我有一个产品页面，其中有3个下拉列表，允许访问者选择产品属性 - 例如，对于一条裤子，这可能是颜色/腰围尺寸/腿长。

目前我通过使用jQuery和jSon将这些下拉连接起来 - 所以每个选择通过页面内的一些jQuery调用JsonResult操作来填充层次结构中的下一个下拉列表。

当做出所有选择，并且因此访问者决定了产品变体时，我需要更新我的页面内容 - 价格/图像/库存可用性/长描述和规格表等元素都可以是产品变体具体。需要更改的这些页面元素分布在整个标记中，而不是仅仅是为了使问题复杂化。

目前我的页面（视图）在主视图中只包含所有这些元素 - 实现更改页面以反映访问者选择的最佳方法是什么？

这是一个webforms应用程序，我使用了几个UpdatePanel来实现同样的目的，但作为一个相对的MVC新手，我不确定解决这类问题的方法？

感谢。

Answer 1

基本上你有3个主要选择：

显示包含所有数据的预呈现视图 - 在选择的第三个下拉列表中，向服务器发送ajax请求，该请求应返回部分视图。此视图将使用与用户选择对应的模型进行渲染。一旦你得到它，你可以简单地将它注入DOM：$('#itemDetails').html(yourRenderedViewHTML)我不熟悉WebForms，但我认为这类似于你使用的UpdatePanels技术。
从服务器获取原始数据并将其绑定到某个模板 - 在选择的第三个下拉列表中，向服务器发送一个ajax请求，该请求应返回包含所有请求数据的json结果。一旦这个json到达客户端，你需要执行某种模型绑定。您可以手动执行（对于每个元素，您将使用$('#priceDisplayElement').text(model.Price)）`。或者您可以使用一些客户端框架（例如Knockout.js）来简化此任务。

还有另一种选择，即对服务器进行完全回发（而不是ajax调用），这将重新呈现所有页面。服务器端代码可能如下所示：

public class ItemModel
{
   public int ItemId{get;set;}
   public string Description {get;set;}
   //all other props come here
}

public class GetItemDetailsViewModel
{
   public ItemModel Item{get;set;}
   public int SelectedItemId {get;set;}
   //other properties for cascading dropdowns   
}


public ActionResult GetItemDetails(int? itemId)
{

   var model = new GetItemDetailsViewModel();
   if(itemId.HasValue)
   {
       model.Item = //get item details from DB
   }
   return View(model);
}

在视图中，您可以检查Item属性是否为null并相应地呈现所有数据。如果Item属性为null，则只显示下拉列表。

ASP.Net MVC - 根据下拉列表更新页面区域

1 个答案: