英文:
How to replace Ajax.BeginForm helper in .Net Core 6.0 application since Microsoft.jQuery.Unobtrusive.Ajax is deprecated
问题
在以前的ASP.NET MVC项目中，我经常在Razor页面中大量使用Ajax.BeginForm()助手来创建在页面内更新内容并仅更新页面的一部分的表单。现在我正在创建一个ASP.NET Core 6.0项目，我不知道微软希望我如何实现相同的功能。
到目前为止，我所有的谷歌搜索都只找到了几年前的帖子，它们将我指向了NuGet包Microsoft.jQuery.Unobtrusive.Ajax，但该包自2018年以来没有更新，目前标记为已弃用。我没有找到任何标签助手允许在表单提交后部分更新页面。如果这是唯一剩下的方法，我并不反对添加自定义jQuery，但目前我还没有找到好的示例。
英文:
In previous ASP.NET MVC projects, I've made much use of the Ajax.BeginForm() helper in Razor pages to create forms that update content within a page and update only a portion of the page. Now I am creating a project in ASP.NET Core 6.0 and I don't know how Microsoft would like me to achieve the same thing.
All my google searches so far turn up posts that are a few years old and point me to the nuget package Microsoft.jQuery.Unobtrusive.Ajax, but that hasn't been updated since 2018 and is currently marked as deprecated. I'm not finding any tag helpers that allow partial updating of a page after a form post. I'm not opposed to adding custom jQuery if that's the only remaining route, but I'm not finding good examples of that yet, either.
答案1
得分: 3
在ASP.NET 6中，通常使用jquery.unobtrusive-ajax.js并定义表单如下：
<div id="result">
<form asp-action="ActionName" asp-controller="ControllerName" method="POST" data-ajax="true" data-ajax-update="result">
<!-- 表单内容 -->
</form>
</div>
@section scripts{
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajax-unobtrusive/3.2.6/jquery.unobtrusive-ajax.js" integrity="sha256-v2nySZafnswY87um3ymbg7p9f766IQspC5oqaqZVX2c=" crossorigin="anonymous"></script>
}
更多支持的data-*属性可参考此处。
| 属性 | 描述 |
|---|---|
| data-ajax | 必须设置为true以在目标元素上激活不显眼的Ajax。 |
| data-ajax-confirm | 在提交请求之前显示在确认窗口中的消息。 |
| data-ajax-method | 获取或设置HTTP请求方法（"Get"或"Post"）。 |
| data-ajax-mode | 获取或设置指定如何将响应插入到目标DOM元素的模式。有效值为before，after和replace。默认为replace。 |
| data-ajax-loading-duration | 以毫秒为单位控制显示或隐藏加载元素的动画持续时间。 |
| data-ajax-loading | 获取或设置在Ajax函数加载时显示的HTML元素的id属性。 |
| data-ajax-begin | 获取或设置在页面更新之前立即调用的JavaScript函数的名称。 |
| data-ajax-complete | 获取或设置在实例化响应后但在页面更新之前调用的JavaScript函数。 |
| data-ajax-failure | 获取或设置如果页面更新失败时要调用的JavaScript函数。 |
| data-ajax-success | 获取或设置在页面成功更新后要调用的JavaScript函数。 |
| data-ajax-update | 获取或设置使用来自服务器的响应来更新的DOM元素的ID。 |
| data-ajax-url | 获取或设置要发出请求的URL。 |
您可以参考此答案查看一个简单的演示。
另一种类似于Ajax.BeginForm()的方法是使用AspNetCore.Unobtrusive.Ajax包，您可以在GitHub存储库这里查看。
英文:
In ASP.NET 6, it is common use jquery.unobtrusive-ajax.js and define the form somthing like below:
<div id="result">
<form asp-action="ActionName" asp-controller="ControllerName" method="POST" data-ajax="true" data-ajax-update="result">
<!-- form content-->
</form>
@section scripts{
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajax-unobtrusive/3.2.6/jquery.unobtrusive-ajax.js" integrity="sha256-v2nySZafnswY87um3ymbg7p9f766IQspC5oqaqZVX2c=" crossorigin="anonymous"></script>
}
More supported data-* attributes for jquery.unobtrusive-ajax.js you can refer to here.
| Attribute | Description |
|---|---|
| data-ajax | Must be set to true to activate unobtrusive Ajax on the target element. |
| data-ajax-confirm | Gets or sets the message to display in a confirmation window before a request is submitted. |
| data-ajax-method | Gets or sets the HTTP request method ("Get" or "Post"). |
| data-ajax-mode | Gets or sets the mode that specifies how to insert the response into the target DOM element. Valid values are before, after and replace. Default is replace |
| data-ajax-loading-duration | Gets or sets a value, in milliseconds, that controls the duration of the animation when showing or hiding the loading element. |
| data-ajax-loading | Gets or sets the id attribute of an HTML element that is displayed while the Ajax function is loading. |
| data-ajax-begin | Gets or sets the name of the JavaScript function to call immediately before the page is updated. |
| data-ajax-complete | Gets or sets the JavaScript function to call when response |
| data-ajax-failure | Gets or sets the JavaScript function to call if the page update fails. |
| data-ajax-success | Gets or sets the JavaScript function to call after the page is successfully updated. |
| data-ajax-update | Gets or sets the ID of the DOM element to update by using the response from the server. |
| data-ajax-url | Gets or sets the URL to make the request to |
A simple demo you could refer to this answer.
Another way which is similiar to Ajax.BeginForm() is using the package AspNetCore.Unobtrusive.Ajax, you can check the github repo here:https://github.com/mjebrahimi/AspNetCore.Unobtrusive.Ajax
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论