AJAX的UpdatePanel，在MVC 3.0定时器功能 [英] AJAX updatepanel, Timer functions in MVC 3.0
问题描述
听着，我很新的MVC 3.0，但我一直在寻找，寻找一个简单直接的教程更换一个asp：在MVC世界的UpdatePanel。有很多在需要调用jQuery函数的例子，但因为我不知道如何把它在MVC我还是输了。可有人点我到一个硬性的例子我如何可以做一个简单的定时刷新局部视图，如把日期时间_layout.vbhtml页面上？
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 example on how I can do a simple "timer refreshed" partial view such as putting the date time on a _layout.vbhtml page?
推荐答案
您会在JavaScript中工作在客户端上，可能使用与MVC项目模板提供的jQuery库。你可能成功使用$阿贾克斯（）或类似的，具有＃的.html（）。
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.
还有的asp.net网站上的例子，如 http://www.asp.net/mvc/tutorials/iteration-7-add-ajax-functionality-cs
There's examples on the asp.net website such as http://www.asp.net/mvc/tutorials/iteration-7-add-ajax-functionality-cs
把这看作被分为2个不同的部分 - 首先你需要一个控制器动作，将返回格式的内容;其次，你需要一个客户端的动作，将呼叫控制和处理响应。您可能会发现通用的jQuery教程第二部分更有帮助，因为它们覆盖整个图书馆。
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.
编辑：感觉不错，在这里你去：
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
指数和关于行动是完全香草，他们是从模板不变。我已经添加了3愚蠢的方法，显示如何使用MVC与客户端调用的要点。控制器上的内容（）方法简单地返回一个字符串，以及可用于这种事情。在现实世界环境中更为有用的部分（）和JSON（），它分别返回局部视图和JSON格式的数据。 （请注意 - 如果你要求用JSON GET请求，需要指定JsonBehaviour.AllowGet作为方法的第二个参数 - 默认安全禁用此，你会得到一个有趣的错误消息）。第2种方法将接收到GET和POST请求，第三只响应POST请求。
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简单的在这里。第一位又是自带的模板索引视图的香草内容。下面，我已经简单地添加了一个＆LT; DIV＆GT; 我的每个实例，具有任意点击的事情 - 我用＆LT; P＆GT; S，可以是任何东西，这是在某些方面可寻址的，我用的ID，但类或任何其他会的工作。也有任意的占位符，结果会去，我再次使用过＆LT;跨度方式＆gt; ，但可以是任何东西。
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.
在某处的观点 - 任何地方上面的自定义脚本 - 到jQuery的参考夹头。在生产中，可能是最好的最小化1打算，无论是从您的服务器或谷歌以节省带宽。对于设计，我会用它支持智能感知，更易于阅读，如果你需要的vsdoc计划行事。
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.
第二个脚本标签基本上是建立事件处理程序。我这些缺口pretty多少直接从jQuery文档站点，只是修改的参数。 jQuery的文档是非常好的，并给出了大量的例子。
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.
如果您需要帮助调试，大多数浏览器都时下JavaScript调试，你可以调用，无论是萤火，IE的开发工具，或Chrome的。这些都具有断点等，就像在净code，所以你可以看到发生了什么事情。
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.
这篇关于AJAX的UpdatePanel，在MVC 3.0定时器功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
