C# 如何通过单击另一个Gridview中的链接按钮在jquery对话框中显示Gridview

我的gridview显示了BusRoute、BusNo和Action列。其中Action包含显示另一个gridview的链接按钮。我想在jquery对话框中显示它。我的代码是

                                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:LinkButton ID="lnkbtn" runat="server" OnClientClick="showDialog();">Shipment Status</asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>

                   </Columns>
                    </asp:GridView>
                </div>
            </div>  

ASPX代码：

                                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:LinkButton ID="lnkbtn" runat="server" OnClientClick="showDialog();">Shipment Status</asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>

                   </Columns>
                    </asp:GridView>
                </div>
            </div>  

第一个网格视图：

                                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:LinkButton ID="lnkbtn" runat="server" OnClientClick="showDialog();">Shipment Status</asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>

                   </Columns>
                    </asp:GridView>
                </div>
            </div>  

Jquery函数：

                                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:LinkButton ID="lnkbtn" runat="server" OnClientClick="showDialog();">Shipment Status</asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>

                   </Columns>
                    </asp:GridView>
                </div>
            </div>  

<script type="text/javascript">
    $("#lnkbtn").live("click",
         function showDialog() {

             $("#popup").dialog({
                 show: { effect: "fold", duration: 4000 },
                 hide: { effect: "fold", duration: 4000 },

             });
             return false;

         });

        $(document).click(function (event) {
            if (!$(event.target).closest('#popup').length) {
                if ($('#popup').is(":visible")) {
                    $('#popup').dialog('close');
                }
            }
        })

</script>

$（“#lnkbtn”）.live（“单击”，
函数showDialog（）{
$（“#弹出窗口”）。对话框({
显示：{效果：“折叠”，持续时间：4000}，
隐藏：{效果：“折叠”，持续时间：4000}，
});
返回false；
});
$（文档）。单击（函数（事件）{
if（！$（event.target）.closest（'#popup'）.length）{
如果（$（“#弹出”）是（“：可见”））{
$（'弹出'）。对话框（'关闭'）；
}
}
})

谢谢和问候

                                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:LinkButton ID="lnkbtn" runat="server" OnClientClick="showDialog();">Shipment Status</asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>

                   </Columns>
                    </asp:GridView>
                </div>
            </div>  

运行页面时，请查看呈现的html。除非您将

clientdmode

设置为Static，否则我怀疑您的按钮ID是

$（“#lnkbtn”）

，而更像是

$（“#gvu lnkbtn_0”）

                                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:LinkButton ID="lnkbtn" runat="server" OnClientClick="showDialog();">Shipment Status</asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>

                   </Columns>
                    </asp:GridView>
                </div>
            </div>  

设置

OnClientClick=“showDialog（）；”

或

$（“#lnkbtn”）.live（“单击”，函数showDialog（）{…}）

无需同时执行这两项操作

                                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:LinkButton ID="lnkbtn" runat="server" OnClientClick="showDialog();">Shipment Status</asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>

                   </Columns>
                    </asp:GridView>
                </div>
            </div>  

使用服务器控制按钮激活弹出窗口通常不起作用。尤其是启用GridView行选择时。我不知道您的第一个GridView是否启用了该功能，因为我只看到了列表的一部分。但是，当您试图显示弹出窗口时，往往会触发回发，这样您就永远看不到弹出窗口

                                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:LinkButton ID="lnkbtn" runat="server" OnClientClick="showDialog();">Shipment Status</asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>

                   </Columns>
                    </asp:GridView>
                </div>
            </div>  

另外，您的第二个弹出窗口包含一个gridview，它需要一个数据绑定。因此，在激活弹出窗口之前，您需要确保gridview中填充了数据

                                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:LinkButton ID="lnkbtn" runat="server" OnClientClick="showDialog();">Shipment Status</asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>

                   </Columns>
                    </asp:GridView>
                </div>
            </div>  

在Gridview中使用jquery显示弹出窗口的两种方法： 包含两个模板字段的GridView标记的一部分

                                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:LinkButton ID="lnkbtn" runat="server" OnClientClick="showDialog();">Shipment Status</asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>

                   </Columns>
                    </asp:GridView>
                </div>
            </div>  

    <asp:TemplateField HeaderText="Info">
      <ItemTemplate>
        <div>
          <div class="rs-icon rs-icon-info tooltip-marker" role="button">
          </div>
          <div id="ContactInfo" style="display:none;">
            <table id="tblContactDetail" class="ContactDetail Note">
              <tr>
                <td style="width: 80px">Name</td>
                <td style="width: 100%">
                  <asp:Literal ID="Literal1" runat="server" 
                       Text='<%# Eval("expert_name") %>' />
                </td>
              </tr>
              .
              .
              .
            </table>
          </div>
        </div>
      <ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText="CV">
      <ItemTemplate>
        <div id="divButtonViewCV" runat="server" 
             class="rs-icon rs-icon-cv" role="button" 
             onclick='<%# Eval("expert_cv_id", "ViewPDF({0})") %>' >
        </div>
      </ItemTemplate>
    </asp:TemplateField>

第二个模板字段用于激活弹出窗口。这是你必须小心回发的地方。我再次使用了一个图标样式的

，并将其视为一个简单的按钮，因为我添加了

onclick

                                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:LinkButton ID="lnkbtn" runat="server" OnClientClick="showDialog();">Shipment Status</asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>

                   </Columns>
                    </asp:GridView>
                </div>
            </div>  

单击此按钮将显示一个弹出窗口，以便您可以查看PDF格式的个人简历。PDF以varbinary格式存储在我们的数据库中。在这里，我使用另一个jquery插件（）将PDF显示为页面上的弹出窗口

                                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:LinkButton ID="lnkbtn" runat="server" OnClientClick="showDialog();">Shipment Status</asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>

                   </Columns>
                    </asp:GridView>
                </div>
            </div>  

在下面的

ViewPDF（）

函数中，请注意，我们通过设置

cancelBubble=true

（对于旧版IE）或调用stopPropagation（）（所有其他浏览器）来防止GridView的点击事件“冒泡”

                                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:LinkButton ID="lnkbtn" runat="server" OnClientClick="showDialog();">Shipment Status</asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>

                   </Columns>
                    </asp:GridView>
                </div>
            </div>  

在此代码中，colorbox设置一个

iframe

，并将href参数传递给它的

src

属性。我正在调用一个.ashx页面，这是一个asp通用处理程序，它允许我们在没有标准网页开销的情况下提供其他类型的内容。这可以很容易地配置为接受一个独立的.aspx页面，您可以在其中放置辅助网格

                                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:LinkButton ID="lnkbtn" runat="server" OnClientClick="showDialog();">Shipment Status</asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>

                   </Columns>
                    </asp:GridView>
                </div>
            </div>  

    // This plain object is used by the call to colorbox(), please 
    // refer to colorbox documentation for details.
    var colorboxDataExpertCV = {
        height: "85%",
        width: 900,
        opacity: .30,
        fixed: true,
        iframe: true,
        returnFocus: false,
        href: ''
    }

    // ========================================================
    // In the Template above, the onclick code:
    //    onclick='<%# Eval("expert_cv_id", "ViewPDF({0})") %>'
    //
    // Renders to: 
    //    onclick="ViewPDF(12345)"
    //
    //  PdfHandlerExpertsCV.ashx is an GenericHandler that retrieves
    //    the CV from our database and writes the byte array to the 
    //    colorbox iframe as an "application/pdf" content type which 
    //    triggers native browser pdf management either by internal 
    //    viewer or installed PDF plugin
    // ========================================================
    function ViewPDF( p ) {
        if ( event.stopPropagation )
            event.stopPropagation();
        else
            event.cancelBubble = true;

        if ( p && p > 0 ) {
            colorboxDataExpertCV.href = "/PdfHandlerExpertsCV.ashx?cvid=" + p;
            $.colorbox( colorboxDataExpertCV );
        }
        return false;
    }

HTML（.aspx）

                                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:LinkButton ID="lnkbtn" runat="server" OnClientClick="showDialog();">Shipment Status</asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>

                   </Columns>
                    </asp:GridView>
                </div>
            </div>  

要实现对话框的jQuery：

变量对话框选项={
自动打开：错误，
附件：“#dialogContainer”，
莫代尔：是的，
高度：“自动”，
宽度：“自动”，
标题：“对话标题”，
closeOnEscape：没错，
按钮：{
取消：函数（）{
$（此）.dialog（“关闭”）；
}
}
};
$（函数（）{
$（“.dialog marker”）。在（“单击”，函数（）{
var d=$（this.next（“div”）.first（）对话框（dialogOptions）；
d、 对话框（“打开”）；
} );
} );

你能告诉我怎么做吗？让我说清楚一点，我需要绑定第二个Gridview中的数据，并在Jquery对话框中显示此Gridview 2。此数据将在Gridview 1中的linkbutton的单击事件中绑定并显示在对话框中。请参阅我的帖子的附录。我尝试绑定行数据绑定中的数据，但在第二个Gridview中仍然没有显示数据，而pop正在显示它不会发生当它在弹出窗口中时。它将/应该在

GridView1

的数据绑定（）期间发生。您需要确保在设置DataSource2参数后调用

GridView2.Databind（）

。记住，所有这些都发生在GridView1 RowDatabound事件期间。