Question

我有gridview填充数据表，当我点击一行时，它选择行并改变它的颜色。我现在要做的是，当有人点击它并在弹出窗口中显示时，获取所选行的值，这一切都是javascript，我想使用“window.open”，我不知道是不是是最好的方法，用c＃做它更好吗？

显示我选择行的代码：

protected void gvData_RowDataBound(object sender, GridViewRowEventArgs e) {
 if (e.Row.RowType == DataControlRowType.DataRow) {

  e.Row.Attributes["onclick"] = Page.ClientScript.GetPostBackClientHyperlink(gvData, "Select$" + e.Row.RowIndex);

  e.Row.ToolTip = "Cliquez sur une ligne pour afficher le contenu.";

 }

}


protected void gvData_SelectedIndexChanged(object sender, EventArgs e) {
 foreach(GridViewRow row in gvData.Rows) {
  if (row.RowIndex == gvData.SelectedIndex) {
   row.BackColor = ColorTranslator.FromHtml("#A1DCF2");
   row.ToolTip = string.Empty;

  } else {
   row.BackColor = ColorTranslator.FromHtml("#FFFFFF");
   row.ToolTip = "Cliquez sur une ligne pour afficher le contenu.";
  }
 }
}

有人能给我这样的想法吗？

Answer 1

首先删除RowDataBound和SelectedIndexChanged的所有逻辑，我们将执行行的颜色更改并在客户端的弹出窗口中显示行数据（使用jQuery和bootstrap）。

代码背后：

protected void Page_Load(object sender, EventArgs e)
{
    if(!Page.IsPostBack)
        BindData();
}

private void BindData()
{
    string connectionString = ConfigurationManager.ConnectionStrings["connectionString"].ConnectionString;
    using(var con = new SqlConnection(connectionString))
    {
        using(var command = new SqlCommand("SELECT ID,City FROM Cities",con))
        {
            using(var adapter = new SqlDataAdapter(command))
            {
                con.Open();

                var table = new DataTable();
                adapter.Fill(table);

                gvData.DataSource = table;
                gvData.DataBind();

                con.Close();
            }
        }
    }
}

<强> .ASPX：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script type="text/javascript">
        $(function () {

            $(".select").click(function () {
                ClearBackgroundColourOfRows();
                var tr = $(this).parent().parent();
                $(tr).css('background-color', '#A1DCF2')

                var children = $(tr).children();
                var id = $(children[0]).html();
                var city = $(children[1]).html();

                var message = "You have selected ID - " + id + ".City - " + city;

                $(".modal-body").empty();
                $(".modal-body").html(message);
                $('#myModal').modal('show');
            });

            function ClearBackgroundColourOfRows() {
                $('#gvData tr').each(function () {
                    $(this).css('background-color', 'transparent');
                });
            }

            $(".btn").click(function () {
                ClearBackgroundColourOfRows();
            });

        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:GridView AutoGenerateColumns="false" ID="gvData" runat="server">
            <Columns>
                <asp:BoundField DataField="ID" />
                <asp:BoundField DataField="City" />
                <asp:TemplateField>
                    <ItemTemplate>
                        <a href="#" class="select">Select</a>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </form>
    <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Row Details</h4>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                </div>

            </div>
        </div>
    </div>
</body>
</html>

<强>输出：

c＃在javascript中选择获取值数据行

1 个答案: