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.

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()" />