Asp.Net - How to call ActionResult with ajax

Question

I want to click "2" Ajax will call ActionResult and put new question up but not rerun page i have been trying two day but it haven't worked People help me, please 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);
        }

Function 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>

In HTML:

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

enter image description here

Thanks for reading

Delete `dataType: "Json",` (you returning html) and its `success: function (a) { $(someElement).html(a); }` - but your method should be returning `PartialView(cauhoi)`, not View(cauhoi)` — , Mar 31 '18 at 10:54
Which ever `
` you want to replace the contents of - you have not shown what that is so I cannot guess! - just give is an `id` attribute and use that — , Mar 31 '18 at 11:02
I have updated the full html, change function, you watch it help me — Cuong Truong Quoc, Mar 31 '18 at 11:16
Answers go in the answer section. I have rolled back your edit. Add you own answer if you want. — , Mar 31 '18 at 11:34
why do you rolled me edit? you can edit ques for it to work? — Cuong Truong Quoc, Mar 31 '18 at 11:49
No! This is a question and answer site. Answers go in the answer section — , Mar 31 '18 at 11:50

score 0 · Accepted Answer · answered Mar 31 '18 at 11:57

I changed but it dont work!!

I learned it myself so it was hard to get started

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);
    }

Function 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>

Full 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>

score 0 · Answer 2 · 2018-03-31T13:56:35.417

1st you need to return a partial view.

2nd you need to make a get ajax request and not a post

3rd you need to test first the result of @Url.Action("BaiTestIQ","TestIQ"), translate this to a URL, directly to make sure it returns the expected results without the ajax call to avoid getting into sideways with routing etc. see this for example

See a working example here

Update: I see it now, you changed dataType: "Html"

You need to change several things: 1. The method is not changing any state so it should not be declared as a post method. You need to remove [HttpPost] attribute.

You need to be aware of ajax parameters contentType and dataType. From the documentation: contentType (default: 'application/x-www-form-urlencoded; charset=UTF-8'). This specifies what type of data you're sending to the server. And dataType (default: Intelligent Guess (XML, json, script, or HTML)) specifies what jQuery should expect to be returned. In your case, it should be 'json' because you are using the result return from a LINQ query.

So the method might look like:

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. Moving to the ajax call:

<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>

**But I'd like to suggest another approach using a ViewModel with a partial view because serializing JSON data can sometimes get you errors. A quick tutorial

@Url.Action("BaiTestIQ",TestIQ" have worked. You can watch update in answer top. — Cuong Truong Quoc, Mar 31 '18 at 13:13

Asp.Net - How to call ActionResult with ajax

2 Answers2