ASP.NET和C＃中的AJAX问题

Question

I am trying to call a WebMethod in my C# code behind via AJAX .. I have a Bootstrap Modal that needs to display on the click of a linkbutton, also when the link button is pressed, it will fire a WebMethod via AJAX that fills a table in the modal body with a result set from a query.

This is the code I have :

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();
}

I do not know what I am missing, the modal is displaying, but no data is displaying. So I think the AJAX is not being fired...

Any suggestions?

Answer 1

Based on the cursory look of the code, some extra work needs to be done in order to make this work. The steps required that I can see are as follows:

• Add 'ClientIDMode="static"' attribute to your linkbutton.

• Give ID to the modal body div:

  <div class="modal-body" id="myContent">

• The ajax request needs to be bound to the button. In the original code sample, it was the other way around - the ajax response executed the button click.

• Once the response is received from the server, the HTML content from the response needs to be written to the modal dialog content placeholder like this: '$('#myContent').html(data);'. See the complete JS sample below:

   $('#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); } }) }); 

• The method isn't called automatically for you, as you seem to be using ASP.NET, not MVC. You'd need to wire the logic to call it yourself. So, for example you could execute the ajax request with a parameter like this: 'Default.aspx?method=ViewMyDevices'. Then in the page load event of your aspx page, you'd need to check if the request is of type post and the query parameter matches the method name. Something like this:

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

• Then, you'd need to override the Render method of the aspx page and detect if you're making a POST request, in which case only render the desired portion of the page, which is the table:

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

This, I believe, should work for you.