JQuery AJAX с ASP.NET WebMethod обновляет всю страницу

Question

Я использую Jquery Ajax для установки значений Label и ListBox в моей форме. Я понимаю, что значения правильно установлены функцией. Но сразу после этого страница просто обновляется, удаляя все ранее установленные значения. Почему это происходит ? Я новичок в Jquery / Ajax. Я что-то упустил здесь? Заранее спасибо.

Я вставляю весь код

        $(document).ready(function () {
            $('#Button1').bind('click', function clk() {
                $.ajax({
                    type: "POST",
                    url: "WebForm5.aspx/TestMethod",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (result) {
                        alert(result.d.ListBox.length);
                        for (var i = 0; i < result.d.ListBox.length; i++) {
                            alert(result.d.ListBox[i]);
                            $(document.createElement("option")).attr("value", result.d.ListBox[i]).html(result.d.ListBox[i])
   .appendTo('#<%=ListBox1.ClientID  %>');

                            $('#Label1').text(result.d.MyProperty);
                        }
                    }
                });
            })
        });                   

Answer 1

Button1 в вашем коде - кнопка asp, которая является кнопкой отправки. Когда вы нажимаете на нее, она отправляет страницу и обновляет всю страницу. Если вы хотите остановить отправку страницы при нажатии кнопки return false, она будет работать.

$('#Button1').bind('click', function clk() {
                $.ajax({
                    type: "POST",
                    url: "WebForm5.aspx/TestMethod",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (result) {
                        alert(result.d.ListBox.length);
                        for (var i = 0; i < result.d.ListBox.length; i++) {
                            alert(result.d.ListBox[i]);
                            $(document.createElement("option")).attr("value", result.d.ListBox[i]).html(result.d.ListBox[i])
   .appendTo('#<%=ListBox1.ClientID  %>');

                            $('#Label1').text(result.d.MyProperty);
                        }
                    }
                });

  return false;
            })