Display page content with partial view on page on button click

Question

This is my index view page.

<div>
Hello world
</div>
@section footerButton{
    <input type="button" id="button1" value="Button1"/>
}

This is my layout page.

<div id="divFooter">
    @RenderSection("footerButton", required:false)
    </div>

This is my Partial View page.

<h2>This is partial page</h2>

My requirement is after starting the project, when I click the button, the partial content of the page is displayed.

+3

Amit 03 June 15 at 12:39

1 answer

Stephen muecke · Accepted Answer · 2015-06-03T12:55:31+0000

Option 1: enable partial hidden element in view and handle buttons .click()

to show it

Html

<div id="mypartial">
  @Html.Partial("_YourPartial")
</div>

Script

$('#button1').click(function() {
  $('#mypartial').show();
});

CSS

#mypartial {
  display: none;
}

Option 2: Use ajax to call a server method that returns a partial view and updates the DOM

Html

<div id="mypartial"></div>

Script

var url = '@Url.Action("YourMethod")';
$('#button1').click(function() {
  $('#mypartial').load(url);
});

controller

public ActionResult YourMethod()
{
  return PartialView();
}