ASP.NET Use Javascript to Stop CodeBehind Call

Question

I have a DropDownList wrapped inside an UpdatePanel in ASP.net. When you select a different option it first calls function ShowLoading and then proceeds to call the code behind function dropDownMonth_SelectedIndexChanged. I want it to do this. But - is there anyway to keep the structure but when it hits the javascript function there is some javascript code I can write that prevents it from calling the code behind?

function ShowLoading() {

        }

<asp:DropDownList CssClass="form-control" ID="dropDownMonth" runat="server" AutoPostBack="true" ClientIDMode="Static" Style="display: none" onchange="ShowLoading()" OnSelectedIndexChanged="dropDownMonth_SelectedIndexChanged"></asp:DropDownList>

Oleksandr · Accepted Answer · 2019-03-08 22:44:04Z

1

Remove onchange from DropDownList

<asp:DropDownList CssClass="form-control" ID="dropDownMonth" runat="server" AutoPostBack="true" ClientIDMode="Static" Style="display: none" OnSelectedIndexChanged="dropDownMonth_SelectedIndexChanged"></asp:DropDownList>

And override generated onchange handler like this

//make sure this code is executed when page is loaded
<script>
    var dropdown = document.getElementById("dropDownMonth");
    var onchange = dropdown.onchange;
    dropdown.removeAttribute("onchange"); //removing original onchange handler
    var newonchange = function (ev) {
        if (ShowLoading()) {
            onchange(ev);
        }
    }
    dropdown.onchange = newonchange;

    function ShowLoading() {
        var postBack = /*condition to postback*/;
        //..
        return postBack;
    }


</script>

edited Mar 8, 2019 at 22:44

answered Mar 8, 2019 at 21:32

Oleksandr

9,7601 gold badge22 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Oleksandr Over a year ago

@JohnDoe one thing I forgot to include in my answer, you have to remove onchange="ShowLoading()" code from element

Noah B · Accepted Answer · 2019-03-08 21:04:05Z

0

Add return false at the end of your ShowLoading function. That should prevent the post back from triggering.

answered Mar 8, 2019 at 21:04

Noah B

1936 bronze badges

5 Comments

John Doe Over a year ago

function ShowLoading() { return false; }

Noah B Over a year ago

Alexander's method of capturing and removing the existing onchange method looks like it should work.

John Doe Over a year ago

it doesn't work...could it have something to do with it being in an updatepanel?

Noah B Over a year ago

I don't have enough reputation to comment directly on Alexander's answer. Put the first block of his code inside a pageLoad() { .. code ... } function. That is automatically called after an update panel refresh.

John Doe Over a year ago

dont be so hard on yourself @Noah B. Just select 'add a comment'

ElasticCode · Accepted Answer · 2019-03-08 22:26:57Z

0

return false if you don't want to execute server side code (code behind)

function ShowLoading() {

    // return true; // Will continue to call code behind

    return false; // Stop and don't call code behind
}

and use return when calling the JS function onchange="return ShowLoading()"

<asp:DropDownList CssClass="form-control" ID="dropDownMonth" runat="server" AutoPostBack="true" ClientIDMode="Static" Style="display: none" onchange="return ShowLoading()" OnSelectedIndexChanged="dropDownMonth_SelectedIndexChanged">
</asp:DropDownList>

edited Mar 8, 2019 at 22:26

answered Mar 8, 2019 at 22:00

ElasticCode

7,9252 gold badges38 silver badges49 bronze badges

Collectives™ on Stack Overflow

ASP.NET Use Javascript to Stop CodeBehind Call

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related