Search code examples
javascriptc#asp.netcustom-server-controls

Custom ASP.Net Server Controls: How to call javascript function in parent page


I have built a number of custom server controls and routinely call javascript functions that are embedded into my controls. But I haven't been able to figure out how to create a property that the user of the control can add their own function to and their javascript function in the page containing the control will be called. I need to do something like OnClientClick for an asp:Button control.

Edit 1:

Thanks to the answer by @h2015 I have made progress on this.

In my control I create a public property for the user's script,

public string EditAddressScript
{
  set
  {
    string scriptName = "EditAddressScript";
    Type csType = this.GetType();
    ClientScriptManager csm = Page.ClientScript;

    string scriptText = string.Format("function EditAddress() {{{0}}}", value);

    csm.RegisterClientScriptBlock(csType, scriptName, scriptText, true);
  }
}

Then in the RenderContents section of my control I check whether a value has been specified for EditAddressScript and create a button if it has.

output.Write("<input id='btnEdit' type='button' value='Edit Address' style='font-size: 6pt;' onclick='EditAddress();' />");

The page that uses this control creates it dynamically so I do something like this,

ECFControls.DefendantAddressReview defendantAddress = new ECFControls.DefendantAddressReview();
divControls.Controls.Add(defendantAddress);
defendantAddress.ClientEditAddressScript = "alert('Hello, World');";

This works, but is far from optimal.

  • I would like to define the script in the aspx page and then just give my control the name of the script, rather than setting the value of EditAddressScript to the actual javascript code.
  • In the RenderContents section of the control I have the name of the script hardcoded I would like that to be dynamic.

Edit 2:

Okay, it looks like I was making this far more complicated than necessary. All that is needed is to create a script in the parent aspx page and set the event in the control to that script.

So this is what I have now

Add script to aspx page.

    function EditAddress() {
      alert("Hello, World");
    }

Create a property in the control to hold the value (_EditAddressScript is a private string variable in the control)

public string EditAddressScript
{
  set
  {
    _EditAddressScript = value;
  }
}

Then in the RenderContents section of the control I check whether a value has been specified for EditAddressScript and create a button if it has.

        if(_EditAddressScript.Trim() != "")
          output.Write(string.Format("<input id='btnEdit' type='button' value='Edit' style='font-size: 6pt;' onclick='{0}' />", _EditAddressScript));

Create the control like this,

    ECFControls.DefendantAddressReview defendantAddress = new ECFControls.DefendantAddressReview();
    divControls.Controls.Add(defendantAddress);
    defendantAddress.EditAddressScript = "EditAddress()";

If the control were created declaratively I could do this,

      <ECF:DefendantAddressReview ID="defendantAddressReview" runat="server" EditAddressScript="EditAddress()" />

Is there a better approach?

Thanks.


Solution

  • I explored two possible solutions in the edits to my original question. The second edit achieves the desired result. I wanted to have an optional property for a custom ASP.Net server control that would specify the name of a javascript function that the user of the control could place in the same page as the control. Here's how I did it.

    Add a public string property to the server control that defines the name of your javascript function. (_CustomJavascript is a private string variable in the control)

    public string CustomJavascript
    {
      set
      {
        _CustomJavascript = value;
      }
    }
    

    Then in the RenderContents section of the control check whether a value has been specified for _CustomJavascript and add the code to call that javascript if it has been. In my case I was creating a composite control and wanted an edit button to display that would call the user's javascript function.

    if(_CustomJavascript.Trim() != "")
          output.Write(string.Format("<input id='btnEdit' type='button' value='Edit' style='font-size: 6pt;' onclick='{0}' />", _CustomJavascript));
    

    All the user has to do is write their function.

    function EditAddress() {
      alert("Hello, World");
    }
    

    And give the name of their function to the CustomJavascript property when declaring the control.

      <cc:AddressReview ID="addressReview" runat="server" CustomJavascript="EditAddress()" />