AJAX not working in ASP .Net MVC

Question

I am not quite getting how to do AJAX or rather use jQuery in case of a partial view . Here is the issue I am facing :

In my view MyAction.cshtml which receives a collection of StudentViewModel objects :

@model IEnumerable<MvcApplication4.ViewModels.StudentViewModel>  
@{
    ViewBag.Title = "MyAction";
    Layout = "~/Views/Shared/_myTemplateLayoutPage.cshtml";
}

<script type="text/javascript" src="/scripts/jquery-1.3.2.js"></script>
<script type="text/javascript">
    $('.editDetails').click(function () {
        alert('Edit Clicked');
    });
</script>

<div id="content">
    <div id="mainpage">

    <h2>Registration Details</h2>
        <ul>
        @foreach(var item in Model) 
        {
            <li>
                @Ajax.ActionLink(item.UserName, 
                "GetUserDetails",
                new { id = item.Student.StudentId },
                    new AjaxOptions
                    {
                        UpdateTargetId = "StudentDetails", 
                        InsertionMode = InsertionMode.Replace,
                        HttpMethod = "GET" @*HTTP method *@
                    }
                )
            </li>
        }
        </ul>
        <div id ="StudentDetails"></div>
    </div>
    <div id="sidebar">
    </div>
    <div id="sidebarbottom"></div>
</div>

I have certain username hyperlinks which are essentially ajax action links . When clicked GetUserDetails controller action method gets fired that returns the specfic partial view containing the StudentViewModel object details.

    [HttpGet]
    public PartialViewResult GetUserDetails(int? id)
    {
        StudentContext context = new StudentContext();

        var result = context.Students.Where(s => s.StudentId == id)
            .Include(s => s.Department)
            .Select(s => new StudentViewModel
                {
                    Student = s,
                    UserName = s.UserName,
                    DepartmentName = s.Department.DepartmentName
                }).First();

        return PartialView("_StudentDetails",result);

    }

The partial view _StudentDetails looks like :

@model MvcApplication4.ViewModels.StudentViewModel

<h2>Student Details</h2>
<table border="1">
    <tr>
        <th>
            Name
        </th>
        <th>
            User Name
        </th>
        <th>
            Department
        </th>
        <th colspan="2">
            Actions
        </th>
    </tr>
    <tr>
        <td>
            @Html.DisplayFor(x => x.StudentFullName)
        </td>
        <td>
            @Html.DisplayFor(x => x.UserName)
        </td>
        <td>
            @Html.DisplayFor( x => x.DepartmentName)
        </td>
        <td>
            <input type="submit" class="editDetails" value="Edit Details" name="Command" />
        </td>
        <td>
            <input type="submit" class="addDetails" value="Add Details" name="Command" />
        </td>
    </tr>
</table>

Those get rendered exactly the way they are expected to. The partial View gets rendered in the StudentDetails div id.

Now when I click the edit button the alert does not get fired .

    <script type="text/javascript" src="/scripts/jquery-1.3.2.js"></script>
    <script type="text/javascript">
    $('.editDetails').click(function () {
        alert('Edit Clicked');
    });
</script>

What am I missing ?

References in the _myTemplateLayoutPage.cshtml have been taken care of.

Google chrome shows following errors in the console log.

And the bundle config looks like :

       public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.unobtrusive*",
                    "~/Scripts/jquery.validate*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

        bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                    "~/Content/themes/base/jquery.ui.core.css",
                    "~/Content/themes/base/jquery.ui.resizable.css",
                    "~/Content/themes/base/jquery.ui.selectable.css",
                    "~/Content/themes/base/jquery.ui.accordion.css",
                    "~/Content/themes/base/jquery.ui.autocomplete.css",
                    "~/Content/themes/base/jquery.ui.button.css",
                    "~/Content/themes/base/jquery.ui.dialog.css",
                    "~/Content/themes/base/jquery.ui.slider.css",
                    "~/Content/themes/base/jquery.ui.tabs.css",
                    "~/Content/themes/base/jquery.ui.datepicker.css",
                    "~/Content/themes/base/jquery.ui.progressbar.css",
                    "~/Content/themes/base/jquery.ui.theme.css"));
    }

Answer 1

You are dynamically generating the Edit buttons in the view (i.e. they are added after the page it first loaded You need to use event delegation to handle dynamically added elements. Change the script to

$('#StudentDetails').on('click', '.editDetails', function () {
    alert('Edit Clicked');
});

in this case the element with id="StudentDetails" is the closest ancestor that exists in the DOM when the page is first rendered.

Answer 2

Make sure jquery is loadedproperly. you can use cdn something like this.

    <script src="//code.jquery.com/jquery-2.2.1.js"></script>

Because the partial view is dynamically loaded you have to use $(document).on function. Also I would put that everything inside document.ready()...

    $(function() {
      $(document).on("click", ".editDetails", function () {
        alert('Edit Clicked');
     });
    });

Answer 3

If you're going put the <script> elements in yourself, you can't just throw a ~ character in there - you need to resolve it to a real URL when the page is rendered.

<script src='@Url.Content("~/Scripts/jquery-1.9.1.js")' type='text/javascript'></script>

Of course, if you do this, you're cheating yourself out of all the awesomeness that is bundling.

Answer 4

Please replace your your AJAX Actionlink's AJAXOptions with the below one. Please note OnComplete = "RegisterClickHanders"

<li>
    @Ajax.ActionLink(item.UserName,
    "GetUserDetails",
    new { id = item.Student.StudentId },
        new AjaxOptions
        {
            UpdateTargetId = "StudentDetails",
            InsertionMode = InsertionMode.Replace,
            HttpMethod = "GET" @*HTTP method *@,
            OnComplete = "RegisterClickHanders"
        }
    )
</li>

And in your main page add this function.

<script>
    function RegisterClickHanders() {
        $('.editDetails').click(function () {
            alert('Edit Clicked');
        });
    }
</script>