MVC Jquery Progress Spinner提交

如何解决MVC Jquery Progress Spinner提交

| 问候，任何人都可以帮助我如何在单击按钮时使用ASP.NET MVC来实现Jquery Progress Spinner。先感谢您。

解决方法

$.ajax({
type=\"get\",url=\"someurl.html\",dataType:\"html\",beforeSend(jqXHR,settings)
{
     //append spinner image to some html element
},success:function(data)
{
    //manipulate data
},Complete:(jqXHR,textStatus)
{
    //Remove spinner from the page
}
});

,我最终使用了这些丰富的资源： http://contextllc.com/dev_tools/jQuery/showLoading/latest/jquery.showLoading.example.html http://ajaxload.info/ 简单容易。 ,所以我发现了这个问题，正是我在寻找的问题，但是我不喜欢官方回答的概念...为什么？使用AJAX提交表单很好，但是您失去了ASP MVC的功能，并且失去了向视图返回@model的概念，并且通过使用AJAX，您还必须更改很多代码以返回AJAX / JSON响应（将ActionResult的返回值更改为JsonResult等）。我不想失去带有return View(model)的ActionResult的输出，因为它非常方便（尤其是挂钩到模型的jQuery Validation）...所以我想出了以下方法：

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    ...

    <div class=\"form-group\">
        <button id=\"saveBtn\" type=\"submit\" class=\"btn btn-primary\">Save</button>
        @Html.ActionLink(\"Back to List\",\"Index\")
    </div>
}

@section Scripts {
    <!-- jQuery ASP Validation -->
    @Scripts.Render(\"~/Scripts/jqueryval\")

    <script type=\"text/javascript\">
        $(document).ready(function () {
            // clear error summary from inside our global variable (defined in _layout view)
            window.App.errorSummary = {};

            // Attach click handler to the submit button
            // from there,attach a spinner but only if no error summary are showing
            $(\'#saveBtn\').click(function () {
                // has to be inside a timer else it would be triggered too late
                setTimeout(function () {
                    if (window.App.errorSummary.numberOfInvalids < 1) {
                        // your spinner here... in my case spinner.js
                    }
                },50);
            });
        });
    </script>
}

并且您还必须扩展jQuery Validator对象，但是最好在_Layout视图中扩展它，从那里我的代码如下所示：

window.App = {
    baseUrlArea: \'@((ViewContext.RouteData.Values[\"area\"] == null) ? \"\" : ViewContext.RouteData.Values[\"area\"])\',baseUrl: \'@Url.Content(\"~/\")\',language: \'@((ViewContext.RouteData.Values[\"language\"] == null) ? \"en\" : ViewContext.RouteData.Values[\"language\"])\',controller: \'@ViewContext.RouteData.Values[\"controller\"]\',action: \'@ViewContext.RouteData.Values[\"action\"]\',errorSummary: {}
};

$(document).ready(function () {
    // extend the jquery validator object to keep track of error summary 
    // save summary inside the global (window.App) variable
    if (typeof $.validator !== \"undefined\") {
        $.validator.setDefaults({
            showErrors: function (errorMap,errorList) {
                window.App.errorSummary.numberOfInvalids = this.numberOfInvalids();
                window.App.errorSummary.errorMap = errorMap;
                window.App.errorSummary.errorList = errorList;

                $(\"#summary\").html(\"Your form contains \"
                  + this.numberOfInvalids()
                  + \" errors,see details below.\");
                this.defaultShowErrors();
            }
        });
    }            
});

您可能会想，为什么还要烦恼7英镑？好吧，这样做不是会使“微调器”在单击“保存”按钮时显示，尽管我们只希望它在“验证错误摘要”为空时显示...有意义吗？因此，您可以使用jQuery验证重新获得ASP / MVC的全部功能！而且我们的微调器仅在必须显示时显示。甜！！！ :) ,在ASP.NET MVC中调用Action方法时，在页面中心显示加载动画 ,假设您在执行过程中要处理500个项目（文件/任何文件），... 您必须单独处理每个项目。然后遍历所有项目并：在处理单个项目的ItemController中对$'ajale'动作进行$ .ajax调用返回一个json结果代码如果可以，则将jquery progress上移一级如果失败，则执行下一个，或取消整个过程（根据您的要求） ,您可以使用ajaxStart / ajaxStop。 jQuery 1.8示例：

$(document).ready(function () {
        $(\"#btnShowSpinner\").click(ajaxToExecute); // wire up click event for the button
        (function () { $(\"#loading\").hide(); })(); // hide the spinner initially
        $(document).ajaxStart(function () { $(\"#loading\").show(); }); // show spinner when ajax request executes
        $(document).ajaxStop(function () { $(\"#loading\").hide(); });// show spinner when ajax request completes
});

在页面标记中，添加一个包含微调器的div以显示给用户：

<input id=\"btnShowSpinner\" type=\"button\" value=\"Show Spinner\" />
<div id=\"loading\"><img src=\"spinner.gif\" /></div>

Ajax呼叫：

function ajaxToExecute() {
    $.ajax({
        cache: false,type: \"POST\",url: myURL
        data: { \"id\": id},success: function (data) {
            updateDiv.html(data);
        },error: function (xhr,ajaxOptions,thrownError) {
                   alert(\'Request failed.\\nError: \' + thrownError);
               }
    });
}

这种设计还可以将微调器重新用于页面上的任何其他ajax请求。 ,对于这个问题，聚会晚了，但是任何寻求NONE AJAX方法或使用html.BeginForm的人都可以在这里找到答案。通过Html.BeginForm提交激活加载动画答案摘要（如果已删除或链接中断）：首先，向表单添加一个ID，以便您可以使用JQuery来获取它：

@using (Html.BeginForm(\"SData\",\"Crawl\",FormMethod.Post,new { id = \"myform\" }))
{
    // the form
}

接下来，添加一个Javascript事件处理程序以拦截表单提交并显示正在加载的GIF。

$(\"#myform\").submit(function(e) {
    $(\"#myLoadingElement\").show();
});

MVC Jquery Progress Spinner提交

如何解决MVC Jquery Progress Spinner提交

解决方法

相关推荐