javascript - ASP.net MVC - View 和 jQuery 最佳实践

Question

我试图找出在 MVC 应用程序中使用 jQuery 的最佳实践。具体来说，我想知道我应该怎么做，以免我的所有 View 都被单独的 document.ready 语句弄乱。

举个例子:

我有以下观点:

/Views/Shared/_Layout.cshtml
/Views/Home/Index.cshtml
/Views/Home/_Dialog.cshtml
/Views/Home/_AnotherDialog.cshtml

我有一个 Controller 操作将呈现主页/索引 View ，它使用布局并呈现两个局部 View (或编辑器模板、显示模板等)。此一个 Controller Action 已呈现 4 个或更多 View 。每个 View 都使用一些 jquery document.ready 代码。

目前，我在每个 View 的底部都有代码:

// In Index
<script type="text/javascript">
    $(function() {
        $('#tabs').tabs()
    });
</script>

// In _Dialog
<script type="text/javascript">
    $(function() {
        $('#some-dialog').dialog( ... );
    });
</script>

我知道这不是一个很好的做法，因为在我的小项目中它已经变得难以管理了。当我有大量页面都需要一些 jQuery/javascript 初始化代码时，可以遵循哪些良好做法？

Answer 1

您可以按照 Telerik 使用他们的 javascript 注册器所做的事情来做一些事情。基本上，让这个注册商在您的 View 模型中可用。在最简单的层面上，它所要做的就是跟踪添加到它的字符串:

public class JavascriptRegistrar
{
    private StringBuilder jsBuilder_ = new StringBuilder();

    public Add(string js)
    {
        builder.Append(js).Append('\n');
    }


    public string ToString()
    {
        return "<script type=\"text/javascript\">" + jsBuilder_.ToString() + "\n</script>";
    }
 }

您的部分 View 将在渲染时添加到此:

<h1>In my view!</h1>

@Model.Registrar.Add("$function() { /* ... */ }")

最后，在主视图的底部，完成后:

@Model.Registrar.ToString()

这将写出它在渲染期间收集的所有 javascript。