在输入提交上显示进度图标图像单击 MVC5答案

【问题标题】：Show Progress Icon Image on Input submit click MVC5在输入提交上显示进度图标图像单击 MVC5
【发布时间】：2017-11-30 12:44:06
【问题描述】：

我想在我的注册完成之前显示进度图标图像。

我的视图代码是

@using (Html.BeginForm("RegisterStudent", "Account", FormMethod.Post, new { }))
{
 @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control", id = "txtname", placeholder = "Name" } })              
  <input type="submit"  value="submit" />
}

<script>
    $('input[type = submit]').click(function(){
        $.blockUI({ css: {
            border: 'none',
            padding: '15px',
            backgroundColor: '#000',
            opacity: .6
        } });
    });
</script>

当我点击输入按钮时，我想显示进度图像，直到控制器端的注册完成，完成注册后，进度图像应该消失

【问题讨论】：

为什么不使用 ajax ？然后，您可以显示任何图形，直到您从服务器调用中获得响应。
不，我不想使用 ajax。这种方式不可以吗？
如果你做一个普通的表单提交，你就是在提交表单。无论您启动什么块 UI 图形，使用可能会看到几分之一秒，然后会看到来自服务器的响应。你试过你的代码吗？那会发生什么？
我试过 $('input[type = submit]').click(function() 但提交点击时没有显示任何内容
如果要显示像block ui这样的进度条，需要使用ajax进行表单提交。

标签： javascript jquery asp.net-mvc asp.net-mvc-4 asp.net-mvc-3

【解决方案1】：

如果您需要在提交时显示进度图标图片，请点击以下操作

查看内容

@using (Html.BeginForm("RegisterStudent", "Account", FormMethod.Post, new { }))
{
 @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control", id = "txtname", placeholder = "Name" } })  
<input type="submit" id="submitfilteration" class="btn btn-default btn-browse" value="Register as Tutor" />
<input type="submit" id="gotocontroller" style="display:none" />
}

<div class="loader" style="display:none"><div class="loader_inner"><img src="/Content/images/loading-gear.gif" id="gif" style="width: 100px;"></div></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
        $('#submitfilteration').click(function (evt) {
            evt.preventDefault();
            var $form = $('form');
            if ($form.valid()) {// Will Check if any validation occurs
                $(".loader").show();
                $("#gotocontroller").click();// Here then after redirect to same or other page to make loader hide from controller side
            }
        });
</script>

风格

<style>
.loader {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    text-align: center;
    width: 100%;
}
.loader_inner {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}
</style>

在 AJAX 的情况下

 function approvestudentrequest(id) {
    $(".loader").show();              
    $.ajax({
        url: '/Account/approvestudentrequest',
        type: 'GET', // You can use GET
        data: { 'StudentRequestId': '"abc"'},
        dataType: "json",
        context: this,
        cache: false,
        success: function (data) {
            if (data == "Success") {                   
                $(".loader").hide();
            }
            else { 
         $(".loader").hide(); 
          alert('Some Error'); }
        },
        error: function (request) {
            $(".loader").hide();
            console.log(request);                
        }
    });       
}

【讨论】：