mvc 3 partial view with Ajax.BeginForm not working (posting to new form arrgh)

Question

I have a mvc 3 form with 2 columns. The left column is a treeview and when a node is selected the div with id='partialView' is updated to show the details of that node. This appears to be work ok. The edit form (which is a partial view) is loaded in the div with id='partialView'.

Now the problem occurs when the user submits this partial view...now it does post back to the controller and the correct method HOWEVER the result is not returned to the div with id='partialView' but posts to a new page.

So this is the scenario where I want the partial view to post and return back replacing the existing partial view.

Is this possible?

I am including my code below for my partial view...

@model DataModel.Code



@using (Ajax.BeginForm("Edit", "Code", new AjaxOptions {
                                    UpdateTargetId = "partialView", 
                                    HttpMethod="POST"

                                    }   
                                    )) {    


    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Code</legend>


        @Html.HiddenFor(model => model.CodeID)

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

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

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

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

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

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

        <p>
            <input type="submit" value="Save" />

        </p>



    </fieldset>
}



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


@Html.Telerik().ScriptRegistrar().jQuery(true)

<script type="text/javascript">

    $(document).ready(function () {



    });


</script>

Answer 1

Include

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

in your _Layout.cshtml