ASP.NET和C＃中的AJAX问题

Question

我试图通过AJAX在我的C＃代码后面调用WebMethod 。我有一个Bootstrap Modal，需要在单击linkbutton时显示，同样当按下link按钮时，它也会通过AJAX触发WebMethod来填充一个模态主体中的表，其中包含查询的结果集。

这是我的代码：

ASP.NET

<asp:LinkButton href="#viewemydevices" data-toggle="modal" ID="ViewMyDevices" runat="server">
<div class="panel-footer announcement-bottom">
 <div class="row">
      <div class="col-xs-6">
      View Devices
      </div>
      <div class="col-xs-6 text-right">
          <i class="fa fa-arrow-circle-right"></i>
      </div>
 </div>

<div class="modal fade" id="viewemydevices" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h4>This is a section</h4>
        </div>
        <div class="modal-body">
            <table id="MyDevicesTable" class="table tbody" runat="server" visible="false">
                <tbody>
                    <tr>
                        <td>
                            <asp:DataGrid ID="MyDevicesGrid" runat="server" CssClass="table table-striped tbody" Visible="false"
                                AutoGenerateColumns="True"
                                ForeColor="black"
                                HeaderStyle-Font-Bold="true"
                                HeaderStyle-ForeColor="black"
                                GridLines="None"
                                EnableViewState="false"
                                AllowSorting="True"/>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="modal-footer">
            <a class="btn btn-primary" data-dismiss="modal">Close</a>
        </div>

    </div>
</div>

 <script type="text/javascript">

    $.ajax({
        url: 'Default.aspx/ViewMyDevices',
        type: "POST",
        data: '{}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            $('#ViewMyDevices').click();
        }
    });

</script>

C＃

    [WebMethod]
    public void ViewMyDevices()
    {
    string selectMyDevices = "My Query, it works fine";

    sqlCmd = new SqlCommand(selectMyDevices, sqlConn);
    sqlConn.Open();

    SqlDataReader rdrMyDevices = sqlCmd.ExecuteReader();

    //reads row into datagrid
    if (rdrMyDevices.HasRows)
    {
        //sets table/grid to visible
        MyDevicesGrid.Visible = true;
        MyDevicesTable.Visible = true;

        //adds data to grid
        MyDevicesGrid.DataSource = rdrMyDevices;
        MyDevicesGrid.DataBind();
    }
    sqlConn.Close();
}

我不知道自己缺少什么，正在显示模式，但是没有数据在显示。 所以我认为AJAX没有被解雇...

有什么建议么？

Answer 1

基于代码的粗略外观，需要做一些额外的工作才能完成这项工作。 我可以看到的所需步骤如下：

• 将'ClientIDMode =“ static”'属性添加到您的链接按钮。

• 将ID赋予模态主体div：

  <div class =“ modal-body” id =“ myContent”>

• ajax请求需要绑定到按钮。 在原始代码示例中，这是另一种方法-ajax响应执行了按钮单击。

• 一旦从服务器接收到响应，就需要将响应的HTML内容写入模态对话框内容占位符，如下所示：'$（'＃myContent'）。html（data）;'。 请参阅下面的完整JS示例：

   $('#ViewMyDevices').click( function(){ $.ajax({ url: 'Default.aspx?method=ViewMyDevices', type: "POST", data: '{}', contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { $('#myContent').html(data); } }) }); 

• 该方法不会自动为您调用，因为您似乎正在使用ASP.NET，而不是MVC。 您需要连接逻辑以自己调用它。 因此，例如，您可以使用以下参数执行ajax请求：“ Default.aspx？method = ViewMyDevices”。 然后，在aspx页面的页面加载事件中，您需要检查请求的类型是否为post，并且查询参数是否与方法名称匹配。 像这样：

   public void Page_Load(object sender, EventArgs e) { if(Request.HttpMethod == "POST" && Request.QueryString["method"] == "ViewMyDevices") { ViewMyDevices(); } } 

• 然后，您需要覆盖aspx页面的Render方法，并检测是否正在发出POST请求，在这种情况下，仅呈现页面的所需部分，即表格：

   protected override void Render(HtmlTextWriter writer) { if(Request.HttpMethod == "POST") { MyDevicesTable.Render(writer); return; } base.Render(writer); } 

我相信这应该对您有用。