Ajax with asp.net mvc Partial view is not working correctly

Question

I am trying to do a simple example of ajax with mvc but its not working correctly I am based on wrox, professional asp.net mvc 3 book, chapter 8, and plural sight ajax video.

I will paste the code of the relevant code files here, I think it might be a problem with the scripts but I am not really sure.

_layout.csthml (Script partial view and non mandatory section at the end)


<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    @Html.Partial("_css")

</head>
<body>
    <div class="page">
        <header>
            <div id="title">
                <h1>Eva 1.0</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>

            <nav>
                <ul id="menu">                    
                    @if(Request.IsAuthenticated) {
                        <li> @Html.ActionLink("DashBoard", "Index", "Home")</li>                        
                        <li> @Html.ActionLink("Positions", "Index", "Position") </li>
                        <li> @Html.ActionLink("Prospects", "Position", "UserPositionPosition") </li>
                        <li> @Html.ActionLink("Prospect History", "Position", "UserPositionPosition") </li>
                        <li> @Html.ActionLink("Technical Interview", "Position", "UserPositionPosition") </li> 
                        <li> @Html.ActionLink("Manager Interview", "Position", "UserPositionPosition") </li> 
                        <li> @Html.ActionLink("Current Employees", "Position", "UserPositionPosition") </li>
                        <li> @Html.ActionLink("Current Employees History", "Position", "UserPositionPosition") </li>
                    }
@*                    else
                    {
                         <li> @Html.ActionLink("Log On", "LogOn", "Account") </li>
                    }*@
                </ul>
            </nav>
        </header>
        <section id="main">
            @RenderBody()
        </section>
        <footer>
        </footer>
    </div>
    @Html.Partial("_scripts")
    @RenderSection("scripts", false)
</body>
</html>


_scripts.cshtml

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js" type="text/javascript"></script>


Index.cshtml (Where I am trying to achieve the ajax effect)


@model ICollection<Data.Model.Position>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section scripts{
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")  

</p>
<div id="dailydeal">
    @Ajax.ActionLink("Click here to see today's special!", "Create",
                     "Position",
                     new AjaxOptions{ 
                         UpdateTargetId="dailydeal", 
                         InsertionMode=InsertionMode.Replace, 
                         HttpMethod="POST",
                         LoadingElementDuration=5000,
                         LoadingElementId="progress"
                     })
</div>

<div id="progress">
    Loading...
</div>
<table>
    <tr>
        <th>
            name
        </th>
        <th>
            yearsExperienceRequired
        </th>
        <th>
            Actions
        </th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.yearsExperienceRequired)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.PositionID }) |
            @Html.ActionLink("Details", "Details", new { id = item.PositionID }) |
            @Html.ActionLink("Delete", "Delete", new { id = item.PositionID })
        </td>
    </tr>
}

</table>


_Create.cshtml (Partial view with the create form)

@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Create<h2>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Position</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.name)
            @Html.ValidationMessageFor(model => model.name)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.yearsExperienceRequired)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.yearsExperienceRequired)
            @Html.ValidationMessageFor(model => model.yearsExperienceRequired)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>


Position Controller method
      /// <summary>
        /// Create form of the position
        /// </summary>
        /// <returns></returns>
        public PartialViewResult Create()
        {
            Thread.Sleep(2000);
            return PartialView("_Create");
        }

It renders the partial view but it replaces the entire page, the behavior I would expect is that it shows that partial view in the div. Because that page has a grid with data and the div, then the end result I would expect to show the grid and also the Create form. — Luis Valencia
– Luis Valencia, Commented Oct 18, 2011 at 15:26
@MitchelSellers I have the following on a separate file that is referenced by layout. <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/HR.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script> — Luis Valencia
– Luis Valencia, Commented Oct 18, 2011 at 15:26
@MitchelSellers, I have edited the question and included all the files I think are relevant, I still cant make it work, I placed a breakpoint and its executing the method in the position controller, however I am not having the AJAX effect, Its supposed to show the LOADING div for 2 seconds, but that is not happening. — Luis Valencia
– Luis Valencia, Commented Oct 19, 2011 at 8:18

Darin Dimitrov · Accepted Answer · 2011-10-18 15:06:05Z

6

For Ajax.* helpers (such as Ajax.ActionLink) to work make sure that you have referenced the jquery.unobtrusive-ajax.js script:

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

Then use FireBug or Chrome Developer Tools to inspect the AJAX request and see any possible reasons why it might be failing.

answered Oct 18, 2011 at 15:06

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

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

3 Comments

Luis Valencia Over a year ago

that script is referenced also <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

Darin Dimitrov Over a year ago

@Luis, so what do you see in FireBug when the AJAX is triggered? Is the request sent? What is the response from the server? Are you getting some errors?

Luis Valencia Over a year ago

, I have edited the question and included all the files I think are relevant, I still cant make it work, I placed a breakpoint and its executing the method in the position controller, however I am not having the AJAX effect, Its supposed to show the LOADING div for 2 seconds, but that is not happening. I have no idea about how the see the request from the server with firebug :( will google that.

bulltorious · Accepted Answer · 2011-10-18 15:09:04Z

1

UpdateTargetId="dailydeal"

Where is that div? That div needs to exist to be updated.

http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxoptions.updatetargetid.aspx

answered Oct 18, 2011 at 15:09

bulltorious

7,9294 gold badges52 silver badges79 bronze badges

3 Comments

Luis Valencia Over a year ago

its there, it just that this SO editor does not work well and it removed it. But the div id there :)

bulltorious Over a year ago

I had a similar issue, maybe this can help you out. stackoverflow.com/questions/5493928/…

Luis Valencia Over a year ago

I have edited the question and included all the files I think are relevant, I still cant make it work, I placed a breakpoint and its executing the method in the position controller, however I am not having the AJAX effect, Its supposed to show the LOADING div for 2 seconds, but that is not happening. I checked your link but couldnt find something that helps me there.

animuson · Accepted Answer · 2012-02-27 09:05:26Z

1

Remove get or post attributes from controller

edited Feb 27, 2012 at 9:05

animuson♦

54.9k28 gold badges142 silver badges150 bronze badges

answered Feb 24, 2012 at 22:52

zamoldar

59810 silver badges14 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:51:52Z

1

Having the same problem, I updated the Microsoft.jQuery.Unobtrusive.Ajax package using NuGet as found in this helpfull post from mezoid

unobtrusive-ajax-form-for-partial-view

Now, the validation works perfectly within my partial view!

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Sep 3, 2013 at 10:00

Eli

4545 silver badges10 bronze badges

Collectives™ on Stack Overflow

Ajax with asp.net mvc Partial view is not working correctly

4 Answers 4

3 Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related