最佳实践:如何使用jQuery配置ASP.NET用户界面

Question

从jQuery配置ASP.NET UI (或任何其他HTML/JavaScript小部件)的最佳方法是什么？

目前，我将jQuery UI控件封装在ASP.NET UserControls中，并添加了属性来配置UI小部件。

使用内联ASP语法<%=SomePropertyName %>进行配置。例如，DatePicker控件：

$("#yourDatePicker").datepicker({
     changeMonth: <%=ChangeMonthAllowed%>, 
     changeYear: <%=ChangeYearAllowed%>
});

在本例中，ChangeMonthAllowed和ChangeYearAllowed将是ASP.NET UserControl上的布尔属性。

另一个选项是使用Page.ClientScript.RegisterClientScriptBlock添加JS :构建datepicker设置对象并将其插入到页面中。

然而，我不喜欢这两种方式：

• 第一种方法是将ASP.NET代码添加到ascx文件(或aspx或JS文件)中。
• 第二种方法是将JavaScript添加到ASP.NET代码背后。

我的问题是:是否有一种用代码隐藏属性实现JS/HTML小部件配置的干净(Er)方法？

Answer 1

我现在做的是：

I需要JavaScript中的静态.NET数据

我创建了一个T4模板，该模板在构建时输出一个静态JS文件，并将其包含在我的JS包中。

I需要ASPX中的动态.NET数据

在aspx中，有一些JavaScript将动态.NET数据注入静态JS文件。

一个简单的例子：

MyProject.datePickers.Add({
    domSelector: "#yourDatePicker",
    properties: {
       changeMonth: <%=ChangeMonthAllowed%>, 
       changeYear: <%=ChangeYearAllowed%>
    }
});

这样，所有“动态.NET”配置都被注入到静态(即可测试和可重用) JavaScript文件中。

Answer 2

您可以将JavaScript直接注入head标记，如下所示：

VB.NET

    Dim script As New StringBuilder
    'Build script         
    Dim scriptTags As New Literal
    scriptTags.Text = script.ToString()
    Page.Header.Controls.Add(scriptTags)

C#

    StringBuilder script = New StringBuilder();
    //Build script
    Literal scriptTags = new Literal();
    scriptTags.Text = script.ToString();
    Page.Header.Controls.Add(scriptTags);

如果您不希望您的JavaScript构建在代码背后，您可以创建一个新的txt或js文件，合并字段如下所示。当您构建脚本时，您可以简单地读取文件并用所需的变量替换所有合并字段。

    $("#yourDatePicker").datepicker({
         changeMonth: %%ChangeMonthAllowed%%, 
         changeYear: %%ChangeYearAllowed%%
    });

当有页引用不在同一文件夹中的母版页时，我喜欢使用此方法注入我的JavaScript文件引用。这保证了我的JavaScript文件总是被正确引用。