Ajax in ASP.NET MVC3 Razor

Question

I have a problem with Ajax. I want to make multiple forms and replace div containing one after submiting with some Partial View. It's working for me when I use only one form. I don't know what I'm doing wrong here. Maybe it's becasue of custom editorfor? Here is my code, plese try to help me, I've been trying do this for 2 days.

Index

@model MetriceWeb.Models.TaskInputModel
@{
    ViewBag.Title = "Tasks";
}
<h3>
    Tasks</h3>

@if (Model.Values.Count == 0)
{
   <p>No pendings forms for you at the moment</p>
}
else
{
    @Html.EditorFor(x => x.Values)
}

TaskInputValue (editorfor)

@model MetriceWeb.Models.TaskInputValue
@{string s = "task" + Model.TaskId;}

@using (Ajax.BeginForm("GetFromLibrary", "Metrice", new AjaxOptions
{
HttpMethod = "Get",
UpdateTargetId = s,
InsertionMode = InsertionMode.Replace
}))
{
<div class="editor-field" id="@s">
@Html.HiddenFor(x => x.TaskId, new { @class = "TaskId" , id = "TaskId" })
@Html.HiddenFor(x => x.InputId, new { @class = "InputId" })
<h2>
@Html.DisplayFor(x => x.Task)
</h2>
<span>Created: </span>
@Html.DisplayFor(x => x.Date)

<div>
Input Value

    @Html.EditorFor(x => x.DateValue)
    @Html.ValidationMessageFor(x => x.DateValue)
</div>
<input type="submit" value="Submit" />
</div>
<br />
}

It's entering method in my controller where I'm returning partial view. After submitting my div isn't replacing, the whole new site is loaded. What is wrong here? Please help me, I am in big need.

Answer 1

In order to the Ajax helpers like Ajax.BeginForm work correctly (e.g sending an AJAX request) you need reference in your view the following JavaScript file

jquery.unobtrusive-ajax.js

(and of course before that jquery)

From the Unobtrusive Ajax in ASP.NET MVC 3

An interesting note: since there is no actual JavaScript being emitted when you use unobtrusive Ajax, if you forget to include one or the other script, you won’t see any errors when attempting to submit the Ajax request; it will simply behave like a non-Ajax request.