如何显示加载图像，直到保存数据并通过单击Asp.Net MVC中的按钮重定向到另一页？

Question

I need to show a page loading image until data is saved in the database and the View is redirected to another page when the submit button is clicked. 我需要显示一个页面加载图像，直到将数据保存在数据库中并且单击“提交”按钮后，“视图”将重定向到另一个页面。 In my View I have a loading image inside a div with id divLoading . 在我的视图中，我在id为divLoading的div中有一个加载图像。

I wish to show the loading image until the data is saved and the View redirected to another page by clicking the submit button. 我希望显示加载图像，直到保存数据并单击“提交”按钮将“视图”重定向到另一个页面。 I've tried many ways, but it's not working. 我已经尝试了很多方法，但是没有用。 The View and Controller code is given below. 视图和控制器代码如下。

View: 视图：

@using (Html.BeginForm("SaveCountry","Country",FormMethod.Post))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<body class="nav-md" style="color:black">
    <div class="container body">
        <div class="right_col text-center " role="main" style=" height: 680px;">
            <div class="x_panel center" style="width:250px ; ">
                <h2 class="text-center">State Creation</h2>
            </div>
            <div class="container body">
                <div class="x_panel text-left" style="width:250px; color:black">
                    <fieldset>
                        <legend></legend>
                        <div class="form-group">
                            @Html.Label("Display Name", new { @class = "control-label" })
                            @Html.TextBoxFor(model => model.DisplayName, new { @class = "form-control", type = "text", id = "Date" })
                            @Html.ValidationMessageFor(model => model.DisplayName)
                        </div>
                        <div class="form-group">
                            @Html.Label("Print Name", new { @class = "control-label" })
                            @Html.TextBoxFor(model => model.PrintName, new { @class = "form-control", type = "text", id = "Date" })
                            @Html.ValidationMessageFor(model => model.PrintName)
                        </div>
                        <div class="form-group">
                            @Html.Label("Country")
                            @Html.DropDownList("CountryID", null, "Select", new { @class = "form-control required" })
                            @Html.ValidationMessageFor(model => model.CountryID)
                        </div>
                        <div class="row no-print pull-right">
                            <div class="col-xs-12">
                                <button type="submit" class="btn btn-success pull-left" value="Save">Save <i class="fa fa-save"></i></button>
                                <a class="btn btn-primary" href="@Url.Action("Index")"><i class="fa "> Details</i></a>
                            </div>
                        </div>
                    </fieldset>
                </div>
            </div>
        </div>
     </div>
      </body>

   <div Id="divLoading">
   <img src="~/images/Img"/>
  }

Controller: 控制器：

public ActionResult SaveCountry(CountryViewModel CVM)
{
    return RedirectToAction("CountryDetails");
}

public ActionResult CountryDetails()
{
    var  objVisitorsList = db.Country.ToList();
    return View(objVisitorsList.ToList());
}

It's simple question, but I've tried many javascript codes and it's not working. 这是一个简单的问题，但我尝试了许多JavaScript代码，但无法正常工作。

Please help me to resolve this issue. 请帮助我解决此问题。

Thanks. 谢谢。

Answer 1

There are many ways to do this, and I'll suggest one that should get you started off:- 有很多方法可以做到这一点，我建议您应该从以下一种方法开始：-

(i) Assign a unique id to your form (eg form-id ) by changing your form code to: （i）通过将表单代码更改为：为表单分配唯一的ID（例如form-id ）：

@using (Html.BeginForm("SaveCountry", "Country", FormMethod.Post, new { id = "form-id" })) {
}

(ii) Put the loader on your page with a unique id (I've changed your code for the loader, which won't work properly: your didn't close the div and assigned "Id" instead of "id"). （ii）将加载程序放在具有唯一ID的页面上（我更改了加载程序的代码，该代码无法正常运行：您没有关闭div并分配了“ Id”而不是“ id”）。 The div is hidden until the form is submitted: div是隐藏的，直到提交表单为止：

<div id="divLoading" hidden>
    <img src="path/to/your/image/loading-image.png" />
</div>

(iii) Style the loading div to go somewhere useful. （iii）将加载div的样式设置为有用的地方。 This example css centers the div: 此示例css将div居中：

#divLoading{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform: -webkit-translate(-50%, -50%);
    transform: -moz-translate(-50%, -50%);
    transform: -ms-translate(-50%, -50%);
}

(iv) Reference some script (I've assumed you're using jQuery here) to show the loader when the form is submitted (and after any validation has been completed), for example: （iv）引用一些脚本（我假设您在此处使用jQuery）来显示提交表单时（以及完成任何验证之后）的加载程序，例如：

<script>
    $("#form-id").on("submit", function () {
        $("#divLoading").show();
    });
</script>

(v) Given that your page will redirect, you can probably leave the loader until the page redirects, but if you need to hide the loader before that happens, you can use: （v）鉴于您的页面将重定向，您可以在页面重定向之前离开加载程序，但是如果您需要在此之前隐藏加载程序，则可以使用：

$("#divLoading").hide();

on some event to hide the loader, and for it to be ready for the next form submit. 在某些情况下隐藏加载程序，并准备好提交下一个表单。

Answer 2

Use Ajax Form Here is sample code: 使用Ajax表单这是示例代码：

View: 视图：

@using (Ajax.BeginForm("SaveCountry","Country",   new AjaxOptions { OnSuccess = "onSuccess", LoadingElementId = "divLoading" },new { @id = "countryForm" })){
<div>
Form Elements....
</div>
<div id="divLoading">
   <img src="~/images/Img"/>
</div>
}

In Javascript: 用Javascript：

var onSuccess = function(result) {
    if (result.url) {
       window.location.href = result.url;
    }
}

In Controller: 在控制器中：

public ActionResult SaveCountry(CountryViewModel CVM)
{
    return Json(new { url = Url.Action("CountryDetails") });
}

如何显示加载图像，直到保存数据并通过单击Asp.Net MVC中的按钮重定向到另一页？

问题描述

2 个解决方案

解决方案1
0 2018-03-21 18:23:09

解决方案2
0 2018-03-22 08:48:33

如何显示加载图像，直到保存数据并通过单击Asp.Net MVC中的按钮重定向到另一页？

问题描述

2 个解决方案

解决方案1 0 2018-03-21 18:23:09

解决方案2 0 2018-03-22 08:48:33

解决方案1
0 2018-03-21 18:23:09

解决方案2
0 2018-03-22 08:48:33