2

What is the best way to configure jQuery UI (or any other HTML/JavaScript widget) from ASP.NET?

Currently, I wrapped the jQuery UI controls in ASP.NET UserControls and added properties to configure the UI widgets.

Configuring happens using the inline ASP syntax <%=SomePropertyName %>. For example, the DatePicker control:

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

In this example, ChangeMonthAllowed and ChangeYearAllowed would then be boolean properties on the ASP.NET UserControl.

Another option would be to add the JS using Page.ClientScript.RegisterClientScriptBlock: build the datepicker settings object and insert it into the page.

I dislike both ways however:

  • First way adds ASP.NET code to ascx files (or to aspx or to JS files)
  • Second way adds JavaScript to the ASP.NET code-behind

My question: Is there a clean(er) way of achieving JS/HTML widget configuration with code-behind properties?

1
  • No answers? This means everyone mixes code-behind and JavaScript? Or is there some other way to achieve this?
    – Laoujin
    Oct 18, 2012 at 10:44

2 Answers 2

2

You can inject your JavaScript directly to the head tag as follows:

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);

If you do not want your JavaScript to be built in the code-behind you can create a new txt or js file with merge fields as indicated below. When you build your script you can simply read the file and replace all merge fields with the required variable.

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

I like to use this method to inject my JavaScript file references when I have pages referencing a master page that is not in the same folder. This guarantees that my JavaScript file is always correctly referenced.

0

What I do now:

I need static .NET data in JavaScript

I create a T4 template that outputs a static JS file on build and have it included in my JS bundles.

I need dynamic .NET data in ASPX

In the aspx there is some JavaScript that injects the dynamic .NET data into static JS files.

A simple example:

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

This way all "dynamic .NET" configuration is injected into static (ie testable & reusable) JavaScript files.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.