使用Ajax和MVC 4加載Div內容

Question

我有幾個按鈕應該更改頁面上區域的內容。 我已經閱讀了許多教程，如何使用Ajax來實現延遲加載，但是不幸的是，沒有成功。 這是我的html：

<div>
    <div>
        <button id="btn_goals">Goals</button>
        <button id="btn_achievements">Achievements</button>
    </div>

    <div id="region_content"></div>

</div>

這是我的js：

$(document).ready(function () {

$('#btn_goals').on('click', function () {
    $.ajax({
        url: '@Url.Action("Index", "Goals")',
        success: function (data) {
            $('#region_content').html(data);
        }
    });
});

$("#btn_achievements").on("click", function () {
    ......
});

}）;

問題是什么？

**********編輯************

好吧，我將ajax參數中的url從url：'@ Url.Action（“ Index”，“ Goals”）'更改為url：'/ Goals / Index'，它開始正常工作。 是什么原因？

Answer 1

請嘗試執行以下步驟：

1. 使用console.log("Inside Success function"+ data); 測試是否從控制器方法返回了所需的數據。

在瀏覽器中使用Ctrl+Shift+I查看控制台。 如果成功：

2. 采用：

var div = document.getElementById("region_content");
div.innerHTML = div.innerHTML + data;

3. 確保類型轉換正確完成。

4. 還要在ajax函數中指定類型： POST 。

如果您在控制台上看不到“ Inside Success功能”，則控制器功能可能有問題。