How to create partial view via AJAX call

Question

I am in learning phase and I want to create partial view from Ajax call. But for every click the page gets redirected to a altogether New Page. Below is my attempt.

Link I referred from Stack Overflow SO LINK

Model

public class Student
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int Age { get; set; }
}

Home Controller:

public ActionResult PartialViewContainer()
{
    return View();
}

public PartialViewResult All()
{
    var students = _context.Students.ToList();
    return PartialView("_Student", students);
}

public PartialViewResult Top3()
{
    var students = _context.Students.OrderByDescending(s => s.Age).Take(3);
    return PartialView("_Student", students);
}

public PartialViewResult Bottom3()
{
    var students = _context.Students.OrderBy(s => s.Age).Take(3);
    return PartialView("_Student", students);
}

Main View located inside Home Folder

@{
    ViewBag.Title = "PartialViewContainer";
}
<div style="font-family: Arial">
            <h2>Students</h2>

            @Html.ActionLink("All", "All", new AjaxOptions   {
            HttpMethod = "GET",
            UpdateTargetId = "divStudents",
            InsertionMode = InsertionMode.Replace
        })
            <span style="color:Blue">|</span>
            @Html.ActionLink("Top3", "Top3", new AjaxOptions{
            HttpMethod = "GET",
            UpdateTargetId = "divStudents",
            InsertionMode = InsertionMode.Replace
        })
            <span style="color:Blue">|</span>
            @Html.ActionLink("Bottom", "Bottom3", new AjaxOptions{
            HttpMethod = "GET",
            UpdateTargetId = "divStudents",
            InsertionMode = InsertionMode.Replace
        })
  <div id="divStudents"></div>
</div>

"_Student" Partial view located inside "Shared" folder

@model IEnumerable<WebApplication3.Models.Student>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table" style="border: 1px solid black; background-color: silver">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Age)
        </th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Age)
        </td>
    </tr>
}
</table>

Initial page:

After Ajax Call

P.S: I have included jquery plug in.

But I could not find jquery.unobstrusice-ajax.js in my ASP.Net MVC 5 project template, so I have not included it.

Please guide me what am I doing wrong here.

EDIT 1

Replaced @html.ActionLink with @Ajax.ActionLink, but still it's getting redirected to a new page.

score 3 · Accepted Answer · answered Aug 04 '17 at 13:54

3

try this:

Replace @html.ActionLink with @Ajax.ActionLink

 @Ajax.ActionLink("All", "All", new AjaxOptions   {
        HttpMethod = "GET",
        UpdateTargetId = "divStudents",
        InsertionMode = InsertionMode.Replace
    })

answered Aug 04 '17 at 13:54

SwapNeil

447
2
13

Same behaviour. – Unbreakable Aug 04 '17 at 13:57
Are there some other mistakes too? – Unbreakable Aug 04 '17 at 13:57
This is the answer. If it's still not working, you have some other issue at play, and should open a new question about that. – Chris Pratt Aug 04 '17 at 13:58
@ChrisPratt : Shall I add an edit section or add a new question? – Unbreakable Aug 04 '17 at 13:59
@Unbreakable it working at my end.. also check if `jquery.unobtrusive-ajax.js` reference added in your main page.. **Note:the js should be added only once** – SwapNeil Aug 04 '17 at 14:01
where to find that plugin. I am new to all this. I could not find it in my sample ASP.Net MVC 5 application. – Unbreakable Aug 04 '17 at 14:02
Typically, you should ask a new question, as otherwise, comments and answers start to become confusing. Given that your question was relatively vague about the exact nature of the problem and the obvious problem was caught early, you could probably get by with an edit, though. – Chris Pratt Aug 04 '17 at 14:02
@ChrisPratt: Thanks a ton for your suggestions. :) . – Unbreakable Aug 04 '17 at 14:03
@ChrisPratt: Do I explicitly need to download Jquery-unobstrusive.js plug in. Is it not included in the project itself. Please guide me. – Unbreakable Aug 04 '17 at 14:05
I could not find it in the script folder. – Unbreakable Aug 04 '17 at 14:05
@ChrisPratt: I downloaded the package and everything is working fine now. Thanks :) – Unbreakable Aug 04 '17 at 14:12
@swapnilnax: Thank you for your guidance bhai! – Unbreakable Aug 04 '17 at 14:13
@swapnilnax: Can you kindly tell me, if you had to do something like this, you would have written the same code right? Or is there any other type of ajax call or better way to do all of this. Or the code I have mentioned in Original Question looks okey to you or its obsolete or something? – Unbreakable Aug 04 '17 at 16:20

score 1 · Answer 2 · answered Aug 04 '17 at 15:43

1

Keep in mind. AJAX CANNOT change the page.

I personally steered away from the unobtrusive ajax framwork. I just used good ole AJAX What is happening is that ajax is not actually working and it is actually just doing an html GET.

Invoke a function like this when you press a button. This is how I solved the similar problem that I had.

This code may not be a direct cut and paste, but it is pretty close.

function CallAjax(actionPath) {
    $.ajax({
        url: actionPath,
        type: 'POST',
        success: function (partialView) {
            $("#sampleContainer").html(partialView);
        },
        error: function () {
            alert('error');
        }
    });
}

answered Aug 04 '17 at 15:43

Travis Tubbs

827
1
14
32

Interesting, So if I do something I like, I need to write just one ajax, and it will handle all three button clicks (see my 3 buttons in original question). – Unbreakable Aug 04 '17 at 16:14
1

Also, can you kindly tell me how my "All" "Top3" and "Bottom3" button should look like – Unbreakable Aug 04 '17 at 16:15
1

do I need to put `onclick` method in each button? – Unbreakable Aug 04 '17 at 16:16
The way they work is pretty simple. you can use this one function to call all three. You just pass a string to the function being 'controller/action' and you call it like onclick="CallAjax('myController/MyAction')" so this one function can be called for all three of your buttons – Travis Tubbs Aug 04 '17 at 17:15

How to create partial view via AJAX call

2 Answers2