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
– scott.korin, Commented Aug 12, 2012 at 3:21

Eric Rini · Accepted Answer · 2012-08-12 02:53:50Z

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, 2012 at 2:53

answered Aug 12, 2012 at 2:48

Eric Rini

1,92015 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

MyKuLLSKI Over a year ago

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 :)

scott.korin Over a year ago

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. api.jquery.com/ready

MyKuLLSKI Over a year ago

I got it to work in Chrome but IE doesnt work ever using JQuery

Eric Rini Over a year ago

There is an event is JQuery that triggers when the DOM is ready. See: 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 Over a year ago

In IE please give us some error messages. The Network and Console panels of the debugger can be helpful. See: msdn.microsoft.com/en-us/library/dd565628(v=vs.85).aspx

|

Neil Thompson · Accepted Answer · 2012-08-12 10:21:22Z

1

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

answered Aug 12, 2012 at 10:21

Neil Thompson

6,4652 gold badges33 silver badges55 bronze badges

1 Comment

MyKuLLSKI Over a year ago

Thanks. Ill definitely take a look at this.

Community · Accepted Answer · 2017-05-23 12:22:15Z

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, 2017 at 12:22

CommunityBot

11 silver badge

answered Aug 12, 2012 at 2:04

Gent

2,6851 gold badge24 silver badges34 bronze badges

Collectives™ on Stack Overflow

Asp.net MVC use AJAX to not refresh page

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related