单击gridview行时重新加载特定的div

Question

我有一个gridview，我想要做的是当我单击行时获取我想要重新加载特定div 的行的值。有没有办法我可以做到这一点？请帮忙。谢谢。

这是我目前所拥有的

<asp:UpdatePanel ID="UpdatePanel5" runat="server">
  <ContentTemplate>
    <asp:Label ID="graph_val" runat="server"></asp:Label>
  </ContentTemplate>
</asp:UpdatePanel>

<asp:UpdatePanel ID="UpdatePanel6" runat="server">
  <ContentTemplate>
    <div class = "prg-dte">
      <asp:Label ID="Label1" class = "srch-res" runat="server" >
      </asp:Label>
    </div>
    <div class = "table-grid">
      <asp:GridView ID="GridView1" class = "grd-view table table-hover" OnRowDataBound="GridView1_RowDataBound"  OnSelectedIndexChanged="Gridview1_OnSelectedIndexChanged" runat="server">
      </asp:GridView>                                                
    </div>
  </ContentTemplate>
</asp:UpdatePanel>

这是我要重新加载的 div

 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
      <div id="chartContainer" runat="server" style="height: 150px; width: 100%;">
      </div>
    </ContentTemplate>
  </asp:UpdatePanel>

这是我获取行值的 onclick 函数

Protected Overrides Sub Render(writer As HtmlTextWriter)
    For Each r As GridViewRow In GridView1.Rows
        If r.RowType = DataControlRowType.DataRow Then
            r.Attributes("onmouseover") = "this.style.cursor='pointer';"
            r.Attributes("onmouseout") = "this.style.textDecoration='none';"
            r.ToolTip = "Click to select row"
            r.Attributes("onclick") = Me.Page.ClientScript.GetPostBackClientHyperlink(GridView1, "Select$" & r.RowIndex, True)
        End If
    Next
    MyBase.Render(writer)
End Sub

这是我获取饼图值的 javascript

var pie = 0;
function changepie(val) {
    pie = val;

function pageLoad() {
    var grpval = document.getElementById('<%=graph_val.ClientID%>');
    pie = grpval.innerText;
    alert(pie)
}

如果我得到正确的值，警报派只是我的调试方式。 我认为我做错了什么我实际上想让gridview行值将其存储在标签中并传入饼图，但我无法使其工作。

 window.onload = function () {
        var chart = new CanvasJS.Chart("chartContainer",
        {

            animationEnabled: true,
            animationDuration: 1300,
            legend: {
                verticalAlign: "bottom",
                horizontalAlign: "center"
            },
            data: [
            {
                indexLabelFontSize: 11,
                indexLabelFontFamily: "Monospace",
                indexLabelFontColor: "darkgrey",
                indexLabelLineColor: "darkgrey",
                indexLabelPlacement: "outside",
                type: "pie",
                background: "#FB404B",


                toolTipContent: "{y} - <strong>#percent%</strong>",
                dataPoints: [
                //{ y: pie, legendText: "" , indexLabel: "PlayStation 3" },
                //{ y: 1, legendText: "" , indexLabel: "PlayStation 3" },

                    { y: pie, name: "Total Load", legendText: "Total Load" },
                    { y: 1, name: "Potential Load", legendText: "Potential Load" },
                ]
            }
            ]
        });
        //alert(pie);
        chart.render();
    }

这就是我从标签获取饼图值的方式

Protected Sub Gridview1_OnSelectedIndexChanged(sender As Object, e As EventArgs) Handles GridView1.SelectedIndexChanged
    Dim percent As String = GridView1.SelectedRow.Cells(6).Text
    graph_val.Text = percent
    ClientScript.RegisterClientScriptBlock(Me.[GetType](), "Script", "changepie(" + graph_val.Text + ");", True)
End Sub 

Answer 1

我认为 UpdatePanel 是您所需要的。

您必须将该 div 包含在 UpdatePanel 中，这样它才能部分更新/刷新/重新加载（任何您想调用的内容）该 div。

语法：

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="chartContainer" runat="server" style="height: 150px; width: 100%;"></div>
</ContentTemplate>
</asp:UpdatePanel>

点击：

Protected Overrides Sub Render(writer As HtmlTextWriter)
        For Each r As GridViewRow In GridView1.Rows
            If r.RowType = DataControlRowType.DataRow Then
                r.Attributes("onmouseover") = "this.style.cursor='pointer';"
                r.Attributes("onmouseout") = "this.style.textDecoration='none';"
                r.ToolTip = "Click to select row"
                r.Attributes("onclick") = Me.Page.ClientScript.GetPostBackClientHyperlink(GridView1, "Select$" & r.RowIndex, True)
            End If
        Next
    UpdatePanel1.Update() 'This will update the the contents inside the UpdatePanel
        MyBase.Render(writer)
End Sub

由于您提到 div 用作饼图的容器，我认为您需要在从 GridView 加载其数据后调用该脚本。

类似：

 ClientScript.RegisterStartupScript(Me.GetType(), "ShowPie", "<script>YourPieScriptInitializer()</script>")

Answer 2

解决方法可以是： - 在 UpdatePanel1 中添加一个按钮（但隐藏）

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
  <div id="chartContainer" runat="server" style="height: 150px; width: 100%;">

<asp:Button ID="btnSubmit" runat="server" OnClick="FunctionToGenerateChart" style = "display:none"/>
</ContentTemplate>
</asp:UpdatePanel>

使用代码隐藏：

Protected Overrides Sub Render(writer As HtmlTextWriter)
   //Your code
   btnSubmit.Click(null,null);
End Sub

通过 javascript

document.getElementById("<%=btnSubmit.ClientID %>").click();

希望这会有所帮助！

Answer 3

这一切都可以通过 jQuery 在客户端完成。下面的示例在 GridView 的每一行中都包含一个“选择”超链接。当单击超链接时，我们执行一个 jQuery 函数，它可以让我们访问每一列在选定的行中。我们现在要做的就是获取我们感兴趣的列值并将其传递给创建图表的函数：

<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
        <script type="text/javascript">
        $(function () {
            $(".select").click(function () {

                var tr = $(this).parent().parent();
                var children = $(tr).children();

                //Find the value of the column you need
                for (var i = 0; i < children.length; i++)
                {
                    var td = children[i];
                    var text = $(td).text().trim();
                    alert(text);
                }
                //Call the chart logic here and pass through the required column value from above...
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:GridView ID="GridView1" runat="server">
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <a class="select" href="#">Select</a>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </form>
</body>