調用通過AJAX局部視圖中Asp.net MVC 5

我使用以下代碼來調用的局部視圖：調用通過AJAX局部視圖中Asp.net MVC 5

$('#btnGetMilestones').click(function() { 
$.ajax({ 
    url: "GetMilestones", 
    type: "get", 
    success: function (result) { 
     $('#milestonesContainer').html(result); 
    }, 
    error: function (xhr, status, error) { 
     var msg = "Response failed with status: " + status + "</br>" 
     + " Error: " + error; 
     $('#milestonesContainer').html(msg); 
    }, 
    complete: function (xhr, status) { 
     var doneMsg = "Operation complete with status: " + status; 
     alert(doneMsg); 
    } 
});

}）;

此的ActionResult：

public PartialViewResult GetMilestones() 
    { 
     return PartialView("_GetMilestones"); 
    }

局部視圖已經在一個項目中的里程碑（階段性目標和項目是型號）。當我打電話給這樣的局部視圖時：

<div id="milestonesContainer"> 
    @Html.Partial("_GetMilestones") 
</div>

它工作正常，它獲得項目的所有里程碑。但是，當我嘗試調用通過AJAX的局部視圖，該錯誤被稱爲：響應失敗，狀態：錯誤

錯誤：錯誤的請求

我在細節是查看項目，這樣的網址是像這樣http://localhost:55623/Projects/Details/2002

我是新來的ajax和javascript，所以如果可能，請解釋我喜歡你對初學者。

UPDATE：

得到一些答案，玩弄找到一個解決方案後，我才明白爲什麼會出現錯誤。我在詳細信息視圖中，所以url是這樣的：http://localhost:55623/Projects/Details/2002看到有一個ID參數。當我進行ajax調用時，url是這樣的http://localhost:55623/Projects/Details沒有id參數。所以作爲回報，我得到一個400錯誤代碼

來源

2016-10-20 Arianit

的可能的複製[如何通過AJAX調用呈現MVC5局部視圖到控制器，並返回HTML（http://stackoverflow.com/questions/32610270/how-to-render-partial-view-in-mvc5-via-ajax-call-到一個控制器和回報，HTML） –

除非您的當前URL是'httphttp：// /<包含GetMilestones>的控制器，否則您的網址不正確。它需要是'/ /GetMilestones'。 – Gavin

@MikeMcCaughan不，沒有 – Arianit

感謝所有回答。我爲我的問題得到了一個答案，也許這不值得期待。她是：改變AJAX方法：

$('#btnGetMilestones').click(function() { 
     $.ajax({ 
      url: '/Projects/GetMilestones/' + "?id=" + window.location.href.split('/').pop(),     
      type: "GET", 
      success: function (data) { 
       $('#milestonesContainer').html(data); 
      }, 
      error: function (xhr, status, error) { 
       var msg = "Response failed with status: " + status + "</br>" 
       + " Error: " + error; 
       $('#milestonesContainer').html(msg); 
      }, 
      complete: function (xhr, status) { 
       var doneMsg = "Operation complete with status: " + status; 
       alert(doneMsg); 
      } 
     }); 
    });

和行動結果：

public ActionResult GetMilestones(int? id) 
    {    
     var forProject = db.Projects.Where(x => x.ID == id).SingleOrDefault(); 
     return PartialView("_GetMilestones",forProject); 
    }

或者同一個動作的結果，但Ajax請求略有dirrent：

$('#btnGetMilestones').click(function() { 
    var id; 
    id = @Model.ID; 

    $.ajax({ 
     url: '/Projects/GetMilestones', 
     type: "GET", 
     data: "id="+id, 
     success: function (data) { 
      $('#milestonesContainer').html(data); 
     }, 
     error: function (xhr, status, error) { 
      var msg = "Response failed with status: " + status + "</br>" 
      + " Error: " + error; 
      $('#milestonesContainer').html(msg); 
     }, 
     complete: function (xhr, status) { 
      var doneMsg = "Operation complete with status: " + status; 
      alert(doneMsg); 
     } 
    }); 
});

來源

2016-10-20 20:33:11 Arianit

而不是url: "GetMilestones"，嘗試使用url: "@Url.Action("GetMilestones")"這將呈現操作的實際相對路徑，即/ {Controller}/GetMilestones。

還要確保你指的是正確的文件名在你的控制器，在你看來，你是指「_GetMilestone」和你說這樣的作品，但在你的控制器，你引用「_GetMilestone 小號」，這將不如果您的文件名確實是「_GetMilestone」，請解析

如果您收到500錯誤，那意味着您很可能正在執行操作，並且在呈現局部視圖之前或過程中發生異常。嘗試通過輸入localhost:port/Projects/GetMilestones直接導航到瀏覽器中的部分視圖操作，並查看是否顯示例外頁。確保你做這樣的事情在你的啓動類的配置方法：

public void Configure (IApplicationBuilder app) 
{  
    app.UseDeveloperExceptionPage(); 
}

來源

2016-10-20 14:46:51 Ceshion

不應該是「@ Url.Action（'GetMilestones'）」？ – Arianit

如果是，那麼錯誤是：錯誤：未找到 – Arianit

不！由於它是剃刀語法（@），這意味着以下是C＃方法調用。在C＃中，單引號用於字符文字。話雖如此，MVC理解你什麼時候把一個類似「@ Class.Method（」「）」的東西放在一個只有@@部分的JavaScript塊中）是C＃，其餘部分是javascript。其結果是，在呈現文檔時，在兩個javascript雙引號之間呈現字符串「/ Controller/GetMilestones」，導致出現JavaScript字符串文字「/ Controller/GetMilestones」。 – Ceshion

要建立在我的評論：

對不起，我被曖昧與術語url。這就是我的意思：

除非你在瀏覽器中的當前URL是http://<hostname>/<Controller that contains GetMilestones>，你的AJAX網址是不正確的。 AJAX網址需要爲/<Controller>/GetMilestones。

開始/將您帶到項目的根目錄，其餘的由您的路由配置（通常爲/Controller/Method/Id）負責。這就是爲什麼AJAX網址通常需要爲/Controller/Method。但是，如果您位於Index視圖，則您的網址通常爲http://<hostname>/Controller。所以，如果是這樣的話，你的AJAX網址只是Method，它會帶你到http://<hostname>/Controller/Method因爲你沒有用/預先考慮您的AJAX網址。

來源

2016-10-20 15:00:56 Gavin

GetMilestones操作位於ProjectsController中。我導航到項目的細節，有按鈕來調用局部視圖...我不知道如果id參數必須做這個錯誤的東西，但我有一個類似的項目，我在哪裏測試，如果ajax調用工作，並且它工作沒有問題，相同的代碼，除了視圖中的元素和沒有id參數。 – Arianit

你應該考慮的輔助方法，如Url.Action優勢，產生於你想要通過AJAX調用操作方法正確的相對路徑。如果你的js代碼視圖裏面，你可以簡單地調用像

url: "@Url.Action("GetMilestones","Project")",

方法如果是在外部js文件，你仍然可以使用輔助方法來生成路徑，將其設置爲可變你的外部js文件。請確保在執行javascript namespacing時避免可能覆蓋js全局變量。

所以在您的視圖/佈局，你可以做到這一點

<script> 
    var myApp = myApp || {}; 
    myApp.Urls = myApp.Urls || {};  
    myApp.Urls.mileStoneUrl= '@Url.Action("GetMilestones","Project")'; 
</script> 
<script src="~/Scripts/PageSpecificExternalJsFile.js"></script>

而在你PageSpecificExternalJsFile.js文件，你可以像

$(function(){ 
    $('#btnGetMilestones').click(function() { 
     $.ajax({ 
      url: myApp.Urls.mileStoneUrl, 
      //Your existing code goes here 

      }) 
    }); 
});

來源

2016-10-20 16:32:33 Shyju

必須在_Layout視圖或我稱之爲ajax的視圖中嗎？ – Arianit

你可以把它放在任何一個。如果你把它放在單獨的vieww – Shyju

我喜歡這種方式，但使用外部js文件只寫URL：'/ Projects/GetMilestones /'會不會更容易？ – Arianit

讀它，你需要先網址更改爲匹配的東西路線：

'/<Controller>/GetMilestones/'

從PartialViewResult切換到ActionResult

去阿賈克斯，如：

url: "GetMilestones", 
type: "get", 
contentType: 'application/html; charset=utf-8', 
dataType : 'html'

來源

2016-10-20 17:58:18

調用通過AJAX局部視圖中Asp.net MVC 5

回答

相關問題