Master-Detail Sample Code for MVC 3 Razor (using Ajax for details) - Part 2

I am currently showing a treeview in a left column. When a user selects a node, i am loading the right column #details with the response from an ajax call. This works nicely.

I now want to submit the right columns #details via ajax as well. I am able to capture the post back to the server however when i return a string back to the #details section it is loading the entire page with string 'saved successfully'

I really want the string 'saved successfully' to be placed in a div element in the right column.

This is an ajax response, again doing another ajax response (which i want to return to the first ajax response).

Is this possible?

My edit form looks like the following

@using (Ajax.BeginForm("Edit", new AjaxOptions { UpdateTargetId = "#results" })) { 


@Html.ValidationSummary(true)

if (Model != null) {     
    <fieldset>
    <legend>Code</legend>

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

    <div class="editor-label">
        @Html.LabelFor(model => model.Description)
    </div>
    <div class="e开发者_Python百科ditor-field">
        @Html.EditorFor(model => model.Description)
        @Html.ValidationMessageFor(model => model.Description)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.Note)
    </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.DropDownListFor(model => model.TopicID, (SelectList)ViewData["Topics"], "Select")
        @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>

<div id="results">
    Status
</div>

---

Make sure you have included the following script to your page if you want to use the Ajax.* helpers:

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

If you don't include it there is nothing out there to make sense of the HTML5 data-* attributes emitted by the Ajax.* helper and AJAXify this form => the form performs a normal submit and renders the results.