首页 文章

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

提问于
浏览 次
4

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

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

如何在用户点击时刷新 HTML.Partial(pagename)？我已尝试对相应的 URL 进行 Ajax 调用，但它不刷新显示。

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

我的 ViewModel：

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

“详细信息”页面呈现。单击该按钮可执行脚本，但未命中控制器。我究竟做错了什么？

我还会发布一些其他的尝试......

jquery asp.net-mvc razor

1 回答

  • 13

    我已尝试对相应的 URL 进行 Ajax 调用，但它不刷新显示。

    这正是你应该使用的。我们假设你有以下观点：

    <div id="mainframeContens"></div>

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

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

    $(function() {
    $('#loadFromMainFrame').click(function(e) {
        e.preventdefault();
        var url = $(this).data("url");
        $('#mainframeContens').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);
}
    回复于

相关问题