Question

听我对MVC 3.0很新，但我一直在寻找一个简单直接的教程来替换MVC世界中的asp：UpdatePanel。 jquery函数有很多需要调用的例子，但由于我不知道如何在MVC中连接它，我仍然迷失了。有人能指出我如何做一个简单的“计时器刷新”部分视图，例如将日期时间放在_layout.vbhtml页面上的一个简单快速的例子吗？

Answer 1

您将在客户端上使用JavaScript，可能使用随MVC项目模板提供的jQuery库。你可能会成功使用$ .ajax（）或类似的＃.html（）。

asp.net网站上有一些例子，例如http://www.asp.net/mvc/tutorials/iteration-7-add-ajax-functionality-cs

将此视为分为两个不同的部分 - 首先，您需要一个将返回格式化内容的控制器操作;其次，您需要一个客户端操作，它将调用控制器并处理响应。您可能会发现通用jQuery教程对第2部分更有帮助，因为它们涵盖了整个库。

编辑：感觉很好，你走了：

这是一个简单的控制器：

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

Index和About操作完全是vanilla，它们不受模板的影响。我添加了3个愚蠢的方法，展示了如何在客户端调用中使用MVC的要点。控制器上的Content（）方法只返回一个字符串，可以用于此类事情。在现实世界环境中更有用的是Partial（）和JSON（），它们分别返回部分视图和JSON格式的数据。（注意 - 如果您使用GET请求请求JSON，则需要将JsonBehaviour.AllowGet指定为方法中的第二个参数 - 默认安全性会禁用此功能，并且您会收到一条有趣的错误消息）。前2个方法将接收GET和POST请求，第3个方法仅响应POST请求。

这是一个相应的视图（我使用了Index，但可以是任何一个）：

<%@ 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>

这里很简单。第一位也是模板附带的Index视图的vanilla内容。下面我简单地为每个示例添加<div>，使用任意可点击的东西 - 我使用<p> s，可以是任何可以在某种程度上寻址的东西，我使用了ID，但是课程或其他任何工作。结果也会有任意占位符，我再次使用<span>，但可以是任何东西。

视图中的某个位置 - 自定义脚本上方的任何位置 - 查看jQuery的引用。在制作中，最好使用最小化的一个，无论是来自您的服务器还是来自Google以节省带宽。对于设计，我会坚持使用支持intellisense的vsdoc，如果需要，更容易阅读。

第二个脚本标记基本上是设置事件处理程序。我从jQuery文档站点直接删除了这些，并且只修改了参数。 jQuery文档非常好，并提供了大量示例。

如果您需要调试帮助，现在大多数浏览器都可以调用JavaScript调试，无论是FireBug，IE Developer Tools还是Chrome。这些都有断点等，就像.Net代码一样，所以你可以看到发生了什么。

Answer 2

此链接将终止您的搜索。有关实现ASP.NET MVC更新面板的最佳教程..

http://weblogs.asp.net/dwahlin/archive/2009/05/14/emulating-the-updatepanel-in-asp-net-mvc-1-0-with-ajaxhelper.aspx

AJAX updatepanel，MVC 3.0中的Timer函数

2 个答案: