Question

I have a partial view with a form in it that I place on to my page using an @ajax.ActionLinK

  @Ajax.ActionLink("Update File", "CreateFileVersion", new AjaxOptions() { UpdateTargetId = "CreateFileVersion", InsertionMode = InsertionMode.Replace })

and here is my partial view

     @model CasWeb.Models.DataContext.FileVersion
    @{
        Layout = null;
    }
    <h4>Create File Version</h4>
    @using (Html.BeginForm())
    {
    @Html.ValidationSummary()

    <fieldset>
        <legend>File Version</legend>
        <div class="editor-label">
            @Html.LabelFor(model => model.VersionNumber)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.VersionNumber)
            @Html.ValidationMessageFor(model => model.VersionNumber)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.ActivationTime)
        </div>
        <div class="editor-field">
            @Html.EditorFor(m => m.ActivationTime)
            @Html.ValidationMessageFor(model => model.ActivationTime)
        </div>
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

This all works great, the user clicks on the link and the form appears with the “CreateFileVersion” div.

The problem comes with validation. When the user submits the form it goes to my controller which checks the data and returns the partial view back if it invalid. This partial view is no longer within the “CreateFileVersion” div, it now takes over the entire page.

How can I keep the partial view returned from my contoller within the “CreateFileVersion” div after validation.

Thanks

Answer 1

You should use an Ajax.BeginForm inside your partial instead of Html.BeginForm. This would allow you to submit the form using an AJAX call and specify the same update target id:

@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "CreateFileVersion" }))
{
    ...
}