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.

SwapNeil · Accepted Answer · 2017-08-04 13:54:29Z

3

try this:

Replace @html.ActionLink with @Ajax.ActionLink

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

answered Aug 4, 2017 at 13:54

SwapNeil

5552 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Unbreakable Over a year ago

Same behaviour.

Unbreakable Over a year ago

Are there some other mistakes too?

Chris Pratt Over a year ago

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.

Unbreakable Over a year ago

@ChrisPratt : Shall I add an edit section or add a new question?

SwapNeil Over a year ago

@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

|

Travis Tubbs · Accepted Answer · 2017-08-04 15:43:53Z

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 4, 2017 at 15:43

Travis Tubbs

8771 gold badge14 silver badges32 bronze badges

4 Comments

Unbreakable Over a year ago

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 Over a year ago

Also, can you kindly tell me how my "All" "Top3" and "Bottom3" button should look like

Unbreakable Over a year ago

do I need to put onclick method in each button?

Travis Tubbs Over a year ago

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

Collectives™ on Stack Overflow

How to create partial view via AJAX call

2 Answers 2

13 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related