BlockUI на нажатие кнопки с помощью счетчика

Question

У меня есть форма, которая отображает PartialView для меня (при нажатии кнопки).Все работает хорошо:

        <div class="form-group">
            @Html.LabelFor(m => m.Code, new { id = "Code", @class = "col-md2 control-label" })
            <div class="col-md-12">
                @Html.TextAreaFor(m => m.Code, new { @class = "form-control", @cols = 100, @rows = 20 })
                @Html.ValidationMessageFor(m => m.Code, null, new { @class = "text-danger" })
            </div>
        </div>          
        <div class="form-group">
            <div class="col-md-offset-0 col-md-10">
                <br />
                <input id="submit" type="button" class="btn btn-default" value="Submit" />
            </div>
            <br /><br />
            <div class="result" id="Result">
            </div>
        </div>

@section Scripts {
<script>
    $(document).ready(function () {
        $("#submit").click(function () {
            var url = "@Url.Action("Controller", "Home")"
            var code = $("#Code").val();
            $("#Result").load(url, { code: code });
        });
    });
</script>

То, что я хочу сделать, это нажатие кнопки пользовательского интерфейса, пока я не получу PartialView, которые появляются в div id="Result".Как заблокировать пользовательский интерфейс при нажатии кнопки до тех пор, пока load func on script не отобразит мой PartialView и покажет spinner или панель прогестирования, пока это не будет сделано?Этот скрипт не будет работать:

<script>
    $(document).ready(function () {
        $("#submit").click(function () { 
            $.blockUI();
            var url = "@Url.Action("Controller", "Home")"
            var code = $("#Code").val();
            $("#Result").load(url, { code: code });
            $.unblockUI();
        });
    });
</script>

Я не хочу использовать Ajax.BeginForm, потому что cshtml выше работает довольно хорошо.Если мне нужно использовать Ajax, мне нужно будет сильно измениться с моего html?

Answer 1

Замените приведенным ниже кодом. Эта функция является функцией обратного вызова, которая выполняется после завершения запроса к серверу.

$("#Result").load(url, { code: code }, function(){
            $.unblockUI();
});

Функция обратного вызова может иметь ниже дополнительные параметры, связанные с ответом.

function(String responseText, String textStatus, jqXHR jqXHR)
{
   //  Code to be executed after server response.
}

Answer 2

Почему бы не поместить вызов ajax в функцию щелчка?

JS

<script>
        $(document).ready(function () {
            $("#submit").click(function () { 
                   $.ajax({
                    url: "/Controller/action/", //to get the partial view
                    beforeSend: function() {
                    },
                    complete: function() {
                        alert("ajax complete event")

                    }
            });
        });
</script>

, затем заблокировать пользовательский интерфейс и добавить gif загрузки для запросов на запуск / остановку ajax?

var $loading = $('#loadingDiv').hide(); //add your spinner via css
$(document)
  .ajaxStart(function () {
    $loading.show();
    $.blockUI(); 
  })
  .ajaxStop(function () {
    $loading.hide();
    $.unblockUI(); 
  });

CSS

 .modal {
        display: none;
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: rgba( 255, 255, 255, .8 ) 50% 50% no-repeat;
        background-image: url('../../Content/ajax-loader.gif');
    }

    /* When the body has the loading class, we turn
    the scrollbar off with overflow:hidden */
    body.loading .modal {
        overflow: hidden;
    }

    /* Anytime the body has the loading class, our
    modal element will be visible */
    body.loading .modal {
        display: block;
    }