在输入提交时显示进度图标图像单击 MVC5

Question

我想显示进度图标图像直到我的注册完成。

我的查看代码是

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

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

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