jQuery 进度条，直到保存在数据库 asp.net 中

Question

在 Asp.Net 应用程序中，我需要 jQuery 进度条一直运行，直到数据未保存在数据库中

为此，我创建了一个 Web 服务和 Ajax jQuery 函数和进度条 Javascript 插件

HTML

<div id="progressbar"></div>
    <div id="result"></div>
    <asp:Label runat="server"  ID="lbldisp" Text= "Percentage Completed : "/>
    <asp:Label runat="server" ID="lblStatus" />
    <asp:Button ID="btnSave" runat="server" Text="Save"  class="buttonstyle" />

脚本（由于 DOM 中断，我使用 Sys.Application.add_load 而不是 document.ready 函数）

<link type="text/css" href="CSS/ui.all.css" rel="stylesheet" />
<script src="js/jquery-1.8.1.js" type="text/javascript"></script>
<script src="js/ui.core.js" type="text/javascript"></script>
<script src="js/ui.progressbar.js" type="text/javascript"></script>
<script type="text/javascript">
    Sys.Application.add_load(function() {
    // jquery Progress bar function.   
    $("#progressbar").progressbar({ value: 0 });
    $("#lbldisp").hide();
    //button click event   
    $("#ctl00_ContentPlaceHolder1_btnSave").click(function() {
    $("#ctl00_ContentPlaceHolder1_btnSave").attr("disabled", "disabled")
    $("#lbldisp").show();
    //call back function   
    var intervalID = setInterval(updateProgress, 250);
    $.ajax({
        type: "POST",
        url: "JobCard.aspx/InsertData",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: true,
        success: function(msg) {
            $("#progressbar").progressbar("value", 100);
            $("#lblStatus").hide();
            $("#lbldisp").hide();
            $("#result").text(msg.d);
            clearInterval(intervalID);
        }
    });
    return false;
    });
                });

                function updateProgress() {
                    var value = $("#progressbar").progressbar("option", "value");
                    if (value < 100) {
                        $("#progressbar").progressbar("value", value + 1);
                        $("#lblStatus").text((value + 1).toString() + "%");
                    }
                }

            </script>

网络服务

[System.Web.Services.WebMethod]
public static string InsertData()
{
    fortest jobcardForm = new fortest();
    //this is a line 760 -->      jobcardForm.Insert_OilService();
    jobcardForm.Insert_TuningService();
    jobcardForm.Insert_OtherServices();
    jobcardForm.Insert_QRCService();
    jobcardForm.Insert_problemTaken();
    jobcardForm.Insert_ActionTaken();
    jobcardForm.Insert_SpareParts();

    //Insert_Technician();
    dsJobCardTableAdapters.Select_JobCarRegistrationTableAdapter insertjobcard = new dsJobCardTableAdapters.Select_JobCarRegistrationTableAdapter();

    string a = insertjobcard.Insert_JobCarRegistration(
        jobcardForm.txtdate.Text, jobcardForm.txtTimeIn.Text,
        jobcardForm.txtTimeOut.Text, jobcardForm.Txt_RegNo.Text, 
        jobcardForm.Txt_FleetNo.Text,
        jobcardForm.chkbkdvechle.Checked, jobcardForm.chkwalkin.Checked, 
        jobcardForm.chkRepeatJob.Checked,
        jobcardForm.txtCustomerName.Text, jobcardForm.txtRiderName.Text, 
        jobcardForm.txtPhoneNo.Text, jobcardForm.txtEmail.Text,
        Convert.ToInt32(jobcardForm.ddl_ServiceAdvisor.SelectedValue),
        Convert.ToInt32((jobcardForm.ListBox1.SelectedValue == "" ? "0" : jobcardForm.ListBox1.SelectedValue)),
        jobcardForm.ddl_Model.SelectedValue, 
        jobcardForm.ddl_type.SelectedValue, jobcardForm.txtKMSRUN.Text,
        jobcardForm.ddl_color.SelectedValue
        , "1", HttpContext.Current.Session["user_id"].ToString(), 
        jobcardForm.txtdateout.Text, jobcardForm.txtchassis.Text,  
        jobcardForm.ddlyear.SelectedValue, jobcardForm.txtexpirydate.Text, 
        jobcardForm.txtnotes.Text, 
        jobcardForm.ddllocation.SelectedValue).ToString();

    HttpContext.Current.Response.Redirect(HttpContext.Current.Request.RawUrl);
    return "Save Completed...";
}

看起来脚本运行正常，但我在 Web 浏览器控制台窗口中收到错误，并且错误是 Web 服务 jobcardForm.Insert_OilService(); 中第 760 行的“500 内部服务器错误”。但是当我在服务器端 onclick 事件中使用 Web 服务代码时，数据被插入到数据库中。我需要进度条，这就是为什么我必须使用 Web 服务更改逻辑

错误

我通常创建一个类的对象以在静态方法中使用它，这是在静态方法中使用非静态方法的最简单方法。

Answer 1

你为什么不这样做：

 function FunctionName() {
        $.ajax({
            type: "POST",
            url: ,
            data: JSON.stringify(),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            beforeSend: function () {
                $("#progress-bar").show();
                $("#progress-bar1").hide();
            },
            complete: function () {
                $("#progress-bar").hide();
                $("#progress-bar1").show();
            },
            success: function () {

            }
        });
    }

并且有 2 个 div

        <div class="gap"></div>
        <div id="progress-bar" style="display:none;">
            <img src="~/Images/ajax-progressbar.gif" />
        </div>
        <div id="progress-bar1"></div>
    </div>

因此，在您发送请求之前，一旦加载内容，您就会显示$("#progress-bar").show();，然后将其隐藏。希望这能回答您的问题。