更新面板进度条 onclientclick 事件

Question

我有一个适用于 OnClick 事件（服务器端）的更新进度条，但我需要更新 OnClientClick 事件（客户端）的进度条。

我尝试了以下解决方案，但它不适合我。

Js：

function ComparableSearch() { 
   $get('UpdateProgress1').style.display = 'block';    
    window.scrollTo(0, 0);
   
    GetRefineSearchDetailsMap(StreetNo[0], StreetNo[1], StreetName, State, County, ZipCodeFrom, ZipCodeTo, SalePriceFrom,
                               SalePriceTo, LivingArea, LivingAreaTo, SaleDateFrom, SaleDateTo, SubjectPropertyId, Section, Subdivision,
                               LotSizeFrom, LotSizeTo, YearBuiltFrom, YearBuiltTo, Stories, PrivatePool, FirePlace, Disclosure, IsListing,
                               City, Design, FirePlaceTo);
  
    $("#map").show();
    $("#MainSearchResult").hide();
    return false;
   $get('UpdateProgress1').style.display = 'none';

}



function GetRefineSearchDetailsMap(aStreetNoFrom, aStreetNoTo, aStreetName, aState, aCounty, aZipCodeFrom, aZipCodeTo, aSalePriceFrom,
                                    aSalePriceTo, aLivingArea, aLivingAreaTo, aSaleDateFrom, aSaleDateTo, aSubjectPropertyId, aSection, aSubdivision, aLotSizeFrom,
                                    aLotSizeTo, aYearBuiltFrom, aYearBuiltTo, aStories, aPrivatePool, aFirePlace, aDisclosure, aIsListing, aCity, aDesign, aFirePlaceTo) {


    var SalesSearchCriteria = {        
        X1: X1,
        X2: X2,
        Y1: Y1,
        Y2: Y
    };
    request = $.ajax({
        url: "Form1004/SaleComparableHandler.ashx?type=GetRefineSearchDetailsMap&Tid=" + Math.random(),
        type: "POST",
        data: { "SearchCriteria": JSON.stringify(SalesSearchCriteria) },
        async: true,
        success: function (data) {
            if (data.length > 0) {
                if (data != "Error") {
                    
                }
                else {                    
                    alert("Your session has been expired");
                }
            }
            else {               
                alert("No data exists");
            }
        },
        error: function (XMLHttpRequest, status, errorThrown) {
            if (errorThrown != 'abort') {
                PopUpAlertBox("Please try again...<br/><br/>Below error occured <br/><br/> " + errorThrown + "");
            }
            else {
                PopUpAlertBox("Error : " + errorThrown + "");
            }           
        }
    });

    return false;
}

Answer 1

如果我没记错的话，Ajax 就是你需要的。

我应该在客户端创建脚本，它将数据传递给服务器（当事件 Click 为真时），服务器的结果是您的进度条的数据。

小例子here

Answer 2

您可以使用它在 javascript 上显示 UpdateProgress 控件

$get('UpdateProgress1').style.display = 'block'; 

类似的东西把它隐藏起来

$get('UpdateProgress1').style.display = 'none';

编辑

// display indicator before ajax starts
$get('UpdateProgress1').style.display = 'none';

$.ajax({
    url: "Form1004/SaleComparableHandler.ashx?type=GetRefineSearchDetailsMap&Tid=" + Math.random(),
    type: "POST",
    data: { "SearchCriteria": JSON.stringify(SalesSearchCriteria) },
    success: function (data) {
       // your code
    },
    error: function (XMLHttpRequest, status, errorThrown) {
       // your code
    }
})
.always(function() {
    // hide ajax indicator when ajax finished (success or error)
    $get('UpdateProgress1').style.display = 'none';
});