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

我相信這應該對您有用。