ASP.NET中的AJAX问题;C#

AJAX Issue in ASP.NET & C#

本文关键字：问题 AJAX NET 中的 ASP      更新时间：2023-09-26

我正试图通过AJAX调用C#代码背后的WebMethod。。我有一个Bootstrap Modal，它需要在单击链接按钮时显示，而且当按下链接按钮时，它将通过AJAX激发一个WebMethod，该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没有被解雇。。。

有什么建议吗？

根据代码的粗略外观，需要做一些额外的工作才能实现这一点。我可以看到所需的步骤如下：

  • 将"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);
}

我相信，这应该对你有用。

相关文章：