2016-04-22 53 views
1

我想查詢使用AJAX從控制器數據的控制器獲取JSON數據,我的控制器:MVC:使用AJAX失敗

[HttpGet] 
public ActionResult GetTestStatus(string userName) 
{ 
    var db = new SREvalEntities(); 
    var allTests = db.Tests 
     .Where(x => string.Equals(x.Owner, userName)) 
     .Select(x => new { CreateDate = x.CreateDate, EndDate = x.EndDate, Status = x.Status }) 
     .OrderByDescending(x => x.CreateDate) 
     .ToList(); 

    return Json(allTests, JsonRequestBehavior.AllowGet); 
} 

和我的一個外部文件中的JavaScript代碼是:

function Filter() { 
    var userAlias = document.getElementById("UserAliasInput"); 
    var txt = "<tr><th>StartDate</th><th>EndDate</th><th>Status</th><th>Detail</th></tr>"; 
    $.ajax({ 
     url: '/TestStatus/GetTestStatus', 
     type: "GET", 
     dataType: "JSON", 
     data: { userName: userAlias }, 
     success: function (results) { 
      $.each(results, function (i, result) { 
       txt += "<tr><td>" + result.CreateDate + "</td>"; 
       txt += "<td>" + result.EndDate + "</td>"; 
       txt += "<td>" + result.Status + "</td>"; 
       txt += "<td><a href=\"\">Goto</a></td></tr>"; 
      }); 
     } 
    }); 
    $("#ShowDetail").html(txt); 
} 

當我試圖調試此功能,代碼永遠不會EXCUTE到

$("#ShowDetail").html(txt); 

我的頁面不會被改變。我怎樣才能得到它的工作?謝謝。

回答

1

由於您使用的是異步的$.ajax()。因此,在從API返回值之前調用$("#ShowDetail").html(txt)

你應該在每個塊之後設置的html()

function Filter() { 
    var userAlias = document.getElementById("UserAliasInput"); 
    var txt = "<tr><th>StartDate</th><th>EndDate</th><th>Status</th><th>Detail</th></tr>"; 
    $.ajax({ 
     url: '/TestStatus/GetTestStatus', 
     type: "GET", 
     dataType: "JSON", 
     data: { userName: userAlias.value }, //Use the value property here 
     success: function (results) { 
      $.each(results, function (i, result) { 
       txt += "<tr><td>" + result.CreateDate + "</td>"; 
       txt += "<td>" + result.EndDate + "</td>"; 
       txt += "<td>" + result.Status + "</td>"; 
       txt += "<td><a href=\"\">Goto</a></td></tr>"; 
      }); 

      $("#ShowDetail").html(txt); //Move code to set text here 
     } 
    });  
} 
+0

感謝。我按照你所說的去做,但它不起作用。我添加了alert(結果);'在成功回調中,頁面沒有迴應。通過輸入/ TestStatus/GetTestStaus?userName = ...我可以看到控制器返回的JSON。 – OnceJune

+0

@OnceJune,使用'{userName:userAlias.value}' – Satpal

+0

抱歉再次打擾你。由於'.ajax()'是異步的,因此在同一個函數中返回'$ .ajax()'之後,我該怎麼做?比如更新頁面?謝謝。 – OnceJune

0

請嘗試以下功能

function Filter() { 
    var userAlias = $("#UserAliasInput").val();//change this 
    var txt = "<tr><th>StartDate</th><th>EndDate</th><th>Status</th><th>Detail</th></tr>"; 
    $.ajax({ 
     url: '/TestStatus/GetTestStatus', 
     type: "GET", 
     dataType: "JSON", 
     data: { userName: userAlias }, 
     success: function (results) { 
      $.each(results, function (i, result) { 
       txt += "<tr><td>" + result.CreateDate + "</td>"; 
       txt += "<td>" + result.EndDate + "</td>"; 
       txt += "<td>" + result.Status + "</td>"; 
       txt += "<td><a href=\"\">Goto</a></td></tr>"; 
      }); 
      $("#ShowDetail").html(txt);//place this in the success function 
     } 
    }); 
}