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

【问题标题】：How can I render a partial page on click a HTML Button?如何在单击 HTML 按钮时呈现部分页面？
【发布时间】：2011-09-08 17:57:50
【问题描述】：

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

我知道这很简单，按钮可以称为“email to”，这将用于一个名为“emailForm”的partialView。但我需要一些帮助。

【问题讨论】：

标签： jquery asp.net-mvc-3 renderpartial

【解决方案1】：

如果可能的话，我会说@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 指向返回您的部分的操作。

这是一个非常基本的实现，如果您的情况变得更复杂（异常处理、参数传递等），它很容易变得更复杂，但是当我需要一个简单的 ajax 请求来触发时，一般布局对我有用。

【讨论】：

为了让 jQuery 更加性感，请替换 ` $.get("", function(data){$("#emailToContent").html(data); }` 和 ` $("#emailToContent").load("";` 就像@smdrager 在他的帖子中写的那样

【解决方案2】：

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

隐藏分区

<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/');
});

【讨论】：

我以前从未见过load jquery 函数......一直以来我一直在使用$.get 像个傻瓜:)
现在你知道了……知道了就成功了一半。 J.I.乔伊！