javascript - MVC .NET 4.5 如何在单击按钮时执行模型的方法(无需加载新页面)

Question

我遇到了一个非常简单的问题，我想生成一个带有临时 ID 的 zip 文件，并在单击按钮时更新页面的链接。

因此，我的 View 中出现了这个按钮(实际上是一个链接):

<a href='#' id='downloadGraphA3'>...</a>

这个不可见的链接应该在您单击按钮时更新:

<a id="dlTemp" style="display: none"></a>

所以我想用 JavaScript 调用一个方法“ExportGraphTest”(它生成 zip 文件并返回其路径)，如下所示:

downloadGraphA3.onclick = function () {
    var path = @Model.ExportGraphTest("GraphA3");
    dlTemp.href = path;
    dlTemp.click();
}

这可能吗？我尝试让 ExportGraphTest 方法将 javascript 代码返回给 eval，但它不起作用，并且无论如何都会在页面加载时调用该方法。

我无法在页面加载时调用此方法，因为生成 zip 文件需要时间，而此导出功能不会经常使用(如果没有该功能，页面本身加载时间就已经很长了)。

我知道最简单的方法是打开一个新页面(这就是我的代码现在的工作方式)，但我的客户不想要它......而且我不想重新加载页面，因为它需要很多时间时间。

也许我应该使用 Ajax(我对此不太了解)？提前致谢!

-------------更新-------------

感谢 g.pickardou，我找到了使用 XHR 的解决方案:

/*--------------------------graph Export--------------------------*/
function ExportGraph(graphId) {
    var xhr = getXMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
            eval(xhr.responseText);
        }
    };
    xhr.open('POST', window.location.protocol + '//' + window.location.host + '/' + '@System.Threading.Thread.CurrentThread.CurrentUICulture.Name/Home/ExportGraph', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send('graphId=' + graphId);
}
var dlGA3 = document.getElementById('downloadGraphA3');
if (dlGA3 != null) {
    dlGA3.onclick = function () {
        ExportGraph('GraphA3');
    }
}

然后我的 HomeController 包含这个方法:

        public MvcHtmlString ExportGraph()
    {
        string graphId = this.Request.Params["graphId"];
        (...)
        return new BSH2O.Models.HomeModel(zoneLabel, plantLabel, zoneId, plantId, modelId, Session).ExportGraph(graphId);
    }

模型的 ExportGraph 方法生成 zip 文件并返回这种字符串:

dlTemp.href = '/BSH_Data/CsvZipTempDir/2524b0eb-e0a1-454f-992a-1fde1d903e67/2524b0eb-e0a1-454f-992a-1fde1d903e67.zip';dlTemp.click();

Answer 1

您不需要为此隐藏 anchor 。您似乎正在使用某些自定义 @Model.ExportGraphTest("GraphA3") 函数在服务器上生成第一个 anchor 链接。所以你需要的是:

<a href="@Model.ExportGraphTest("GraphA3")">...</a>

现在你可以摆脱所有的 javascript 和隐藏的 anchor 了。

<小时/>

更新:

我一定误解了你的问题。从您的评论来看，由于某些对我来说非常奇怪的原因，您试图避免调用 Model.ExportGraphTest 函数，直到单击按钮。由于这是服务器端功能，因此您有两种可能性来实现:

1. 用 JavaScript 重写此函数内的逻辑，以便您可以在单击按钮时调用它
2. 向服务器发出 AJAX 请求，以在单击按钮时计算 URL。

让我展示一个如何实现第二个的示例。首先编写一个 Controller 操作，该操作将采用模型的必要属性来计算链接:

public ActionResult GetLink(string graphType, string foo, string bar)
{
    string link = ... calculate the link
    return Json(new { href = link }, JsonRequestBehaviot.AllowGet);
}

然后在客户端上您将拥有 anchor :

@Html.ActionLink(
    "download graph", 
    "getlink", 
    "somecontroller", 
    new {
        graphType = "GraphA3",
        foo = Model.Foo,
        bar = Model.Bar,
    }, 
    new { @class = "download" }
)

单击此 anchor 后，您将使用 AJAX 调用操作来计算值:

$('.download').click(function() {
    $.ajax({
        url: this.href,
        type: 'GET',
        cache: false,
        success: function(result) {
            window.location.href = result.href;
        },
        error: function() {
            alert('Oops, something went wrong. Look in the network tab of FireBug to see what did the server return as error during the AJAX request.');
        }
    });
    return false;    
});

话虽如此，恕我直言，这种方法是有缺陷的。我建议您在页面加载时计算链接。