Question

这个项目使用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);
    }

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

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

Answer 1

我尝试过对相应网址的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);
}

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

1 个答案: