Question

我想点击＆＃34; 2＆＃34; 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>

enter image description here

感谢您阅读

Answer 1

我改变了但它不起作用!!

我自己学会了，所以很难开始

的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 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 Còn Lại Là: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

1，您需要返回部分视图。

第二，你需要得到ajax请求而不是帖子

第3，您需要首先测试@ Url.Action（“BaiTestIQ”，“TestIQ”）的结果，将其转换为URL，直接确保它返回预期结果而不进行ajax调用以避免进入侧面路由等see this for example

查看工作示例here

更新：我现在看到了，你改变了dataType：“Html”

你需要改变几件事： 1.该方法不会改变任何状态，因此不应将其声明为post方法。您需要删除[HttpPost]属性。

您需要了解ajax参数contentType和dataType。 From the documentation：contentType（默认值：'application / x-www-form-urlencoded; charset = UTF-8'）。这指定了您要发送到服务器的数据类型。而dataType（默认：Intelligent Guess（XML，json，script或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数据有时会让你出错。 A quick tutorial

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

2 个答案: