AJAX updatepanel, Timer functions in MVC 3.0

Listen I'm very new to MVC 3.0 but I've been looking and looking for a simple straight forward tutorial for replacing an asp:UpdatePanel in the MVC world. There are lots of examples on the jquery function that needs to be called but since I don't know how to wire it up in MVC I'm still lost. Can someone point me to a hard and fast开发者_如何学Go example on how I can do a simple "timer refreshed" partial view such as putting the date time on a _layout.vbhtml page?

You'll be working in JavaScript on the client, probably using the jQuery library supplied with the MVC project template. You'd probably use $.ajax() or similar, with #.html() on success.

There's examples on the asp.net website such as http://www.asp.net/mvc/tutorials/iteration-7-add-ajax-functionality-cs

Think of this as being split into 2 distinct parts - firstly you need a controller action that will return formatted content; secondly you need a client-side action that will call the controller and process the response. You may well find general purpose jQuery tutorials more helpful for the 2nd part, as they cover the whole library.

Edit: Feeling nice, here you go:

Here's a simple controller:

Public Class HomeController
    Inherits System.Web.Mvc.Controller

    Function Index() As ActionResult
        ViewData("Message") = "Welcome to ASP.NET MVC!"

        Return View()
    End Function

    Function About() As ActionResult
        Return View()
    End Function

    Function SayHello() As ActionResult
        Return Content("Hello!")
    End Function

    Function SayFormattedHello() As ActionResult
        Return Content("<span style='color:red'>Hello <span style='color:blue'>in colour</span></span>")
    End Function

    <HttpPost()>
    Function SayHelloPost(name As String) As ActionResult
        Return Content("Hello " & name)
    End Function

End Class

The Index and About actions are completely vanilla, they are untouched from the template. I've added 3 silly methods that show the gist of how to use MVC with client calls. The Content() method on the controller simply returns a string, and can be used for this kind of thing. More useful in real world environments are Partial() and JSON() which return a partial view and JSON formatted data respectively. (Note - if you're requesting JSON with GET requests, you need to specify JsonBehaviour.AllowGet as the second parameter in the method - default security disables this and you get a funny error message). The first 2 methods will receive to both GET and POST requests, the 3rd will only respond to POST requests.

And here's a corresponding view (I used Index, but can be any):

<%@ Page Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
    <script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
    <h2>
        <%: ViewData("Message") %></h2>
    <p>
        To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">
            http://asp.net/mvc</a>.
    </p>
    <div>
        <p id="link1">
            Say Hello</p>
        <p>
            <span id="output1"></span>
        </p>
    </div>
    <div>
        <p id="link2">
            Say Hello</p>
        <p>
            <span id="output2"></span>
        </p>
    </div>
    <div>
        <p id="link3">
            Say Hello</p>
        <p>
            <span id="output3"></span>
        </p>
    </div>

    <script type="text/javascript">
        $(document).ready(function () {

            $("#link1").click(function () {
                $.get('Home/SayHello', function (data) {
                    $('#output1').html(data);
                    alert('Load was performed.');
                });
            });

            $("#link2").click(function () {
                $.get('Home/SayFormattedHello', function (data) {
                    $('#output2').html(data);
                    alert('Load was performed.');
                });
            });

            $("#link3").click(function () {
                $.post('Home/SayHelloPost',
                { "name": "Richard" }, 
                function (data) {
                    $('#output3').html(data);
                });
            });

        });
    </script>
</asp:Content>

Pretty simple here. The first bit is again the vanilla contents of the Index view that comes with the template. Below that I've simply added a <div> for each of my examples, with an arbitrary clickable thing - I used <p>s, can be anything, which are addressable in some way, I used IDs, but classes or whatever else would work. There are also arbitrary placeholders where the results will go to, again I've used <span>, but can be anything.

Somewhere in the view - anywhere above the custom script - chuck in a reference to jQuery. In production, probably best going with the minimised one, either from your server or from Google to save bandwidth. For designing, I'd stick with the vsdoc one which supports intellisense and is easier to read if you need to.

The second script tag is basically setting up event handlers. I nicked these pretty much straight from the jQuery documentation site, and just modified the parameters. The jQuery documentation is really good, and gives lots of examples.

If you need debugging help, most browsers nowadays have JavaScript debugging that you can call on, be it FireBug, the IE Developer Tools, or Chrome's. These all have breakpoints etc just like in .Net code, so you can see what's going on.