Question

I want to click the button on the “main view” and populate the partial view in its own . Updated

I have a main view:

 @{
using (Ajax.BeginForm("PastClaims", "Claim", FormMethod.Post, new AjaxOptions { UpdateTargetId = "update_panel", InsertionMode = InsertionMode.Replace }, new { @class = "form-horizontal" }))
{
    <legend>Submit a Claim</legend>
    @Html.EditorForModel()
    <div class="controls">
        <input id="btnCheckForClaims" type="submit" class="btn btn-primary" value="Submit Claim" />
    </div>


    }

I need to click the submit button then display this other view:
If I do below then on the page on the initial load it displays the div

 <div id="update_panel">@Html.Partial("PastClaims")</div>

If I leave the div blank then I get a new partial view.

  <div id="update_panel"></div>

if I leave them null like darrin suggested:

using (Ajax.BeginForm("PastClaims", "Claim", FormMethod.Post, new AjaxOptions { UpdateTargetId = "update_panel", InsertionMode = InsertionMode.Replace }, new { @class = "form-horizontal" }))

I am redirected to the same page (what I want) but the additional partial view is not displayed.

Thanks to Darrin below to get me this far.

Answer 1

You could use an Ajax.BeginForm in this case:

@using (Ajax.BeginForm(null, null, new AjaxOptions { UpdateTargetId = "update_panel", InsertionMode = InsertionMode.Replace }, new { @class = "form-horizontal"}))
{
    @Html.EditorForModel()
    <div class="controls">
        <input id="btnOpenPartialView" type="submit" class="btn btn-primary" value="OpenPartialView" />
    </div>
}

<div id="update_panel">
    @Html.Partial("PartialView")
</div>

and then the corresponding controller action will return the partial view:

[HttpPost]
public ActionResult SomeAction() 
{
    // some processing ...
    return PartialView("PartialView");
}

For Ajax.* helpers to work don’t forget to include the jquery.unobtrusive-ajax.js script:

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