繁体   English   中英

从 ASP.NET Webforms 中的页面级别调用 UserControl 内部的客户端函数

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

我有一个位于 ASP.NET 页面内的 ASP.NET UserControl。

ASP.NET UserControl 具有以下正常工作的逻辑:

用户控件中的按钮:

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

这是调用的客户端函数:(也在 UserControl 中)

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

客户端函数最终进入名为 grid1_BatchEditCommand 的服务器上的网格事件,该事件将所有数据保存在网格中(也在 UserControl 中)。


当单击驻留在 UserControl 中的计算按钮时,上述工作完美无缺。 但是,当单击 UserControl 所在的页面上的按钮时,我还需要运行完全相同的逻辑。

我首先尝试在名为 SaveGrid() 的用户控件中公开一个公共函数,该函数具有一个调用 SaveGridData() 的 RegisterStartUpScript。 然后在 btnFromParentPage_OnClick 事件上我调用 SaveGrid()。 没运气。

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

在父页面代码后面:

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

我还尝试了以下作为最后的手段:
<asp:Button ID="btnOnParentPage" runat="server" SkinID="Success" Text="Save & Close" OnClick="btnOnParentPage_Click" OnClientClick="SaveGridData(); return false;" />

JavaScript 函数被调用并且它可以工作,但是现在我无法访问此按钮的 OnClick 服务器端事件,因为返回假行并且没有返回假行,JavaScript 函数不会被调用......那里还有更多的逻辑需要运行。

您可以简单地向上或向下导航控件树以找到控件并获取它的ClientID

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

为此,用户控件必须在 aspx 页面上定义,而不是从后面的代码中动态添加。 如果它是从后面的代码中添加的,那么您还必须以编程方式获取 ClientID 并将其作为字符串放在页面上。

JavaScript 函数和变量都是公开的(除非你将它们括起来),所以你的SaveGridData()函数已经可以被整个页面访问,无需任何额外的代码。 页面上的另一个按钮可以使用与用于计算按钮的相同代码轻松访问它:

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

编辑:如果您想在 JavaScript 函数之后运行服务器代码,只需删除return false

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

对不起,如果我的问题误导了人们,但主要问题与以下事实有关:

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

在 SaveGridData() 中调用页面上网格控件的服务器端事件。 当您还尝试同时进入按钮单击服务器端事件时,这不起作用。

解决方案:
在 UserControl 中的 UserControl grid1_BatchEditCommand 服务器端事件函数的末尾公开一个事件。 然后从父页面点击此事件。 需要运行的父页面上按钮的附加逻辑现在只在事件内部运行,而不是 btnOnParentPage_Click。

这是流程:

  1. btnOnParentPage 被单击,它只调用 UserControl 中的客户端函数 SaveGridData()。

  2. 这会调用在服务器上运行 grid1_BatchEditCommand 事件(它起作用是因为没有同时调用其他服务器端事件)

  3. 然后在 BatchEditCommand 代码的底部是我公开的新事件。 此事件内的父页面上的代码(我最初在 btnOnParentPage_Click 中拥有)现在运行。

我有类似的情况,可以分享代码吗?

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM