【问题标题】:update partial view ajax with no action result更新没有操作结果的部分视图 ajax
【发布时间】:2014-02-03 21:50:38
【问题描述】:

所以我在 C# 中有一个很长的函数。 我的表单包含一个显示字符串的局部视图。简单的。 提交表单后,控制器将触发 long 函数。 我试图做的是在该部分视图中显示一个解释该过程如何进行的文本。 但我不知道如何在不停止我的功能的情况下进行 ajax 调用来刷新。 这是我所拥有的:

部分:

@model System.String
    Performing: @Model.ToString()

主视图:

<div  id="divLoading" style="margin: 0px; padding: 0px; position: fixed; right: 0px;
    top: 0px; width: 100%; height: 100%; background-color: #666666; z-index: 30001;
    opacity: .8; filter: alpha(opacity=70);display:none">
    <p style="position: absolute; top: 30%; left: 45%; color: White;">
        Saving, please wait... <img src="../../Content/images/ajax-loading.gif">
    </p>
    <p style="position: absolute; top: 37%; left: 45%; color: White;">
        @Html.Partial("_ProgressList", completedProgress);
    </p>
</div>

控制器:

[HttpPost]
[ValidateInput(false)]
public ActionResult longFunction(FormCollection collection)
{
    PartialView("_Partial", response); //Update here but continue execution
    ...
    ...
}

这可能吗?

【问题讨论】:

  • HTTP 不是这样工作的。考虑使用 Signalr。

标签: c# ajax asp.net-mvc razor partial-views


【解决方案1】:

您应该在某些功能完成执行时对客户端进行实时更新。 SignalR 是一个不错的选择。

这是一个向客户端发送更新的示例虚拟程序。您可以将Thread.Sleep 部分替换为对子方法的调用,并使用某种算法计算百分比。这个程序是给你一个想法。这不是最优解!

[HttpPost]
public ActionResult DoIt()
{
    var context = GlobalHost.ConnectionManager.GetHubContext<IssuesHub>();
    Thread.Sleep(3000);
    context.Clients.All.updateProgress(new { Status = "10 %" });
    Thread.Sleep(3000);
    context.Clients.All.updateProgress(new { Status = "50 %" });
    Thread.Sleep(3000);
    context.Clients.All.updateProgress(new { Status = "60 %" });

    return Json(new { Status = "100%" });
}

在客户端

$(function () {
    var progress = $("#progress");
    var chat = $.connection.issuesHub;       
    chat.client.updateProgress = function (result) {
        progress.html(result.Status);
    };                
    $.connection.hub.start();

  $("#someSubmitButton").click(function(e){
    e.preventDefault();
    $.post("@Url.Action("DoIt","Home")");
  });
});

【讨论】:

    猜你喜欢
    • 2015-06-13
    • 2023-04-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-09-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多