C＃値のデータローをJavaScriptで選択

グリッドビューにデータテーブルがあり、行をクリックすると行が選択され、色が変わります。私が今したいことは、誰かがそれをクリックしてポップアップで表示すると、選択された行の値を取得することです。これはすべてjavascriptです。 "window.open"を使いたいと思っています。最高の方法ですが、C＃でそれを行う方がいいですか？C＃値のデータローをJavaScriptで選択

は、行を選択するためにあなたに私のコードを示しています。

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."; 
    } 
} 
}

は、誰かがそれを行うために私にアイデアを与えることはできますか？

出典

2016-07-01 Fanto

なぜあなたはクライアント側で何かしたいことをするためにC＃コードを書いていますか？誰かが行をクリックするたびにサーバー旅行をしたいですか？ –

'SelectedRow'テンプレートに表示するすべてのものを置き、すべてのC＃コードを削除します。 –

最初にRowDataBoundとSelectedIndexChangedのすべてのロジックを削除します。これは、行の色の変更を行い、クライアント上のポップアップに行データを表示することになります（jQueryとブートストラップを使用）。背後

コード：

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>

出力：

出典

2016-07-02 12:42:26

はいこれはもっと意味があります、ありがとう、私が持っていたものよりも優れています！ – Fanto

C＃値のデータローをJavaScriptで選択

答えて

関連する問題