Как показать образ загрузчика, пока метод контроллера не завершится в ASP.NET MVC? - PullRequest
0 голосов
/ 21 октября 2018

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

Но я должен перейти только на страницу сведений.после завершения операции сохранения базы данных;Я хочу показать изображение загрузчика до тех пор;Как я могу это сделать?

В настоящее время я использую метод начала публикации для публикации и привязка всей модели, не используя вызов ajax. Может ли кто-нибудь помочь мне показать изображение загрузчика и выполнить рендеринг до завершения процесса до страницы сведений?

Index.cshtml

@model Dev.Models.DeviceReg
@using (Html.BeginForm("AddAsync", "Home", FormMethod.Post))
{
    <div class="panel panel-primary">
        <div class="panel-body">
            <div class="row">
                <div class="col-md-6">
                    <h4 id="aa">Name</h4>
                    <label>Select</label>
                    <table>
                        <tr>
                            <td>
                                @Html.DropDownListFor(m => m.Name, (SelectList)ViewBag.Name, "---Select Name---")
                            </td>                           
                        </tr>
                    </table>
                </div>

            </div>
            <div class="row">
                <div class="col-md-6">
                    <h4 id="aa">Model</h4>
                    <label>Select</label>
                    <table>
                        <tr>
                            <td>
                                @Html.DropDownListFor(m => m.Type, (SelectList)ViewBag.TypeName, "---Select Type---")
                            </td>                          
                        </tr>
                    </table>
                </div>              
        </div>
        <div class="panel-footer" align="left">
            <button type="submit" id="save" class="btn btn-success">
                <span class="glyphicon glyphicon-arrow-right"></span> save 
            </button>
        </div>       
    </div>
}

HomeController.cs

public async Task<ActionResult> AddAsync(DeviceReg deviceRegistration)
{        

        foreach (var deviceId in collection)
        {
                // save device information into database
                Models.Device newDevice = new Models.Device()
                {
                    Id = Guid.NewGuid(),
                    DeviceTypeId = deviceRegistration.DeviceType,
                    PlatformId = deviceRegistration.PlatformType,
                    DeviceId = deviceId,
                };

                _repository.InsertDevice(newDevice);
                _repository.Save();
        }
    return View("Details", deviceRegistration);
}

Details.cshml

@model Dev.Models.DeviceReg

<body style="background-color:black">
    <div class="panel panel-primary">

        <div class="panel-heading" align="center">
            <h2 class="panel-title">Details</h2>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-6">
                    <h3><label>Current Data</label></h3>
                    <br />
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <h4 id="aa">Name</h4>
                    <label>@Model.Name</label>

                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <h4 id="aa">Type</h4>
                    <label>@Model.TypeName</label>

                </div>
            </div>

            <hr />
            <br />
            <label>Your process is running.</label>
            <br />
            <div class="row">
                <div class="col-md-6">
                    <h3><label>Status</label></h3>

                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div style="clear: both">
                        <h2 style="float: left">10</h2>
                        <h6 style="float: right">Active Number</h6>
                    </div>
                </div>
            </div>


        </div>


    </div>

</body> 

1 Ответ

0 голосов
/ 21 октября 2018

Что ж, если вам нужно показать загрузчик во время отправки почтовой формы, вы можете использовать функции javascript для его отображения, например

            @using (Html.BeginForm("AddAsync", "Home", FormMethod.Post, new { onsubmit = "showLoader(this);" }))
            {
                  ...
            }

плюс JS

    <script>
        var showLoader = function(form){
            $("<div />").css({
                'position' : 'fixed',
                'left' : 0,
                'right' : 0,
                'bottom' : 0,
                'top' : 0,
                'background' : '#0020ff36',
                'z-index' : '99',
                'text-align' : 'center'
            }).appendTo($("body"))
              .append(
                $("<img />").attr("src", "https://mir-s3-cdn-cf.behance.net/project_modules/disp/35771931234507.564a1d2403b3a.gif")
            );
        }
    </script>

или jqueryсобытие, например

    <script>
        $("form").submit(function(){
            //show loader
        });
    </script>

пример этого кода https://dotnetfiddle.net/gfEVSE

Но , что касается разъяснения вопроса в комментариях, невозможно показать страницу сведений спрогресс сохранения без Javascript или других дополнительных запросов.

Пример без ajax, но с дополнительными запросами каждые N секунд

    [HttpPost]
    public ActionResult AddAsync(SampleViewModel deviceRegistration)
    {   
        Task.Run(()=>
        {
            //Saving to DB
        });
        return RedirectToAction("Details", id = deviceRegistration.id);
    }
    public ActionResult Details(int id)
    {
        var isObjectExistInDb = checkIfExistInDb(id);
        if (!isObjectExistInDb){
            return View("ShowLoader", id);
        }

        return View(object);
    }

, где в ShowLoader.cshtml необходимо перезагрузить страницу каждые N секунд.

С ajax будет более понятный, красивый код.Пожалуйста, дайте мне знать, если вам нужен пример с ajax:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...