How to: Add Client Script Dynamically to ASP.NET Web Pages

Using server code, you can add client script to a page. Creating client script in server code is useful when the contents of the client script depend on information that is not available until run time. Adding client script to the page dynamically is also useful when you want the client script to execute in the following situations:

• When the page has finished loading

• When users submit the page

  Note

  You can also add client events, such as onmouseover and onkeyup, to individual controls. For details, see How to: Add Client Script Events to ASP.NET Web Server Controls.

To add client script to an ASP.NET Web page dynamically

• In server code, call one of the methods listed in the following table.

  Method	Description
  RegisterClientScriptBlock	Adds a script block to the top of the page. You create the script as a string, and then pass it to the method, which adds it to the page. You can use this method to insert any script into the page. Note that the script might be rendered into the page before all the elements are finished; therefore, you might not be able to reference all the elements on the page from the script.
  RegisterClientScriptInclude	Similar to the RegisterClientScriptBlock method, but adds a script block that references an external .js file. The include file is added before any other dynamically added script; therefore, you might not be able to reference some elements on the page.
  RegisterStartupScript	Adds a script block into the page that executes when the page finishes loading but before the page's onload event is raised. The script is typically not created as an event handler or function; it generally includes only the statements you want to execute once.
  RegisterOnSubmitStatement	Adds script that executes in response to the page's onsubmit event. The script is executed before the page is submitted, and gives you an opportunity to cancel the submission.

  The following code example shows how to add client script to a page that executes when the user clicks a button that posts the page back to the server. The client script displays a pop-up window requesting the user to confirm the postback.

  Protected Sub Page_Load(ByVal sender As Object, _
          ByVal e As System.EventArgs)
      Dim scriptText As String
      scriptText = "return confirm('Do you want to submit the page?')"
      ClientScript.RegisterOnSubmitStatement(Me.GetType(), _
          "ConfirmSubmit", scriptText)
  End Sub
  

protected void Page_Load(Object sender, EventArgs e)
{
    String scriptText = 
        "return confirm('Do you want to submit the page?')";
    ClientScript.RegisterOnSubmitStatement(this.GetType(), 
        "ConfirmSubmit", scriptText);
}

The following code example shows how to add dynamically generated client code to the page. The code checks whether a check box named checkDisplayCount is selected. If so, the code performs the following tasks:

• It creates a client script function that uses a span element to display the character count in a TextBox control named TextBox1.

• It adds a client event to the TextBox control.

• It generates the span element.

  The code assumes that the page contains a check box named checkDisplayCount with its AutoPostBack property set to true and a PlaceHolder control named PlaceHolder1.

  Protected Sub Page_Load(ByVal sender As Object, _
          ByVal e As System.EventArgs)
      If checkDisplayCount.Checked Then
          Dim scriptText As String = ""
          scriptText &= "function DisplayCharCount(){"
          scriptText &= "   spanCounter.innerText = " & _
              "document.forms[0].TextBox1.value.length"
          scriptText &= "}"
          ClientScript.RegisterClientScriptBlock(Me.GetType(), _
              "CounterScript", scriptText, True)
          TextBox1.Attributes.Add("onkeyup", "DisplayCharCount()")
          Dim spanLiteral As New LiteralControl()
          spanLiteral.Text = "<span id=""spanCounter""></span>"
          PlaceHolder1.Controls.Add(spanLiteral)
      End If
  End Sub
  

  void Page_Load(object sender, EventArgs e)
  {
      if(checkDisplayCount.Checked)
      {
          String scriptText = "";
          scriptText += "function DisplayCharCount(){";
          scriptText += "   spanCounter.innerText = " + 
              " document.forms[0].TextBox1.value.length";
          scriptText += "}";
          ClientScript.RegisterClientScriptBlock(this.GetType(), 
             "CounterScript", scriptText, true);
          TextBox1.Attributes.Add("onkeyup", "DisplayCharCount()");
          LiteralControl spanLiteral = new 
              LiteralControl("<span id=\"spanCounter\"></span>");
          PlaceHolder1.Controls.Add(spanLiteral);
      }
  }
  

See Also

Tasks

How to: Add Client Script Events to ASP.NET Web Server Controls

Concepts

Client Script in ASP.NET Web Pages

Implementing Client Callbacks Programmatically Without Postbacks in ASP.NET Web Pages