自定义视图引擎来解决 Javascript/PartialView 问题？答案

【问题标题】：Custom View Engine to solve the Javascript/PartialView Issue?自定义视图引擎来解决 Javascript/PartialView 问题？
【发布时间】：2010-09-07 21:09:28
【问题描述】：

我看到很多关于 PartialViews 和 Javascript 的问题：问题是 PartialView 需要 Javascript，例如呈现 jqGrid 的视图：

部分视图需要<div id="myGrid"></div> 然后是一些脚本：

<script>
$(document).ready(function(){
   $('#myGrid').jqGrid( { // config params go here 
   });
}
</script>

问题是如何包含 PartialView 而不用内联标签和多个 $(document).ready 标签乱扔页面。

我们还希望将多个 RenderPartial 调用的结果合并到一个 document.Ready() 调用中。

最后，我们遇到了 Javascript 库文件的问题，例如 JQuery 和 JQGrid.js，理想情况下它们应该包含在页面底部（就在 $.ready 块之前），并且理想情况下仅在适当的 PartialViews 出现时才包含页面上使用。

在搜索万维网时，似乎没有人解决过这个问题。一种潜在的方法可能是实现自定义视图引擎。我想知道是否有人有任何我可能错过的替代建议？

【问题讨论】：

您当前的实施遇到了什么问题？在页面底部的一个 $(document).ready() 函数中“分组”对 .jqGrid() 的调用时，您是否看到性能提升？
在页面上开始有数百个这样的调用之前，不会有明显的性能提升。在达到这一点之前，您可以将其简化为一个针对所有项目的 jQuery 调用，其中包含一个类选择器和一个参数化函数来执行 jiggery pokery。
“用内联标签和多个迭代页面” Jeesh。我认为你不会因为关心这些东西而让你的客户和用户更快乐。
我想在页面末尾包含对 JQuery 核心库和 JQGrid 以及其他一些适用的扩展的引用。这是一个众所周知的性能最佳实践。如果我在包含 jquery 之前引用 $(document).ready() 它自然会中断。我不太关心将这些请求放在一起，这样更好。

标签： javascript jquery asp.net-mvc

【解决方案1】：

这是一个很好的问题，当 JQuery 首次发布时，我的团队一直在努力解决这个问题。一位同事编写了一个页面基类，将所有文档就绪调用合并为一个，但这完全是浪费时间和客户的金钱。

没有必要将 $(document).ready() 调用合并为一个，因为它们将按照它们在页面上出现的顺序一个接一个地被调用。这是由于该方法的多播委托性质，它不会对性能产生重大影响。您可能会发现您的页面更易于维护，但 jQuery 的可维护性很少成为问题，因为它具有如此简洁的语法。

您能否详细说明想要合并它们的原因？我发现很多开发人员都是完美主义者，希望他们的标记绝对完美。相反，我发现当它对客户来说足够好，当它充分执行并正确显示时，我的时间最好花在交付下一个需求上。过去，我浪费了很多时间来格式化没人会看的 HTML。

您希望出现在页面底部的任何脚本都应该放在 ClientScriptManager.RegisterStartupScript 方法中，因为它呈现在页面底部。

http://msdn.microsoft.com/en-us/library/z9h4dk8y.aspx

编辑刚刚注意到您的问题是针对 ASP.NET MVC 的。我的答案更像是 ASP.NET 的答案，但就呈现的 html 而言，我的大多数 cmets 仍然是相关的。多个 document.ready 函数不是问题。

标准的 jQuery 方法是编写一个脚本来为多个元素添加行为。因此，向要包含网格的 div 添加一个类并在每个 div 上调用一个函数：

<script language="text/javascript">
     $(document).ready(function(){
         $('.myGridClass').each(function(){
               $(this).jqGrid( { 
                    // config params can be determined from 
                    //attributes added to the div element
                    var url = $(this).attr("data-url");

                });
          });
     }
</script>

您只需在您的页面和您刚刚拥有的部分视图中添加一次此脚本：

   <div class="myGridClass" data-url="http://whatever-url-to-be-used"></div>

注意 data-url 属性。这是 HTML5 语法，它将无法通过 HTML 4 验证。它仍然可以在 HTML 4 浏览器中工作。仅当您必须通过 html 验证器运行页面时才重要。我可以看到你already know about HTML5

【讨论】：

感谢您的回复。我喜欢你对 div 上的自定义属性的想法。不过，您回答的主要问题是 PartialView 不是独立的。它会有一些标记，但该标记依赖于视图之外其他地方的另一个脚本。
没错，但是任何将文档就绪功能组合成一个的方法也需要外部依赖项来跟踪和组合脚本。我的猜测是，您的页面上不会有太多的网格，每个一个脚本就足够了，但并不理想。如果您有一个包含许多控件的页面，那么单个脚本将是一个很好的论据。与许多事情一样，没有简单易行的答案。在标记的自包含性和可读性之间会有一个折衷。关于性能，您必须执行自己的测试。

【解决方案2】：

不漂亮，但关于你的最后一点，你不能在返回部分的操作中将适当的标签作为 ViewData 字典发送吗？

【讨论】：