Home/ Questions/Q 6703833
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T07:13:06+00:00

I am trying to do a simple example of ajax with mvc but its

  • 0

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");
        }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0