CODEWITHSUNDEEP
javascriptc#asp.netwebformsuser-controls
Blake Rivell
Blake Rivell

Reputation: 13875

Calling a client-side function that is inside of a UserControl from the Page level in ASP.NET Webforms

I have an ASP.NET UserControl sitting inside of an ASP.NET Page.

The ASP.NET UserControl has the following logic in it which works correctly:

Button in UserControl:

<asp:LinkButton runat="server" ID="lbCalculate" Text="Calculate" OnClientClick="SaveGridData(); return false;"></asp:LinkButton>

Here is the client-side function that is called: (also in UserControl)

function SaveGridData(sender, args) {
    var grid = $find('<%=grid1.ClientID%>');
        grid.get_batchEditingManager().saveChanges(grid.get_masterTableView());
    }

The client-side function ends up going into a grid event on the server called grid1_BatchEditCommand which saves all of the data in the grid (also in UserControl).

The above works perfect when the Calculate button which resides within the UserControl is clicked. However, I need to also run the same exact logic when a button on the Page that the UserControl resides in is clicked.

I started out by trying to expose a public function inside the user control called SaveGrid() which has a RegisterStartUpScript that calls SaveGridData(). Then on btnFromParentPage_OnClick event I call SaveGrid(). No luck.

public void SaveGrid()
{
    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "test", "SaveGridData();", true);
}

In Parent Page code behind:

protected void btnFromParentPage_Click(object sender, EventArgs e)
{
    userControl1.SaveGrid();
}

I also tried the following as a last resort:
<asp:Button ID="btnOnParentPage" runat="server" SkinID="Success" Text="Save & Close" OnClick="btnOnParentPage_Click" OnClientClick="SaveGridData(); return false;" />

The JavaScript function is called and it works, however now I can't access the OnClick server-side event of this button now because of the return false line and without the return false line the JavaScript function doesn't get called... There is a lot more logic that still needs to run.

Upvotes: 3

Views: 1524

Answers (3)

Blake Rivell
Blake Rivell

Reputation: 13875

Sorry if I mislead people with my question, but the primary issue was related to the fact that the line:

grid.get_batchEditingManager().saveChanges(grid.get_masterTableView());

In SaveGridData() calls a server-side event of the grid control on the page. This does not work well when you are also trying to go into a button click server-side event at the same time.

The solution:
Expose an event at the end of of the UserControl grid1_BatchEditCommand server-side event function in the UserControl. Then from the parent page tap into this event. The additional logic of the button on the parent page that needed to be ran, now just runs inside of the event rather than btnOnParentPage_Click.

Here is the flow:

  1. btnOnParentPage is clicked which only calls the client-side function SaveGridData() in the UserControl.

  2. This makes a call to run the grid1_BatchEditCommand event on the server (it works because there is no other server-side event being called at the same time)

  3. Then at the bottom of the BatchEditCommand code is the new Event that I exposed. The code on the parent page that is inside of this event (that I initially had in btnOnParentPage_Click) now runs.

Upvotes: 0

VDWWD
VDWWD

Reputation: 35524

You can simply navigate up or down a control tree to find the control and get it's ClientID.

var grid = $find('<%= userControl1.FindControl("grid1").ClientID %>');

For this to work the User Control has to be defined on the aspx page and not added dynamically from code behind. If it is added from code behind then you have to get the ClientID programatically also and put it on the page as a string.

Upvotes: 1

Racil Hilan
Racil Hilan

Reputation: 25351

JavaScript functions and variables are all public (unless you enclose them), so your SaveGridData() function is already accessible to the entire page without any additional code. Your other button on the page can easily access it using the same code you used for the Calculate button:

<asp:LinkButton runat="server" ID="btnFromParentPage" Text="Save & Close"
 OnClientClick="SaveGridData(); return false;"></asp:LinkButton>

EDIT: If you want to run the server code after the JavaScript function, simply remove the return false:

<asp:LinkButton runat="server" ID="btnFromParentPage" Text="Save & Close"
 OnClientClick="SaveGridData();"></asp:LinkButton>

Upvotes: 0

Related Questions