Asp.net MVC use AJAX to not refresh page

Question

I'm in the process of learning Asp.Net MVC after coming off my WPF background. I basically want to click a button and update my model WITHOUT refreshing the page. I'm assuming I can do the following with AJAX somehow.

<input class="WelcomeButton" type="button" onclick="location.href='@Url.Action("SetGameType", "Welcome", new { gameType = GameTypes.Expert })'"/>

Any help would be great.

This is my progress after looking at Gent's Link

<input class="WelcomeButton" id="NoviceButton" type="button" style="left: 157px; top: 442px;"/>

$("#NoviceButton").click(function(){
    $.ajax({
        url: "@Url.Action("TestMethod", "Welcome")",
        type: "post"
    });
});

I have a button that submit and not have the button in a form...Either way the above didn't work with that url or this one url: "\Welcome\TestMethod",

What do you mean by "it didn't work". Your code does not include any data being passed to your url, and there isn't any kind of callback function when the ajax call completes. As of now with this code, how can you tell whether or not it worked? — scott.korin, Aug 12 '12 at 03:21

Eric Rini · Accepted Answer · 2012-08-12T02:53:50.793

2

Yes, if you want to make an AJAX request, you probably want to use a javascript framework. ASP.NET MVC ships with JQuery, so this example assumes you have JQuery all ready to rock.

<button id="MyButton" />

<script type="text/javascript">
    // This will bind a javascript event handler to the button(s) identified
    // by the CSS selector #MyButton.
    //
    // You could also use the onclick event in the <input> element to 
    // say, call a javascript function... but this couples the HTML to
    // the Javascript logic in a way that is less maintainable as things
    // get more complex.
    $("#MyButton").click(function () {

        // $ is a global reference to JQuery. This instantiates and executes
        // a JQuery request using the browsers native request object (different
        // browsers do this slightly differently, this is why you need a 
        // framework like JQuery to write Javascript productively)
        $.ajax(

            // This is the URL back to an ASP.NET controller\action that will handle the event.
            url: "{controller}/{action}",

                            // This is a callback function that will execute when the round trip completes.
            success: function (response) {
                alert("server response: " + response);
            }
        );
    });
</script>

Welcome to the world of web programming. http://api.jquery.com/jQuery.ajax/

edited Aug 12 '12 at 02:53

answered Aug 12 '12 at 02:48

Eric Rini

1,830
15
20

Nevermind it worked. So apparently all my scripts using JQuery have to be after the elements are created...Ill get back into my C coding mode :) – MyKuLLSKI Aug 12 '12 at 03:23
You can put the function defined on the click event of the button inside a call to $.ready(), which fires when the document is loaded. http://api.jquery.com/ready/ – scott.korin Aug 12 '12 at 03:26
I got it to work in Chrome but IE doesnt work ever using JQuery – MyKuLLSKI Aug 12 '12 at 03:28
There is an event is JQuery that triggers when the DOM is ready. See: http://api.jquery.com/ready/. For a small site it can be helpful. For a bigger site you should find a better way to solve this problem. – Eric Rini Aug 12 '12 at 03:59
In IE please give us some error messages. The Network and Console panels of the debugger can be helpful. See: http://msdn.microsoft.com/en-us/library/dd565628(v=vs.85).aspx – Eric Rini Aug 12 '12 at 04:01
The error I had in IE was because I put the Script Tag before the elements were created. When I moved it after the Body it worked fine – MyKuLLSKI Aug 14 '12 at 03:11

score 1 · Answer 2 · answered Aug 12 '12 at 10:21

1

Have a look at knockoutJS, it's MVVM design pattern should be familiar from your WPF experience.

answered Aug 12 '12 at 10:21

Neil Thompson

6,356
2
30
53

Thanks. Ill definitely take a look at this. – MyKuLLSKI Aug 12 '12 at 16:36

score 0 · Answer 3 · edited May 23 '17 at 12:22

0

It seems like what you are trying to do is call up to the server without loosing your current page state. If thats the case, instead of having your onclick hit a URL have it call a javascript method that will do an ajax post. I recommend giving this question a read: jQuery Ajax POST example with PHP

edited May 23 '17 at 12:22

Community

1
1

answered Aug 12 '12 at 02:04

Gent

2,675
1
24
34

Asp.net MVC use AJAX to not refresh page

3 Answers3