Отображать данные gridview при нажатии

#c# #asp.net #gridview

Вопрос:

У меня есть gridview, который становится довольно длинным с некоторой информацией, которая может быть несколько скрыта.

Вот мой asp:

 <asp:GridView ID="gvLogBody" runat="server" CssClass="Grid" AllowPaging="true" AllowSorting="true" PageSize="10" AutoGenerateColumns="true">
</asp:GridView>

И вот мой код, лежащий в основе:

 DataSet ds = new DataSet();
ds.Tables.Add("LogBody");
ds.Tables["LogBody"].Columns.Add("timeStamp");
ds.Tables["LogBody"].Columns.Add("name");
ds.Tables["LogBody"].Columns.Add("message");
foreach (LogObject l in logLines)
{
    ds.Tables["LogBody"].Rows.Add(l.TimeStamp, l.Name, l.Message);
}
gvLogBody.DataSource = ds.Tables["LogBody"].DefaultView;
gvLogBody.DataBind();

Это дает мне gridview, который выглядит следующим образом:

 ____________________________________________________________________________________________
|timeStamp|                      name                     |            message             |
 --------- ----------------------------------------------- -------------------------------- 
|01-01-01 | someLongAndQuiteUnnecesaryNameThatIWishToHide | someMessageThatIsMoreImportant |
 --------- ----------------------------------------------- --------------------------------

Я хочу что-то вроде этого:

 _________________________________________________________
|timeStamp|    name     |            message             |
 --------- ------------- -------------------------------- 
|01-01-01 | clickToShow | someMessageThatIsMoreImportant |
 --------- ------------- --------------------------------

И как только пользователь нажимает на текст, он разворачивается / открывает всплывающее окно или что-то в этомроде.

Как это можно сделать?

1. Для этого лучше использовать javascript / jquery и избегать повторных кликов. Теперь, если вы используете javascript, найдите библиотеку всплывающих окон, а затем решите, используете ли вы ajax для получения информации, или у вас есть это на странице, и вы показываете () / скрываете () это.

Ответ №1:

Этот фрагмент кода поможет вам в этом.

 <asp:GridView ID="gvLogBody" runat="server" CssClass="Grid" AllowPaging="true" AllowSorting="true" PageSize="10" AutoGenerateColumns="false">
                    <Columns>
                        <asp:BoundField DataField="timeStamp" HeaderText="timeStamp" />
                        <asp:TemplateField HeaderText="name">
                            <ItemTemplate>
                                <input type="button" value="clickToShow" onclick="alert('<%#Eval("name") %>')" />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:BoundField DataField="message" HeaderText="message" />
                    </Columns>
                </asp:GridView>

1. Говорит, что System.Web.UI.WebControls. У GridView нет общедоступных свойств BoundField и, TemplateField и ItemTemplate

2. о, nvm. Я забыл поместить их между <столбцами>

3. Я понимаю. Работает ли это как шарм? Если это сработает, тогда примите мой ответ как правильный.

Ответ №2:

Почему бы не использовать jQueryUI Dialog для хорошего внешнего вида всплывающего окна

 <head runat="server">
     <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

  <script>
      function openPopup(name) {

          $('#<%= lblName.ClientID %>').text(name);
          $("#dialog").dialog();
          return false;
      };
  </script>
</head>

затем в теле

 <asp:GridView ID="gvLogBody" runat="server" CssClass="Grid" AllowPaging="true" AllowSorting="true" PageSize="10" AutoGenerateColumns="false">
                    <Columns>
                        <asp:BoundField DataField="timeStamp" HeaderText="timeStamp" />
                        <asp:TemplateField HeaderText="name">
                            <ItemTemplate>
                                <a href="#" onclick='javascript:return openPopup("<%#Eval("name") %>");'>
                                <%#Eval("name")%>
                            </a>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:BoundField DataField="message" HeaderText="message" />
                    </Columns>
                </asp:GridView>
 <div id="dialog" title="Basic dialog">
        <asp:Label ID="lblName" runat="server" ></asp:Label>
</div>