jQuery 带有 Razor 的 MVC：如何在点击时刷新部分页面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17844222/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
MVC with Razor: how to refresh partial page on click?
提问by DZx
This project uses MVC3 and Razor. We have a busy page, and the data is coming from a mainframe database via WCF services, so we want to limit what gets loaded at one time. Basic data is loaded on page load, but then there will be a few divs for additional data. We use @Html.Partial(pagename) to render a partial page in the div. This part of the ViewModel will initially be empty, so no data will display.
该项目使用 MVC3 和 Razor。我们有一个繁忙的页面，并且数据是通过 WCF 服务来自大型机数据库，因此我们希望限制一次加载的内容。基本数据在页面加载时加载，但随后会有一些 div 用于附加数据。我们使用 @Html.Partial(pagename) 在 div 中呈现部分页面。ViewModel 的这部分最初是空的，因此不会显示任何数据。
We want a user click to go to a Controller method, call another service, and fill in a section of the ViewModel with more data. Then refresh this section of the page with the data.
我们希望用户点击进入一个 Controller 方法，调用另一个服务，并用更多数据填充 ViewModel 的一部分。然后用数据刷新页面的这一部分。
How do I refresh HTML.Partial(pagename) on a user click? I've tried an Ajax call to the appropriate URL, but it doesn't refresh the display.
如何在用户单击时刷新 HTML.Partial(pagename)？我已尝试对适当的 URL 进行 Ajax 调用，但它没有刷新显示。
Edit: here is my code, trying to use the suggestions from Darin Dimitrov below.
编辑：这是我的代码，尝试使用下面 Darin Dimitrov 的建议。
My ViewModel:
我的视图模型：
namespace Project.ViewModel
{
public class AllData
{
public string Id { get; set; }
public BasicData Basics { get; set; }
public ContactInfo ContactPoints { get; set; } //mainframe data
}
}
The Main page:
主页：
@model Project.ViewModel.AllData
<script type="text/javascript">
$(function () {
$('#loadFromMainFrame').click(function (e) {
var url = $(this).data(url);
$('#MainframeContents').load(url);
});
});
</script>
<div id="basics">
<div>
@Html.DisplayFor(model => model.Basics.FirstName)
</div>
<div>
@Html.DisplayFor(model => model.Basics.LastName)
</div>
</div>
<button id="loadFromMainFrame" data-url="@Url.Action("GetFromMainFrame")">Load from mainframe</button>
<div id="MainframeContents">
<p>Contact Info will go here</p>
</div>
The Controller:
控制器：
public ActionResult Details(string id)
{
BasicData basicdata = new BasicData();
basicdata.FirstName = "Arya";
basicdata.LastName = "Stark";
AllData allData = new AllData();
allData.Basics = basicdata;
return View(allData);
}
public ActionResult GetFromMainframe()
{
AllData allData = new AllData();
allData.ContactPoints = …getting data from mainframe
return PartialView("ContactsSection", allData);
}
The Details page renders. Clicking the button executes the script, but the controller is not hit. What am I doing wrong?
详细信息页面呈现。单击按钮执行脚本，但未命中控制器。我究竟做错了什么？
I'll also post some other attempts I've made…
我还将发布一些我所做的其他尝试......
回答by Darin Dimitrov
I've tried an Ajax call to the appropriate URL, but it doesn't refresh the display.
我已尝试对适当的 URL 进行 Ajax 调用，但它没有刷新显示。
That's exactly what you should have use. Let's suppose that you have the following view:
这正是你应该使用的。假设您有以下视图：
<div id="mainframeContens"></div>
<button id="loadFromMainFrame" data-url="@Url.Action("GetFromMainFrame")">Load from mainframe</button>
and then you could write the following script which will send an AJAX request ti the corresponding controller action when the button is clicked and load the content in the div:
然后您可以编写以下脚本，该脚本将在单击按钮并在 div 中加载内容时向相应的控制器操作发送 AJAX 请求：
$(function() {
$('#loadFromMainFrame').click(function(e) {
e.preventdefault();
var url = $(this).data("url");
$('#mainframeContens').load(url);
});
});
and now all that's left of course is to have the corresponding controller action that will load the data from the mainframe and render a partial view:
现在剩下的当然是拥有相应的控制器操作，该操作将从大型机加载数据并呈现部分视图：
public ActionResult GetFromMainFrame()
{
SomeModel model = ... go hit the mainframe to retrieve the model using a webservice or whatever you are using to hit it
return PartialView("_SomePartial", model);
}
