Menu
Here's my code:
<!DOCTYPE html> <html lang="zh-CN"> <head> <title>中国工程院无线投票系统</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="css/login.css"> </head> <body> <div class="container" id="login"> <div class="col-md-6 col-md-offset-3"> <div class="page-header"> <h1>中国工程院无线投票系统</h1> </div> <form> <div class="form-group"> <label>用户名</label> <div class="input-group"> <div class="input-group-addon"><i class="glyphicon glyphicon-user"></i></div> <input type="text" v-model="account.username" class="form-control" placeholder="Username" required autofocus> </div> </div> <div class="form-group"> <label>密码</label> <div class="input-group"> <div class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></div> <input type="password" v-model="account.password" class="form-control" placeholder="Password" required> </div> </div> <button v-on:click="validate" class="btn btn-lg btn-primary btn-block">登录</button> </form> </div> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script> <script src="js/login.js"></script> </body> </html> In the login.js file:
var login = new Vue({ el:"#login", data:{account:{}}, methods:{ validate:function () { }, say: function (){ } } }); At the beginning, I thought it had something to do with the code within method "validate". However, after I deleted all the code inside, the page still get refreshed when I click the button which is not supposed to happen.
439
If you want to avoid full page refresh, then don't use UpdatePanel control as it will only give more pain the butt. Instead, use AJAX with client-side grid (e.g jQuery grid, Webgrid, etc) and handle everything at the client (JavaScript code).
Your page is reloading because the button is submitting your form. The submit will, by default, re-load the page to show form errors or the result of the submit action. The cleanest fix is, as you discovered, to specify a button type.
You have to detect browser back button event and pass as an input of the page you want do prevent URL reload that indicates you if you came from a back button click. this code: $(window). on('popstate', function(event) { alert("pop"); });
You should add type="button" to your <button>.
If you don't specify a type of a <button> in a <form>, it will behave like a submit button by default, which refreshes the page.
Docs:
<type="submit">The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
156
Or you can do it the vuejs way using Event modifiers like this:
<button v-on:click.prevent="validate" class="btn btn-lg btn-primary btn-block">登录</button> The prevent event modifier prevents the default behaviour.
Its just like using event.preventDefault() inside your event handler
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
