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

Question

我是MVC3.0的新手,必须使用jquery.我想知道有人可以帮助我如何在单击HTML按钮时呈现部分视图页面？

我知道这很简单,按钮可以称为"电子邮件",它将用于名为"emailForm"的partialView.但我需要一些帮助.

Answer 1

您可以预先渲染页面,但在隐藏的div中,或者您可以使用AJAX在单击后加载它.

隐藏的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调用的url 指向返回partial的操作.

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