asp.net-mvc-4 - 单击按钮时在页面中显示部分 View 页面内容

Question

这是我的索引 View 页面。

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

这是我的布局页面。

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

这是我的部分 View 页面。

<h2>This is partial page</h2>

我的要求是，当我点击按钮运行项目后，将显示部分页面内容。

Answer 1

选项 1:将部分包含在 View 的隐藏元素中并处理按钮 .click() 事件以显示它

HTML

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

脚本

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

CSS

#mypartial {
  display: none;
}

选项 2:使用 ajax 调用返回局部 View 并更新 DOM 的服务器方法

HTML

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

脚本

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

Controller

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