【问题标题】:Ajax helper in ASP.net MVCASP.net MVC 中的 Ajax 助手
【发布时间】:2014-06-19 16:55:15
【问题描述】:

我知道这个问题可能不适合堆栈溢出。我一直在寻找一个关于如何使用 ajax 助手的例子,但大多数教程只通过了助手,他们没有提供任何实际的例子。我已经知道如何以 javascript 方式使用 ajax,但只想知道如何使用微软提供的 ajax 助手。

【问题讨论】:

  • @Anon 已经找到了这个,这没有帮助,因为那不是剃须刀
  • 你在寻找什么样的例子——有什么你不理解的具体例子?
  • @Brad Christie 一个在 razor 引擎中使用 axaj 助手的简单 ajax 示例,比如用 ajax 来更新 div 中的文本,看看它是如何工作的
  • @PierreOverFlow:看看这个GitHub branch

标签: ajax asp.net-mvc razor


【解决方案1】:

描述this GitHUb branch的工作原理:

首先,让我们定义一个我们要请求的操作。为简单起见,我们只做一个非常基本的 POST 操作:

//
// POST: /Home/Ajax
[HttpPost]
public PartialViewResult Ajax()
{
    // use partial view so we're not bringing the entire page's theme
    // back in the response. We're simply returning the content within
    // ~/Views/Home/Ajax.cshtml
    return PartialView();
}

接下来,为您的内容设置一个目的地并为其指定一个 id(这里我将其命名为“update-me”):

<div class="well" id="update-me">
  Click the button to see some AJAX content.
</div>

从那里开始,我们设置表单。下面演示了标准的 AJAX 功能,但您可以将自己的函数绑定到 AjaxOptions 指定的一些事件。

@using (Ajax.BeginForm("Ajax", new AjaxOptions {
    HttpMethod = "POST", // HttpPost
    InsertionMode = InsertionMode.Replace, // empty the target first
    UpdateTargetId = "update-me" // place content within #update-me
}))
{
    <button type="submit" class="btn btn-default">
        <i class="glyphicon glyphicon-refresh"></i>
        Click Me!
    </button>
}

最后,我们需要指定负责表单功能的大部分[“自动”]连接的脚本库:

<script src="~/Scripts/jquery-2.1.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

就是这样。当您开始使用它时,您会发现扩展它非常简单。例如,如果您想显示“工作”图标,您可以在 OnBeginOnComplete 属性中指定自定义函数。

【讨论】:

    【解决方案2】:

    ASP.NET MVC 的 Ajax 助手本质上为您的 Web 应用程序提供了 Ajax 功能。 AJAX 助手用于创建支持 AJAX 的元素,例如支持 Ajax 的表单和异步执行请求的链接。使用 Ajax 帮助程序,您可以使用 Ajax 提交您的 HTML 表单,这样就可以刷新整个网页,而不是刷新它的一部分。此外,您还可以呈现允许您使用 Ajax 调用操作方法的操作链接。 AJAX Helpers 是 AJAXHelper 类的扩展方法,存在于 System.Web.Mvc.Ajax 命名空间中。

    基于动作/控制器示例的启用 AJAX 的链接:- 下面的例子展示了如何在 Asp.Net MVC 中使用 action 和 controller 来使用 AJAX 动作链接。

    @Ajax.ActionLink("Fatch Data", "GetData", new AjaxOptions {UpdateTargetId = "Data-container", HttpMethod = "GET" })
    

    这是上面代码块的html输出。

    输出:

    <a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#Data-container" href="/Home/GetData"> Fatch Data </a>
    

    你知道 MVC 中的 Unobtrusive AJAX 吗?

    ASP.NET MVC 中的 Unobtrusive Validation 和 AJAX 支持遵循许多启用渐进式增强的最佳实践,并且非常易于使用。不显眼的 AJAX 库(不是不显眼的验证库)诚然在功能上有点受限,但如果它满足您正在编写的应用程序的要求,那么一定要使用它。而且由于它的源代码在您的应用程序中(毕竟它是 JavaScript),因此通常可以直接对它进行任何您认为合适的更新或更改。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2012-06-19
      • 2011-03-23
      • 1970-01-01
      • 2019-03-09
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多