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",

Answer 1

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/