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数据有时会给您带来错误。 快速教程