在Razor视图中将ASP.NET MVC 3 ViewModel呈现为ListView，Accordian或简单列表

问题描述

| 我正在尝试使用MVC3，Razor视图引擎和JQuery UI为自己构建示例。 从控制器中，我返回一个viewmodel（具有List），并且能够将jQuery手风琴包装在html段周围。一切正常。 现在，我正在尝试使其变得更好。 1）想拥有一个分页栏，它可以根据所选页面和所选每页项目的数量刷新手风琴（我知道在控制器等中需要做什么。与c＃相比，我的JavaScript技能不是很好:-(） 2）我希望能够为数据选择“显示类型”。例如，如果您访问Slickdeals网站，我们可以选择Grid或Accordion或简单列表。看起来它只是将模板应用于数据并刷新html。 我想知道如何才能最好地做到这一点。 （我想到的一个想法是，向控制器发送具有所需显示类型的AJAX请求，控制器可以呈现视图并返回字符串作为响应，然后可以将其用作html的元素。是否有更好的方法，我的意思是数据已经在浏览器中了，所以我们可以只应用一些模板并重新渲染相同的数据吗？） 对于（1）和（2），我都希望避免回发整页。 （我将尝试添加更多详细信息） 提前致谢     

解决方法

        回复（2）：我认为在控制器内部生成HTML是一个坏主意-关注点分离表明View应该对HTML完全负责。 但是，您可以在视图模型中拥有一个属性，该属性告诉视图要生成哪个版本：

public class XyzModel
{
    public string displayType { get; set; }
    // ... other properties
}

然后在视图中，可以测试此变量：

@if (Model.displayType == \"grid\")
{
   // html for grid
}
else if (Model.displayType == \"accordian\")
{
   // html for accordian
}

等等，所有html块都使用相同的数据。 如果要使用Ajax进行填充，则可以在部分视图中隔离此代码，然后使用jQuery进行填充，例如：

$.post(
    form.attr(\"action\"),form.serialize(),function (data) {
          $(\"#dataDisplay\").html(data);
    });

其中的dataDisplay部分可能像这样：

<div id=\"dataDisplay\">
@Html.Partial(\"DataDisplayPartial\",Model)
</div>

并且DataDisplayPartial视图将包含上面的代码...类似的东西。