ASP.NET使用Java脚本停止代码隐藏

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>

Answer 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>

Answer 2

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

Answer 3

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>