Skip to main content
improved formatting
Source Link
Asad Refai
  • 6.1k
  • 8
  • 36
  • 57

Since you are not using Update Panels, you are doing a full postback. Then

Then why not use JQueryJQuery script which binds JS code on change like below

  1. Add a class to your dropdown. Like below

    asp:DropDownList ID="ddl_DCL_ModifiedDate" CssClass="ddl_DCL_ModifiedDate"CssClass="ddl_DCL_ModifiedDate"

  2. Write code inside DOM ready in your webpart to trigger initial JS codes

    $(document).ready(function () { $(document).ready(function () {

    $(".ddl_DCL_ModifiedDate").change(function() $(".ddl_DCL_ModifiedDate").change(function() {{

    //Here show an DIV which is hidden by default & has properties like width 100% height 100% & transparency. It can contain HTML contents also like image/test
    

    $("#divMaskDashboard").show(); $("#divMaskDashboard").show();

    });});

    });});

So this is how it works

  1. You attach a change handler in the DOM ready on your dropdown using CSS class name
  2. This will display a image/div when the dropdown in changed while the postback is happening in the background
  3. You complete postback happens & the image/div gets hidden automatically

I normally use below CSS for the DIV #divMaskDashboard { /* opacity: 1; background: rgba(16, 22, 23,0.7);*/ width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; background-color: rgb(16,22,23); color: #000; z-index: 99999; display: none; filter: alpha(opacity=60); -moz-opacity: 0.6; -khtml-opacity: 0.6; opacity: 0.6; }

#divMaskDashboard {
    /*
    opacity: 1;
    background: rgba(16, 22, 23,0.7);*/
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    background-color: rgb(16,22,23);
    color: #000;
    z-index: 99999;
    display: none;
    filter: alpha(opacity=60);
    -moz-opacity: 0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6;
}

Since you are not using Update Panels, you are doing a full postback. Then why not use JQuery script which binds JS code on change like below

  1. Add a class to your dropdown. Like below

    asp:DropDownList ID="ddl_DCL_ModifiedDate" CssClass="ddl_DCL_ModifiedDate"

  2. Write code inside DOM ready in your webpart to trigger initial JS codes

    $(document).ready(function () {

    $(".ddl_DCL_ModifiedDate").change(function() {

    //Here show an DIV which is hidden by default & has properties like width 100% height 100% & transparency. It can contain HTML contents also like image/test
    

    $("#divMaskDashboard").show();

    });

    });

So this is how it works

  1. You attach a change handler in the DOM ready on your dropdown using CSS class name
  2. This will display a image/div when the dropdown in changed while the postback is happening in the background
  3. You complete postback happens & the image/div gets hidden automatically

I normally use below CSS for the DIV #divMaskDashboard { /* opacity: 1; background: rgba(16, 22, 23,0.7);*/ width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; background-color: rgb(16,22,23); color: #000; z-index: 99999; display: none; filter: alpha(opacity=60); -moz-opacity: 0.6; -khtml-opacity: 0.6; opacity: 0.6; }

Since you are not using Update Panels, you are doing a full postback.

Then why not use JQuery script which binds JS code on change like below

  1. Add a class to your dropdown. Like below

    asp:DropDownList ID="ddl_DCL_ModifiedDate" CssClass="ddl_DCL_ModifiedDate"

  2. Write code inside DOM ready in your webpart to trigger initial JS codes

    $(document).ready(function () {

    $(".ddl_DCL_ModifiedDate").change(function() {

    //Here show an DIV which is hidden by default & has properties like width 100% height 100% & transparency. It can contain HTML contents also like image/test
    

    $("#divMaskDashboard").show();

    });

    });

So this is how it works

  1. You attach a change handler in the DOM ready on your dropdown using CSS class name
  2. This will display a image/div when the dropdown in changed while the postback is happening in the background
  3. You complete postback happens & the image/div gets hidden automatically

I normally use below CSS for the DIV

#divMaskDashboard {
    /*
    opacity: 1;
    background: rgba(16, 22, 23,0.7);*/
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    background-color: rgb(16,22,23);
    color: #000;
    z-index: 99999;
    display: none;
    filter: alpha(opacity=60);
    -moz-opacity: 0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6;
}
Source Link

Since you are not using Update Panels, you are doing a full postback. Then why not use JQuery script which binds JS code on change like below

  1. Add a class to your dropdown. Like below

    asp:DropDownList ID="ddl_DCL_ModifiedDate" CssClass="ddl_DCL_ModifiedDate"

  2. Write code inside DOM ready in your webpart to trigger initial JS codes

    $(document).ready(function () {

    $(".ddl_DCL_ModifiedDate").change(function() {

    //Here show an DIV which is hidden by default & has properties like width 100% height 100% & transparency. It can contain HTML contents also like image/test
    

    $("#divMaskDashboard").show();

    });

    });

So this is how it works

  1. You attach a change handler in the DOM ready on your dropdown using CSS class name
  2. This will display a image/div when the dropdown in changed while the postback is happening in the background
  3. You complete postback happens & the image/div gets hidden automatically

I normally use below CSS for the DIV #divMaskDashboard { /* opacity: 1; background: rgba(16, 22, 23,0.7);*/ width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; background-color: rgb(16,22,23); color: #000; z-index: 99999; display: none; filter: alpha(opacity=60); -moz-opacity: 0.6; -khtml-opacity: 0.6; opacity: 0.6; }