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浏览器控制台窗口中收到错误，并且错误是“服务器jobcardForm.Insert_OilService();中第760行的”500内部服务器错误“。但是，当我在服务器端onclick事件中使用Web服务代码时，数据将插入到数据库中。我需要进度条，这就是我必须使用Web服务更改逻辑的原因

错误

enter image description here

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

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();隐藏它。希望这能回答你的问题。

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

1 个答案: