带有Razor的MVC:如何在点击时刷新部分页面? [英] MVC with Razor: how to refresh partial page on click?

问题描述

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

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.

我们希望用户单击以转到Controller方法，调用另一个服务，并在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.

如何在用户单击时刷新HTML.Partial(页面名称)?我尝试了对适当URL的Ajax调用，但是它不会刷新显示.

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.

这是我的代码，试图使用下面的达林·迪米特洛夫(Darin Dimitrov)的建议.

here is my code, trying to use the suggestions from Darin Dimitrov below.

我的ViewModel:

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

主页:

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

将显示详细信息"页面.单击该按钮将执行脚本，但是未命中控制器.我在做什么错了?

The Details page renders. Clicking the button executes the script, but the controller is not hit. What am I doing wrong?

我还将发布其他尝试…

推荐答案

我尝试了对相应URL的Ajax调用，但不会刷新显示.

I've tried an Ajax call to the appropriate URL, but it doesn't refresh the display.

这正是您应该使用的.假设您具有以下视图:

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>

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

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:

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

这篇关于带有Razor的MVC:如何在点击时刷新部分页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！