带有 Razor 的 MVC：如何在点击时刷新部分页面？

Question

这个项目使用 MVC3 和 Razor。我们有一个繁忙的页面，数据通过 WCF 服务来自大型机数据库，因此我们希望限制一次加载的内容。基本数据在页面加载时加载，但随后会有一些 div 用于附加数据。我们使用 @Html.Partial(pagename) 在 div 中呈现部分页面。 ViewModel 的这一部分最初是空的，因此不会显示任何数据。

我们希望用户单击以转到 Controller 方法，调用另一个服务，并用更多数据填充 ViewModel 的一部分。然后用数据刷新页面的这一部分。

如何在用户点击时刷新 HTML.Partial(pagename)？我尝试了对适当 URL 的 Ajax 调用，但它没有刷新显示。

编辑：这是我的代码，尝试使用下面 Darin Dimitrov 的建议。

我的视图模型：

namespace Project.ViewModel
{
    public class AllData
    {
        public string Id { get; set; }
        public BasicData Basics { get; set; }
        public ContactInfo ContactPoints { get; set; } //mainframe data
    }
}

主页：

@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>

控制器：

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

详细信息页面呈现。单击按钮会执行脚本，但不会击中控制器。我做错了什么？

我还会发布我所做的其他一些尝试……

Answer 1

我尝试了对适当 URL 的 Ajax 调用，但它没有刷新显示。

这正是您应该使用的。假设您有以下视图：

<div id="mainframeContents"></div>

<button id="loadFromMainFrame" data-url="@Url.Action("GetFromMainFrame")">Load from mainframe</button>

然后您可以编写以下脚本，该脚本将在单击按钮时向相应的控制器操作发送 AJAX 请求并在 div 中加载内容：

$(function() {
    $('#loadFromMainFrame').click(function(e) {
        e.preventdefault();
        var url = $(this).data("url");
        $('#mainframeContents').load(url);
    });
});

现在剩下的当然就是拥有相应的控制器操作，该操作将从大型机加载数据并呈现部分视图：

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