how to avoid postback when i click the button in MVC

Question

I have two button in my cshtml page. When i click the first button data fetch from the database and bind it my controls. The records are many so the second button goes down, then i click the second button same thing happened fetch from the database and bind the grid, so the page is loaded then the page goes up. I want to stay same place when i click the second button. How to prevent it.

you want to stay at same position after clicking on second button (after page load)? if yes then try this http://stackoverflow.com/questions/484463/how-do-i-maintain-scroll-position-in-mvc — Devendra Soni, Jul 22 '14 at 06:43
thanks for ur reply @Se0ng11, if i use type="button", it can't go to controller. so only I used type="submit". If any possible to go controller when i use type="button".... — Lawrence, Jul 22 '14 at 06:44
there is no easy way to make a button to post to server without some code, you need to do some research on AJAX, refer to this post for some idea, http://stackoverflow.com/questions/23604504/asp-net-mvc-passing-json-to-view-from-controller/23605000#23605000, submit button always do a postback(refresh the page) to return the data from server — Se0ng11, Jul 22 '14 at 06:54
At the risk of sounding pedantic, there is no "post back" in asp.net mvc, you are talking about a posting to a controller action. — asawyer, Jul 22 '14 at 19:54

score 9 · Answer 1 · answered Jul 22 '14 at 19:29

9

make your button like this :

<input type="button" id"button2" onclick="CallAjax();return false;"/>

//then in javascript

function CallAjax()
{

//your ajax call here to retrieve or update data

}

answered Jul 22 '14 at 19:29

Adam

3,815
29
24

1

For me, return false at the end solved my problem. That way, page postback is prevented. – FrenkyB Sep 08 '15 at 21:52
Certainly just helped me :-) – gchq Oct 16 '15 at 19:51
Helpful but not much more – Nitin... Jun 23 '16 at 11:50

score 0 · Answer 2 · answered Jul 22 '14 at 19:41

This is MVC 101...

Make your button a standard HTML5 button, which calls a JavaScript function on click...

 <input type="button" id="goButton" value="Go »" onclick="goFunction();">

(I don't think you have to "return false" with a button, only with a submit)

Then, use Razor helpers in your view to do the Ajax call to the controller...

function goFunction() {
    var url = '@Url.Action("MyActionMethodName", "MyControllerName")';
    var settings = { 'some data': 'some values' };
    $.ajax(url, settings);
}

See the JQuery Ajax page for more information about how to work the "settings" object.

BTW - sounds like you are "paging a grid" but you just forgot to say so... use a tool for that, such as Kendo. Paging is solved, don't solve it again.

how to avoid postback when i click the button in MVC

2 Answers2