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>

Does the action that you submit to return a partial view, or a full view? Edit: I just noticed you don't include the jquery scripts in your partial view. Try adding them. — AnteSim
I am returning a PartialView however it returns to a new page (not the div partialView). I have added the scripts to the page and it makes no difference. In fact the scripts are also in the main page as well. — David

Stafford Williams Stafford Williams · Accepted Answer · 2011-06-03T00:26:26

Include

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

in your _Layout.cshtml

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

1 Answers