【问题标题】:How to Display a Gridview inside jquery dialog by clicking a link button inside another gridview如何通过单击另一个gridview中的链接按钮在jquery对话框中显示Gridview
【发布时间】:2015-09-03 20:13:16
【问题描述】:

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

ASPX 代码:

第一个网格视图:

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

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

第二个网格视图:

            <div class="gridview_stop"  id="popup">
                <asp:GridView ID="Stops" runat="server" AutoGenerateColumns="False" CellPadding="6" Width="190px">
                    <Columns>
                        <asp:BoundField HeaderText="Bus Stop" DataField="StopName" HeaderStyle-BackColor="#006B89">
                            <HeaderStyle BackColor="#006B89" Font-Size="18px" Font-Bold="false"></HeaderStyle>
                            <ItemStyle BackColor="#E0E0E0" HorizontalAlign="Center" />
                        </asp:BoundField>
                    </Columns>

                </asp:GridView>
            </div>

文件背后的代码:

protected void search_Click(object sender, EventArgs e)
{
    DataSet ds = new DataSet();
    SqlDataAdapter adapter = new SqlDataAdapter();
    con.Open();
    SqlCommand cmd = new SqlCommand("spGetRoutes", con);
    cmd.CommandType = System.Data.CommandType.StoredProcedure;
    cmd.Parameters.AddWithValue("@BusStop1", Source.Text);
    cmd.Parameters.AddWithValue("@BusStop2", Destination.Text);
    adapter.SelectCommand = cmd;
    adapter.Fill(ds);
    adapter.Dispose();
    cmd.Dispose();
    con.Close();
    if (ds.Tables[0].Rows.Count > 0)
    {
        Route.DataSource = ds.Tables[0];
        Route.DataBind();
        Stops.DataSource = null;
        Stops.DataBind();
        Lblmsg.Text = "";
    }
    else
    Lblmsg.Text = "No Direct Bus Between These Stop";
    Lblmsg.ForeColor = Color.WhiteSmoke;
    Route.Dispose();
    Route.DataBind();
    Stops.Dispose();
    Stops.DataBind();
}
protected void Route_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        e.Row.Attributes["onmouseover"] = "this.style.backgroundColor='aquamarine';";
        e.Row.Attributes["onmouseout"] = "this.style.backgroundColor='white';";
        e.Row.ToolTip = "Click last column for selecting this row.";
    }
}


protected void OnSelectedIndexChanged(object sender, EventArgs e)
{
    string Name = Route.SelectedRow.Cells[0].Text;

    SqlDataAdapter adapter1 = new SqlDataAdapter();

    DataSet ds1 = new DataSet();
    string connetionString = "Data Source=.;Initial Catalog=BusService;uid=sa;Password=Murli@925";
    SqlConnection connection = new SqlConnection(connetionString);
    connection.Open();
    SqlCommand cmd = new SqlCommand("spGetStops", connection);
    cmd.CommandType = System.Data.CommandType.StoredProcedure;
   int BusNo= Convert.ToInt32(Name);
    cmd.Parameters.AddWithValue("@BusNo",BusNo);

    adapter1.SelectCommand = cmd;
    adapter1.Fill(ds1);
    adapter1.Dispose();
    cmd.Dispose();
    connection.Close();
    Stops.DataSource = ds1.Tables[0];
    Stops.DataBind();
}    

jquery函数:

<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>

感谢和问候。

【问题讨论】:

    标签: c# jquery asp.net gridview


    【解决方案1】:
    1. 在运行页面时查看呈现的 html。除非您将 ClientIDMode 设置为 Static 我怀疑您的按钮 ID 是 $("#lnkbtn") 但更像是 $("#gvWhatever_lnkbtn_0")

    2. 设置OnClientClick="showDialog();" $("#lnkbtn").live("click", function showDialog(){...}) 两者都不需要。

    3. 使用服务器控制按钮激活弹出窗口通常不起作用。特别是如果启用了 GridView 行选择。我不知道您的第一个 GridView 是否启用了该功能,因为我只看到列表的一部分。但往往会发生的是,您在尝试显示弹出窗口时触发回发,因此您永远看不到弹出窗口。

    4. 您的第二个弹出窗口还包含一个需要数据绑定的网格视图。所以你需要在激活弹出窗口之前确保gridview填充了数据

    在 Gridview 中使用 jquery 显示弹出窗口的两种方法:

    带有 2 个 TemplateField 的 GridView 标记的一部分

        <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>
    

    在上面的标记中,我设置了两种“弹出”样式。第一个模板使用jQueryUI ToolTip widget,它在鼠标悬停/移出时激活。这很好,因为它不需要点击,这意味着不用担心回发会破坏作品。这里有趣的是我使用div 作为按钮。

    它是如何工作的: 带有 .tooptip-marker 类的 div 被设置为激活一个 jqueryui 工具提示,该工具提示将通过抓取激活按钮的兄弟 div 的内部 html。请注意,此 div 的样式为 display:none; 以便内容可用于工具提示但隐藏以便主 GridView 正常显示。

    为简洁起见,我只包含了&lt;div id="ContentInfo"&gt; 的一部分内容。但它真的可以包含任何东西。在我的代码中,它是一个简单的 &lt;table&gt; 包含联系信息字段(使用绑定的 &lt;asp:Literal&gt; 控件),它们是主要 GridView 数据源的一部分。

    但这可能只是一个嵌入的 GridView,它有自己的数据源,绑定在主 GridView 的 OnRowDatabound 事件中。

    以下 jquery 设置小部件。有关更完整的文档,请参阅 jQueryUI ToolTip widget

        $( function() {
            $( document ).tooltip( {
                items: ".tooltip-marker",
                content: function() {
                    return $( this ).next().html();
                },
                position: {
                    my: "left top",
                    at: "right+5 top-5"
                }
            } )
        } );
    

    第二个模板字段用于激活弹出窗口。这是您必须小心回发的地方。我再次使用&lt;div&gt; 样式作为图标并将其视为简单按钮,因为我添加了onclick

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

    在下面的ViewPDF() 函数中请注意,我们通过设置cancelBubble = true(对于旧版IE)或调用stopPropagation()(所有其他浏览器)来防止点击事件“冒泡”到GridView。

    在这段代码中,colorbox 设置了一个iframe 并将href 参数传递给它的src 属性。我正在调用一个 .ashx 页面,该页面是一个 asp 通用处理程序,它允许我们提供其他类型的内容而无需标准网页开销。这可以很容易地配置为接受一个独立的 .aspx 页面,您可以在其中放置辅助网格。

        // 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;
        }
    

    附录

    让我说得更清楚,我需要在 2nd Gridview 中绑定数据和 在 Jquery 对话框中显示此 Gridview2。此数据将被绑定并 从内部链接按钮的单击事件显示在对话框中 网格视图1

    正如我上面所说,您不能在不引入更多复杂性的情况下绑定 GridView(服务器端事件)然后弹出 jquery ui 对话框(客户端事件)。您必须确保在您准备好点击打开对话框的按钮时,弹出窗口所需的所有数据都可用。

    完成此操作的最简单方法是将 GridView2 嵌入到 GridView1 中并同时处理所有绑定。它既不美观也不高效,并且根据每个项目中显示的项目数量,可能会减慢页面速度。但是,如果您只有几行,那应该是可以接受的。

    1. GridView2DataSource2 嵌入&lt;ItemTemplate&gt;&lt;TemplateField&gt;GridView1
    2. Gridview1RowDataBound 事件中使用GridView1 中的适当行字段或数据键字段绑定GridView2,然后调用GridView2.DataBind()
    3. 向同一个 TemplateField 添加一个元素
    4. 请参阅jquery dialog modal form example,它显示了如何通过单击按钮触发对话框。在您的情况下,将第二个 GridView 替换为示例中的表单。

    重要请注意,gridview 行项目 id 会“损坏”,因此您不应在 jquery 调用中使用 id,而应使用基于元素名称和类标记的 jquery 选择器,即:@987654355 @ 对于这样定义的按钮:&lt;button class="marker"&gt;

    附录:2015 年 6 月 24 日

    CSS(&lt;head&gt; 标签)

    <link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui.css" />
    <script type="text/javascript" src="Scripts/jquery-2.1.4.min.js"> </script>
    <script type="text/javascript" src="Scripts/jquery-ui-1.11.4.min.js"> </script>
    
    <style>
        .btn_styling {
            text-align: center;
            width: 32px;
            margin: 2px;
            cursor: pointer;
            border: 1px solid gray;
            border-radius: 3px; 
    
           /* add a background image to the div 
              to make the div look like a button */ 
           /* background-image: url('...')  */
        }
        .ui-dialog-titlebar-close {
            display: none;
        }
    </style>
    

    HTML (.aspx)

    <form id="form1" runat="server">
      <div style="width: 400px;">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
          DataKeyNames="user_id"
          DataSourceID="SqlDataSource1">
          <Columns>
            <asp:BoundField DataField="user_name" HeaderText="User Name" SortExpression="user_name" />
            <asp:TemplateField HeaderText="Info">
              <ItemTemplate>
                <div id="divButton" runat="server" class="btn_styling dialog-marker" title="This could also have been a <button> element or maybe an <img> element...anything really">X</div>
                <div style="display: none;">
                  <asp:GridView ID="GridView2" runat="server"
                    AutoGenerateColumns="False"
                    DataSourceID="SqlDataSource2">
                    <Columns>
                      <asp:BoundField DataField="email" HeaderText="Email" SortExpression="email" />
                      <asp:BoundField DataField="add_edit_date" HeaderText="Date Added" SortExpression="add_edit_date" DataFormatString='{0:dd-MMMM, yyyy}'/>
                      <asp:BoundField DataField="add_edit_by" HeaderText="Added By" SortExpression="add_edit_by" />
                    </Columns>
                  </asp:GridView>
                  <asp:SqlDataSource ID="SqlDataSource2" runat="server" 
                    ConnectionString="<%$ ConnectionStrings:YourConnectionString %>"
                    SelectCommand="SELECT email, add_edit_date, add_edit_by FROM tbl_users WHERE (user_id = @user_id)">
                    <SelectParameters>
                      <asp:Parameter Name="user_id" />
                    </SelectParameters>
                  </asp:SqlDataSource>
                </div>
              </ItemTemplate>
            </asp:TemplateField>
          </Columns>
          <RowStyle BorderColor="Blue" BorderStyle="Solid" BorderWidth="1px" />
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
          ConnectionString="<%$ ConnectionStrings:YourConnectionString %>"
          SelectCommand="SELECT top 10 user_id, user_name from tbl_users">
        </asp:SqlDataSource>
      </div>
      <div id="dialogContainer">
      </div>
    </form>
    

    代码隐藏(VB):

    Private Sub GridView1_RowDataBound(sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
      If e.Row.RowType = DataControlRowType.DataRow Then
        Dim gv2 As GridView = DirectCast(e.Row.FindControl("GridView2"), GridView)
        Dim sds As SqlDataSource = DirectCast(e.Row.FindControl("SqlDataSource2"), SqlDataSource)
    
        sds.SelectParameters("user_id").DefaultValue = GridView1.DataKeys(e.Row.RowIndex).Value
        gv2.DataBind()
      End If
    End Sub
    

    jQuery实现Dialog:

    <script type="text/javascript">
        var dialogOptions = {
            autoOpen: false,
            appendTo: "#dialogContainer",
            modal: true,
            height: "auto",
            width: "auto",
            title: "Dialog Title",
            closeOnEscape: true,
            buttons: {
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
        };
    
        $( function() {
            $( ".dialog-marker" ).on( "click", function() {
                var d = $( this ).next( "div" ).first().dialog( dialogOptions );
                d.dialog( "open" );
            } );
        } );
    </script>
    

    【讨论】:

    • 你能告诉我怎么做吗?
    • 让我说得更清楚一点,我需要在 2nd Gridview 中绑定数据并在 Jquery 对话框中显示此 Gridview2。此数据将从 Gridview1 内的链接按钮的单击事件中绑定并显示在对话框中.
    • 见我帖子的附录
    • 我尝试在绑定的行数据上绑定数据,但是在显示 pop 时它仍然没有在第二个 gridview 中显示数据
    • 它不会发生它在弹出窗口中。这将/应该在GridView1 的 Databind() 期间发生。您需要确保在设置 DataSource2 参数后调用GridView2.Databind()。请记住,所有这些都发生在 GridView1 RowDatabound 事件期间。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多