如何避免编写重复的 JavaScript 和 Razor 代码？答案

【问题标题】：How do you avoid writing duplicated JavaScript and Razor code?如何避免编写重复的 JavaScript 和 Razor 代码？
【发布时间】：2012-08-28 21:42:39
【问题描述】：

在我的第一个真正的 MVC 应用程序中，我几乎在每一页都遇到了这个问题。我确定我错过了什么。

我目前正在处理的一个例子：

该页面有多个下拉菜单（过滤器）和一个网格。我有填充过滤器的剃须刀代码，网格最初使用数据的视图模型。一切正常，代码干净，页面加载完美。

现在，当我选择不同的过滤器选项时，这可能会改变其他一些下拉菜单，并且肯定会改变网格中的数据。因此，我正在对我的一个控制器方法进行 ajax 调用以获取新数据。然后我必须在 JS 中重建网格以及任何已更改的下拉菜单。这只是复制 Razor 代码为初始页面加载所做的工作。

如果我在 Razor 中添加了类、属性等，这也必须在 JS 中复制。

一定有我遗漏的模式。在这一点上，我什至不在乎更新是否使用 ajax 动态完成。如果我可以在 Razor 中通过“回发”完成所有这些工作，那很好。任何可以避免这种大量代码重复的方法。

【问题讨论】：

【解决方案1】：

您可以创建一个 PartialView，它与您的初始页面加载完全一样。

public ViewResult Details(int id)
{
    DetailsModel model = new DetailsModel...

    return View(model);
}

在上述情况下，您可以让FilterModel 成为DetailsModel 的成员，无论哪种方式，如果您需要处理一些关于要呈现的内容的数据，您都可以创建一个部分操作方法：

public PartialViewResult Filters(int someParams...)
{
    FilterModel model = new FilterModel...
    return PartialView("Filters"
}

然后像这样从您的视图中调用它：

<div id="filters">
    @Html.Action("Filters", someParams)
</div>

如果FilterModel 是DetailsModel 的成员，则为：

<div id="filters">
    @Html.Partial("Filters", Model.FilterModel)
</div>

当您需要在客户端更新它时，您可以再次请求该部分：

var filterUrl = "@Html.ActionLink("Filters")";

$(...).change(function(){
    $("#filters").load(filterUrl);
});

【讨论】：