ASP.NET MVC5 Ajax Partial View loading full page

Question

I am using ajax helpers to load data asynchronously, I am using MVC5, EF6 and returning PartialView from controller but partial view is loading on full page instead of updating a DIV asynchronously. Following is my code:

SampleDBContext db = new SampleDBContext();
public ActionResult Index()
{
    return View();
}

// Return all students
public PartialViewResult All()
{
    List<Student> model = db.Students.ToList();
    return PartialView("_Student", model);
}

my index.cshtml code is

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div style="font-family:Arial">

        <script src="~/Scripts/jquery-1.10.2.min.js"></script>
        <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
        <h2>Students</h2>

        @Ajax.ActionLink("All", "All",
    new AjaxOptions
    {
        HttpMethod = "GET", // HttpMethod to use, GET or POST
        UpdateTargetId = "divStudents", // ID of the HTML element to update
        InsertionMode = InsertionMode.Replace // Replace the existing contents
    })

        <br /><br />
        <div id="divStudents">
        </div>
    </div>

</body>
</html>

Markup of _Student.cshtml Partial view is:

@model IEnumerable<GS.MVC_Ajax_Venkat3.Models.Student>
<table class="table" style="border:1px solid black; background-color:greenyellow">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.TotalMarks)
        </th>
    </tr>

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

I have added Keys to web config also as follows

Thanks @Shoe I resolved it, it was some issues regarding script files. — GURMAILse
– GURMAILse, Commented Dec 29, 2014 at 3:25

GURMAILse · Accepted Answer · 2014-12-29 03:29:19Z

0

The problem was that I referenced jquery.unobtrusive-ajax.js twice, both on Layout page and View page. I removed script reference from View and then it worked fine.

answered Dec 29, 2014 at 3:29

GURMAILse

1013 silver badges11 bronze badges

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

Collectives™ on Stack Overflow

ASP.NET MVC5 Ajax Partial View loading full page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related