失眠网 > ASP.NET MVC预览4-使用Ajax和Ajax.Form

ASP.NET MVC预览4-使用Ajax和Ajax.Form

时间：2019-01-30 04:27:58

MVC Preview 4 is up on CodePlex. The Gu has all the exquisite Gu-Like Detail on his blog. Phil Haack has some notes on this release on his blog.

MVC Preview 4在CodePlex上可用。顾先生在他的博客上拥有所有精美的“赞似细节” 。菲尔·哈克(Phil Haack)在他的博客上对此发布有一些注释。

If you take a look at the generated "changes" document, it shows a bunch of new stuff like AjaxHelpers and AjaxExtensions that set the stage for some interesting things the community could do with MVC and Ajax. I'd like to see some JQuery love in there, maybe with some MVCContrib as they've been quiet lately.

如果您查看生成的“变更”文档，则显示了许多新内容，例如AjaxHelpers和AjaxExtensions，它们为社区使用 MVC和Ajax可以做的一些有趣的事情奠定了基础。我想在其中看到一些JQuery的爱，也许与一些MVCContrib在一起，因为它们最近一直很安静。

Using the new Preview 4 bits, here's what I was able to get running in just a few minutes.

使用新的Preview 4位，这是我仅需几分钟即可开始运行的功能。

Given a ViewPage that has a TextBox and a Button on it, when I click the button (and submit the form) I'll call back to the server and get some text that should then go in the div next to the button.

给定一个上面有一个TextBox和一个Button的ViewPage，当我单击该按钮(并提交表单)时，我将回调到服务器，并获取一些文本，然后将其放在该按钮旁边的div中。

The View looks like:

视图如下所示：

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">

<p>

<%using (Ajax.Form("ExamineTextBox", new AjaxOptions { UpdateTargetId = "result" }))

{ %>

<%= Html.TextBox("textBox1")%>

<input type="submit" value="Button"/>

<span id="result"/>

<% } %>

</p>

</asp:Content>

Notice the Ajax.Form helper and the UpdateTargetID that refers to the span. There's more AjaxOptions in there to explore as well, that we'll see in a second. The controller action looks like this:

注意Ajax.Form帮助器和引用该跨度的UpdateTargetID。还有更多的AjaxOptions可供探索，我们将在第二秒看到。控制器动作如下所示：

public class HomeController : Controller

{

public string ExamineTextBox(string textBox1)

{

if (textBox1 != "Initial Data")

{

return "This text is MVC different from before!";

}

return String.Empty;

}

Notice that the return method of the ExamineTextBox isn't an ActionResult, it's a string. In fact, the string result is being wrapped for you into a ContentResult. You could certainly make a ContentResult yourself, but this makes for a nicer looking method signature.

请注意，ExamineTextBox的返回方法不是ActionResult，而是字符串。实际上，字符串结果已为您包装到ContentResult中。您当然可以自己创建一个ContentResult，但这可以使方法签名看起来更好。

The result of that method is returned via the AJAX call, then put into that span via magic and pixie dust. Actually, the request looks like this:

该方法的结果通过AJAX调用返回，然后通过魔术和小精灵灰尘放入该范围。实际上，请求看起来像这样：

POST /Home/ExamineTextBox HTTP/1.1

Referer: http://localhost.:45210/Home

Content-Type: application/x-www-form-urlencoded; charset=utf-8

Accept-Encoding: gzip, deflate

Host: localhost.:45210

Content-Length: 28

Connection: Keep-Alive

Pragma: no-cache

textBox1=dude&__MVCAJAX=true

and the Response like this:

和这样的回应：

HTTP/1.1 200 OK

Server: Development Server/9.0.0.0

Cache-Control: private

Content-Type: text/html; charset=utf-8

Content-Length: 39

Connection: Close

This text is MVC different from before!

And that UpdateTargetID (the span) mentioned in the Ajax Form helper above? That's swapped in via the magic in MicrosoftMvcAjax.debug.js. There are options for before, after and replace.

以及上面的Ajax Form帮助器中提到的UpdateTargetID(范围)？通过MicrosoftMvcAjax.debug.js中的魔术将其交换。有之前，之后和替换的选项。

// Insert the results into the target element

if (targetElement) {

switch (insertionMode) {

case Sys.Mvc.InsertionMode.Replace:

targetElement.innerHTML = executor.get_responseData();

break;

case Sys.Mvc.InsertionMode.InsertBefore:

targetElement.innerHTML = executor.get_responseData() + targetElement.innerHTML;

break;

case Sys.Mvc.InsertionMode.InsertAfter:

targetElement.innerHTML = targetElement.innerHTML + executor.get_responseData();

break;

}

Note that I had to manually (for now) add the JavaScript libraries, so I put them in my Site.Master View.

请注意，我不得不手动(现在)添加JavaScript库，因此将它们放在Site.Master视图中。

<script src="/Content/MicrosoftAjax.debug.js" type="text/javascript"></script>

<script src="/Content/MicrosoftMvcAjax.debug.js" type="text/javascript"></script>

Also, notice that the MicrosoftMvcAjax.js is new and it's in your /Content folder if you make a new MVC Application. Congrats to Phil and Eilon and the team for this release!

另外，请注意，MicrosoftMvcAjax.js是新的，如果创建新的MVC应用程序，则位于/ Content文件夹中。祝贺Phil和Eilon及其团队发布了该版本！

Related Links

相关链接

/mvc

/stephenwalther/