Hidden Div

<div style="display:none;" id="partial">
    @Html.Partial("SomePartial")
</div>

<button type="button" id="show-partial" />

和脚本

$('#show-partial').click(function(){
    $('#partial').show();
});

使用Ajax加载

要执行此操作，您需要在控制器中创建一个ActionResult，以呈现部分。

<div id="partial"></div>

<button type="button" id="load-partial" />

和脚本

$('#load-partial').click(function(){
    $('#partial').load('/TheController/TheAction/');
});

Answer 2

如果可能的话，我会说@ smdrager的回答是理想的路线。但是，如果您需要从ajax请求中获取html，则有许多方法可以执行此操作...以下是一个示例：）

在您的模板中，您有一个按钮或链接，以及内容的div容器：

<a href="javascript:void(0)" id="emailTo">email to</a>
<div id="emailToContent"></div>

您需要一些快速的javascript来连接客户端功能：

<script type="text/javascript">
  $("#emailTo").click(function(){
    $.get("<url to partial>", function(data){$("#emailToContent").html(data);}
  });
</script>

然后，在您的控制器中，您需要一个返回部分的操作：

public ActionResult EmailTo()
{
  ...
  return PartialView("some partial")
}

确保传入javascript $.get调用的网址指向返回部分内容的操作。

这是一个非常基本的实现，如果你的情况变得更复杂（异常处理，参数传递等），它可能会变得更加复杂，但是当我需要一个简单的ajax请求来启动时，总体布局适用于我。

如何在单击HTML按钮时呈现部分页面？

2 个答案:

Hidden Div

使用Ajax加载