Asp.Net-如何使用ajax調用ActionResult

Question

我想單擊“ 2”，Ajax將調用ActionResult並提出新問題，但不重新運行頁面，我已經嘗試了兩天，但沒有成功。有人幫我，請ActionResult：

[HttpPost]
        public ActionResult BaiTestIQ(int id)
        {
            var cauhoi = from q in data.Questions
                         join a in data.Answers on q.MaTests equals "IQ"
                         where q.MaCHoi == a.MaCHoi && a.keys == id
                         select new baitest()
                         {
                             Cauhoi = q.Noidung,
                             DAn1 = a.DAn1,
                             DAn2 = a.DAn2,
                             DAn3 = a.DAn3,
                             DAn4 = a.DAn4,
                             DAn5 = a.DAn5,
                             DAn6 = a.DAn6,
                         };
            return View(cauhoi);
        }

功能Ajax：

<script>
function loadcauhoi(num) {
    $.ajax({
        dataType: "Json",
        type: "POST",
        url: '@Url.Action("BaiTestIQ","TestIQ")',
        data: { id: num },
        success: function (a) {
            // Replace the div's content with the page method's return.
            alert("success");
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert(errorThrown)} 
    });
}
</script>

在HTML中：

<li>
  <a href="javascript:;" onclick="loadcauhoi(2)">1</a>
</li>

在此處輸入圖片說明

謝謝閱讀

Answer 1

我改變了，但沒有用！

我是自己學的，所以很難上手

動作結果：

[HttpPost]
    public ActionResult BaiTestIQ(int id)
    {
        var cauhoi = from q in data.Questions
                     join a in data.Answers on q.MaTests equals "IQ"
                     where q.MaCHoi == a.MaCHoi && a.keys == id
                     select new baitest()
                     {
                         Cauhoi = q.Noidung,
                         DAn1 = a.DAn1,
                         DAn2 = a.DAn2,
                         DAn3 = a.DAn3,
                         DAn4 = a.DAn4,
                         DAn5 = a.DAn5,
                         DAn6 = a.DAn6,
                     };
        return PartialView(cauhoi);
    }

功能Ajax：

    <script>
function loadcauhoi(num) {
    $.ajax({
        dataType: "Html",
        type: "POST",
        url: '@Url.Action("BaiTestIQ","TestIQ")',
        data: { id: num },
        success: function (a) {
            // Replace the div's content with the page method's return.
            alert("success");
            $('#baitetstiq').html(a);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert(errorThrown)} 
    });
}
    </script>

完整HTML：

<div class="col-md-9" style="border-top-style:double;
    border-top-color:aquamarine;
    border-top-width:5px; margin-left:-15px">
    <p style="text-align:center">
        <b>Thời Gian Còn Lại Là:xxx</b>
    </p>
    <div id="baitestiq"></div>
    @foreach(var item in Model)
    {
        <div class="baitest">
            <div class="ques">
                <img src="~/Hinh_Cauhoi/@item.Cauhoi" />
            </div>
            <div class="anw">
                <div class="dapan">
                    <img src="~/Hinh_Cauhoi/@item.DAn1" />
                </div>
                <div class="dapan">
                    <img src="~/Hinh_Cauhoi/@item.DAn2" />
                </div>
                <div class="dapan">
                    <img src="~/Hinh_Cauhoi/@item.DAn3" />
                </div>
                <div class="dapan">
                    <img src="~/Hinh_Cauhoi/@item.DAn4" />
                </div>
                <div class="dapan">
                    <img src="~/Hinh_Cauhoi/@item.DAn5" />
                </div>
                <div class="dapan">
                    <img src="~/Hinh_Cauhoi/@item.DAn6" />
                </div>
            </div>
            <div class="numbertest">
                <ul>
                    <li>
                        <a href="javascript:;" onclick="loadcauhoi(2)">1</a>
                    </li>
                </ul>
            </div>

Answer 2

首先，您需要返回部分視圖。

2您需要發出一個ajax請求而不是發布

第三，您需要首先測試@ Url.Action（“ BaiTestIQ”，“ TestIQ”）的結果，將其轉換為URL，以直接確保其返回預期的結果而無需ajax調用，以避免側身進入路由等例如看這個

在這里查看工作示例

更新：我現在看到了，您更改了dataType：“ Html”

您需要更改幾件事：1.該方法不會更改任何狀態，因此不應將其聲明為post方法。 您需要刪除[HttpPost]屬性。

2. 您需要了解Ajax參數contentType和dataType。 來自文檔 ：contentType（默認值：'application / x-www-form-urlencoded; charset = UTF-8'）。 這指定您要發送到服務器的數據類型。 而dataType（默認值：Intelligent Guess（XML，json，腳本或HTML））指定應該返回的jQuery。 在您的情況下，它應該是'json'，因為您正在使用LINQ查詢的結果返回。

因此該方法可能類似於：

public JsonResult BaiTestIQ(int id)
{
    var cauhoi = from q in data.Questions
                 join a in data.Answers on q.MaTests equals "IQ"
                 where q.MaCHoi == a.MaCHoi && a.keys == id
                 select new baitest()
                 {
                     Cauhoi = q.Noidung,
                     DAn1 = a.DAn1,
                     DAn2 = a.DAn2,
                     DAn3 = a.DAn3,
                     DAn4 = a.DAn4,
                     DAn5 = a.DAn5,
                     DAn6 = a.DAn6,
                 };
    return Json(cauhoi.ToList(), JsonRequestBehavior.AllowGet);
}

3.轉到ajax調用：

<script>
function loadcauhoi(num) {
    $.ajax({
        url: '@Url.Action("BaiTestIQ","TestIQ")',
        data: { id: num },
        type: "GET",
        cache: false,
        dataType: "json",
        success: function (a) {
            // Replace the div's content with the page method's return.
            alert("success");
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert(errorThrown)} 
    });
}
</script>

**但是我想建議另一種使用帶有局部視圖的ViewModel的方法，因為序列化JSON數據有時會給您帶來錯誤。 快速教程