Как добавить gridview на модальный загрузчик с динамическим параметром из нескольких кнопок - PullRequest
Новая
       10

Как добавить gridview на модальный загрузчик с динамическим параметром из нескольких кнопок

0 голосов
/ 18 сентября 2018

Я искал решение для отображения сетки в модальном режиме. Вид сетки отображается правильно, без ошибок, проблема в его параметре. Я понимаю, что gridview - это процесс до запуска любого javascript. Однако мне нужно, чтобы он отображался при нажатии модальной кнопки. Эта кнопка изменяет данные на модальные и должна изменить параметр sqldatasource, который также изменяет содержимое gridview.

Вот мой JavaScript 

$(document).ready(function () {
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) //Button that triggered the modal
var ckpt = button.data('whatever')
var clss = button.data('dtclass')
var modal = $(this)
modal.find('.modal-title').text(clss)
modal.find('.modal-title2').text(ckpt)
document.getElementById('ContentPlaceHolder1_lblckpt').innerText = clss;
})})

Вот код клиента 

<td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-dtclass="I010" data-whatever="Diameter">Go!</button></td>

<td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-dtclass="I030" data-whatever="Thickness">Go!</button></td>

Вот мой модал с gridview 

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <p id="exampleModalLabel" style="font-size:22px;">Checkpoint :<asp:Label ID="txtckpt1" runat="server" class="form-control-label modal-title" style="font-size:22px;"></asp:Label>&nbsp;~&nbsp;<label id="txtckpt2" runat="server" class="form-control-label modal-title2" style="font-size:22px;"></label></p>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          <div class="form-group">
              <label for="txtequi" class="form-control-label">Equipment</label>
              <table>
                  <tr>
                      <td colspan="2">
                          <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BorderStyle="Solid" BorderWidth="1px" ShowHeaderWhenEmpty="true"
CellPadding="3" DataSourceID="sdtequi"
OnRowDataBound="GridView1_RowDataBound" OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
    <Columns>
        <asp:ButtonField Text="Delete" ControlStyle-ForeColor="Firebrick" CommandName="Select" ItemStyle-Width="30" />
        <asp:BoundField DataField="mequid" HeaderText="Equipment" SortExpression="mequid" />
        <asp:BoundField DataField="mequnm" HeaderText="Description" SortExpression="mequnm" />
        <asp:BoundField DataField="mergdt" HeaderText="Creation Date" SortExpression="mergdt" DataFormatString="{0:dd/MM/yyyy}" />
        <asp:BoundField DataField="meusid" HeaderText="User ID" SortExpression="meusid" />
    </Columns>
</asp:GridView>
<asp:SqlDataSource ID="sdtequi" runat="server" ConnectionString="<%$ ConnectionStrings:myConnectionString %>"
ProviderName="<%$ ConnectionStrings:m3ConnectionString.ProviderName %>" SelectCommand="SELECT mequid, mequnm, mergdt, meusid FROM fcis.mechkp WHERE mecpid = ? ORDER BY mequid">
<SelectParameters>
    <asp:ControlParameter DefaultValue="" ControlID="lblckpt" Name="lblckpt" PropertyName="Text" Type="String" />
</SelectParameters>
</asp:SqlDataSource>
                      </td>
                  </tr>
              </table>
          </div>
          <div class="form-group">
            <label for="txtckpt" class="form-control-label">LI Class</label>
              <table>
                  <tr>
                      <td><asp:TextBox runat="server" ID="txtckpt" class="form-control"></asp:TextBox></td>
                      <td><button type="button" class="btn btn-primary">Add</button></td>
                  </tr>
              </table>
          </div>
      </div>
    </div>
  </div>
</div>

Как вы можете видеть, я устанавливаю значение на lblckpt метка после открытия модального режима (используя javascript). Затем параметр sqldatasource связывается с lblckpt , чтобы можно было отображать данные сетки. В моем проекте нет ошибок, более того, я попытался жестко закодировать параметр, и он работает так, как должно быть. Пожалуйста, дайте мне совет или решение.

1 Ответ

0 голосов
/ 20 сентября 2018

Если у кого-то есть решение, использующее gridview, пожалуйста, дайте мне знать. Прямо сейчас я нашел решение, используя AJAX aspx. Вот код, который я использую. Мне это нравится, потому что это намного лучше, и я могу получать данные в реальном времени без обновления всей страницы.

Вот javascript 

function AddTableEqui(clss){   
 var xhr = new XMLHttpRequest();
 xhr.onreadystatechange = function () {
  document.getElementById("div1").innerHTML = xhr.responseText;
  }
 xhr.open("GET", "GetEqui.aspx?clss=" + clss, true);
 xhr.send(null);
}

Затем я кодирую свою таблицу внутри GetEqui.aspx и возвращаю всю html-разметку, используя response.write ()

...