How can you return a partial view from a controller and inject it into a specific section in ajax

Anubhav Sharma 767 28 Jul 2025

How can you return a partial view from a controller and inject it into a specific section of the page using an AJAX form?

Describe the controller-side and client-side code flow.

Anubhav Sharma

Student

The Anubhav portal was launched in March 2015 at the behest of the Hon'ble Prime Minister for retiring government officials to leave a record of their experiences while in Govt service .

1 Answers

Ravi Vishwakarma 28 Jul 2025

Returning a partial view from a controller and injecting it into a specific section of the page using an Ajax.BeginForm is a common pattern in ASP.NET MVC for dynamic content updates without reloading the whole page.

Submit a form using AJAX (Ajax.BeginForm)
Return a PartialView from the controller
Inject the returned HTML into a DOM element specified via UpdateTargetId

Controller Code

public ActionResult SubmitForm(MyViewModel model)
{
    if (ModelState.IsValid)
    {
        // Perform save or processing logic

        // Return a partial view to update part of the page
        return PartialView("_SuccessMessage", model);
    }

    // If validation fails, return a partial with errors or re-render the form
    return PartialView("_FormPartial", model);
}

Notes:

_SuccessMessage.cshtml and _FormPartial.cshtml are partial views (no layout).
The return type is ActionResult, returning PartialView(...).

Client-Side View Code (Razor)

@model MyViewModel

<div id="formContainer">
    @using (Ajax.BeginForm("SubmitForm", "Home", new AjaxOptions
    {
        HttpMethod = "POST",
        UpdateTargetId = "formContainer", // Where to inject the result
        InsertionMode = InsertionMode.Replace,
        OnSuccess = "onSuccess",
        OnFailure = "onFailure"
    }))
    {
        @Html.EditorFor(m => m.Name)
        <input type="submit" value="Submit" />
    }
</div>

Required Scripts:

<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

Partial View Example: `_SuccessMessage.cshtml`

<div class="alert alert-success">
    Thank you, @Model.Name. Your submission was successful.
</div>

Optional JavaScript Callbacks

function onSuccess(result) {
    console.log("AJAX Success:", result);
}

function onFailure(xhr, status, error) {
    console.log("AJAX Failure:", error);
    alert("Something went wrong.");
}

End-to-End Flow

User fills the form and clicks Submit
Ajax.BeginForm:
1. Hijacks form submission via JavaScript
2. Sends form data to the controller using AJAX
Controller:
1. Processes data
2. Returns a partial view result (HTML only) or JSON data (parse in onSuccess function)
Client:
1. Injects the partial view HTML into the element with id="formContainer" via UpdateTargetId

Tips & Gotchas

Ensure jquery.unobtrusive-ajax.js is loaded after jQuery
Your partial views should not include layout (_Layout.cshtml)
UpdateTargetId must match the DOM element where you want to inject

forum