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在客户端完成。下面的示例包含一个＆＃34; Select＆＃34;在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>

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

3 个答案: