时间戳

首页 > 解决方案 > 执行sql查询并在表格行按下后以模态显示结果

javascript - 执行sql查询并在表格行按下后以模态显示结果

问题描述

我有一个table从 SQL 数据库动态填充的数据。每一行都可以通过页面上的一些 java 脚本点击。

我需要的是执行 SQL 查询以找到与单击的行的 id 匹配的行，然后在引导程序中显示这些结果modal。（textfields例如名字，姓氏等）。

我正在努力理解如何做到这一点，因为我正在按下一个没有发回服务器的表行，所以我不明白如何执行查询。

脚本显示modal：

$(document).ready(function ($) {
    $(".table_row_click").click(function (e) {
        //e.preventDefault();
        $(this).attr('data-target', "#myModal");
        $(this).attr('data-toggle', 'modal');
    });
});

model：

<div class='modal fade' id='myModal' tabindex='-1' role='dialog' aria-labelledby='exampleModalLabel'
  aria-hidden='true'>
  <div class='modal-dialog modal-dialog-scrollable' role='document'>
     <div class='modal-content'>
        <div class='modal-header'>
           <h3 class='modal-title' id='exampleModalLabel'>Supplier information</h3>
           <button class='close' type='button' data-dismiss='modal' aria-label='Close'>
           <span aria-hidden='true'>×</span></button>
        </div>
        <div class='modal-body'>
           <div class='form-group'><label for='ids'>ID:</label><input class="form-control" required='required'  type="text" placeholder="" readonly></div>
           <div class='form-group'><label for='name'>Name:<span style="color:red">*</span></label><input class='form-control firstname' required='required' type='text' name='name'
              placeholder='Enter first name' /></div>
           <div class='form-group'><label for='country'>Country:</label><input class='form-control lastname'  type='text' name='country' placeholder='Enter Country' 
              /></div>
           <div class='form-group'><label for='state'>State:</label><input class='form-control phone'  type='text' name='state' placeholder='Enter State'
              /></div>
           <div class='form-group'><label for='street_name'>Street Name:</label><input class='form-control email'  type='text' name='street_name' placeholder='Enter Street Name'
              /></div>
           <div class='form-group'><label for='street_number'>Street #:</label><input class='form-control address' type='text' name='street_number' placeholder='Enter Street #'
              /></div>
           <div class='form-group'><label for='phone1'>Phone # 1:</label><input class='form-control birthday'  type='text' name='phone1'  placeholder='Enter Phone # 1'
              /></div>
           <div class='form-group'><label for='phone2'>Phone # 2:</label><input class='form-control birthday'  type='text' name='phone2'  placeholder='Enter Phone # 2'
              /></div>
           <div class='form-group'><label for='email1'>Email 1:</label><input class='form-control birthday'  type='text' name='email1'  placeholder='Enter Email 1'
              /></div>
           <div class='form-group'><label for='email2'>Email 2:</label><input class='form-control birthday'  type='text' name='email2'  placeholder='Enter Email 2'
              /></div>
           <div class='form-group'><label for='rep_first_name'>Rep First Name:</label><input class='form-control birthday' type='text' name='rep_first_name'   placeholder='Enter Rep First Name'
              /></div>
           <div class='form-group'><label for='rep_last_name'>Rep Last Name:</label><input class='form-control birthday' type='text' name='rep_last_name'  placeholder='Enter Rep Last Name'
              /></div>
           <div class='form-group'><label for='rep_phone'>Rep Phone #:</label><input class='form-control birthday'  type='text' name='rep_phone'  placeholder='Enter Rep Phone #'
              /></div>
           <div class='form-group'><label for='rep_email'>Rep Email:</label><input class='form-control birthday'  type='text' name='rep_email'  placeholder='Enter Rep Email'
              /></div>
           <div class='form-group'><label for='website'>Website:</label><input class='form-control birthday' type='text' name='website'  placeholder='Enter Website'
              /></div>
           <div class='form-group'><label for='gender' >Active:<span style="color:red">*</span></label>
              <span  style="color:green"><input  required='required'  type='radio' name='Active' value='True' />True</span>
              <span  style="color:red"><input  required='required' type='radio' name='Active' value='False' />False</span>
           </div>
           <button class='btn btn-primary btn-save-change'
              type='submit'>Save changes</button>
        </div>

     </div>
  </div>

table通过 SQL 查询动态创建：

    <div id="MainContent_myDiv">
    <div class='container test'>
        <div class='panel panel-primary filterable test'>
            <div class='panel-heading panel-heading-custom test'>
                <p style='text - align:left; font-size:24px'>Suppliers <span style='float:right;'><button class='btn btn-default btn-sm' data-="" data-target='#myModal' style='font-size:15px' type='button'><span style='float:right;'><span class='glyphicon glyphicon-plus' style='color: rgb(59, 237, 45)'></span> New</span> <button class='btn btn-default btn-sm btn-filter' style='font-size:15px' type='button'><span class='glyphicon glyphicon-filter'></span> Filter</button></button></span></p>
            </div>
            <table class='table table-hover test' id='myTable'>
                <thead>
                    <tr class='filters shadow'>
                        <th data-type='string' onclick='sortTable(0)'><input class='form-control' disabled placeholder='#' style='cursor: pointer' type='text'></th>
                        <th data-type='string' onclick='sortTable(1)'><input class='form-control' disabled placeholder='Name' style='cursor: pointer' type='text'></th>
                        <th data-type='number' onclick='sortTable(2)'><input class='form-control' disabled placeholder='Phone # 1' style='cursor: pointer' type='text'></th>
                        <th data-type='number' onclick='sortTable(3)'><input class='form-control' disabled placeholder='Phone # 2' style='cursor: pointer' type='text'></th>
                        <th data-type='string' onclick='sortTable(4)'><input class='form-control' disabled placeholder='Email 1' style='cursor: pointer' type='text'></th>
                        <th data-type='string' onclick='sortTable(5)'><input class='form-control' disabled placeholder='Email 2' style='cursor: pointer' type='text'></th>
                        <th data-type='string' onclick='sortTable(6)'><input class='form-control' disabled placeholder='Website' style='cursor: pointer' type='text'></th>
                        <th data-type='string' onclick='sortTable(7)'><input class='form-control' disabled placeholder='Active' style='cursor: pointer' type='text'></th>
                    </tr>
                </thead>
                <tbody>
                    <tr class='shadow'>
                        <td class=' table_row_click'>45</td>
                        <td class=' table_row_click'>suppliername1</td>
                        <td class=' table_row_click'>45</td>
                        <td class=' table_row_click'>0450591234</td>
                        <td class=' table_row_click'>aaron@outlook.com</td>
                        <td class=' table_row_click'>aaront@outlook.com</td>
                        <td class=' table_row_click'>www.website.com</td>
                        <td class=' table_row_click'>False</td>
                        <td><button class='btn btn-outline-danger button_border' data-target='#exampleModalCenter' data-toggle='modal' id='45' onclick='change(this.id)' style='font - size:20px' type='button'><i class='material-icons'>Del</i></button></td>
                        <td></td>
                    </tr>
                    <tr class='shadow'>
                        <td class=' table_row_click'>46</td>
                        <td class=' table_row_click'>suppliername2</td>
                        <td class=' table_row_click'>0450591234</td>
                        <td class=' table_row_click'>0450591234</td>
                        <td class=' table_row_click'>aaront@outlook.com</td>
                        <td class=' table_row_click'>aarontexample@outlook.com</td>
                        <td class=' table_row_click'>www.website.com</td>
                        <td class=' table_row_click'>False</td>
                        <td><button class='btn btn-outline-danger button_border' data-target='#exampleModalCenter' data-toggle='modal' id='46' onclick='change(this.id)' style='font - size:20px' type='button'><i class='material-icons'>Del</i></button></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

标签： javascripthtmlsqlasp.net

解决方案

有很多方法可以做到这一点，例如完整的 asp.net 控件或对端点的 ajax 调用以加载数据。

如果您对回发和 .net 感到满意，但希望模态快速出现，您可以：

  • 单击该行，获取 id 并将其放入隐藏字段的值中
  • 将模态体包裹在 updatePanel 中
  • 让你所有的文本框在服务器上运行
  • 在该面板内放置一个 asp:button 并使用 jquery click() 单击它
  • 现在处理后面的 c# 代码中的 onclick 事件以访问数据库并设置字段的值

玩得开心！

推荐阅读