Google Code Prettify

在 ASP.NET Core 8 中如何正確安裝及設定Microsoft jQuery Unobtrusive Ajax 庫的使用

在 ASP.NET Core 8 中使用 Microsoft jQuery Unobtrusive Ajax 库，可以简化通过 Ajax 进行无刷新更新的实现。以下是正确安装和设置 Microsoft jQuery Unobtrusive Ajax 库的步骤：


1. 安装库
首先，确保你已经通过 NuGet 安装了 Microsoft.jQuery.Unobtrusive.Ajax 包。

在 Visual Studio 中，打开 “工具” -> “NuGet 包管理器” -> “程序包管理控制台”，然后输入以下命令来安装它：

powershell
Install-Package Microsoft.jQuery.Unobtrusive.Ajax


2. 引入库到项目中
确保在你的项目中正确引用了 jQuery 和 Unobtrusive Ajax 库。打开你的 _Layout.cshtml 文件，并添加以下脚本引用：

html
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 其他头部内容 -->
</head>
<body>
    <!-- 其他主体内容 -->
    
    <!-- jQuery 引用 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- Unobtrusive Ajax 引用 -->
    <script src="~/lib/jquery-unobtrusive-ajax/jquery.unobtrusive-ajax.min.js"></script>

    <!-- 验证脚本引用 -->
    <script src="~/lib/jquery-validation/jquery.validate.min.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

    @RenderSection("Scripts", required: false)
</body>
</html>



3. 配置 Ajax 表单
在你的视图中，创建一个表单并使用 data-ajax 属性来启用 Ajax 提交。以下是一个示例：

html
@model YourNamespace.YourViewModel

<form asp-action="YourAction" asp-controller="YourController" data-ajax="true" data-ajax-method="post" data-ajax-update="#result">
    @Html.AntiForgeryToken()
    <div class="form-group">
        <label asp-for="YourProperty" class="control-label"></label>
        <input asp-for="YourProperty" class="form-control" />
        <span asp-validation-for="YourProperty" class="text-danger"></span>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
</form>

<div id="result"></div>



4. 配置控制器和操作方法
在控制器中，确保你的操作方法能够返回一个部分视图或 JSON 响应。以下是一个示例：

csharp 
using Microsoft.AspNetCore.Mvc;
using YourNamespace.Models;

public class YourController : Controller
{
    [HttpPost]
    public IActionResult YourAction(YourViewModel model)
    {
        if (ModelState.IsValid)
        {
            // 处理你的表单数据

            return PartialView("_YourPartialView", model); // 返回部分视图
        }

        return PartialView("_YourPartialView", model); // 返回包含验证错误的部分视图
    }
}



5. 创建部分视图
确保你有一个与上述部分视图名称匹配的视图。比如 _YourPartialView.cshtml：

html
@model YourNamespace.YourViewModel

<div>
    <h2>结果:</h2>
    <p>你的属性值: @Model.YourProperty</p>
</div>



6. 启用验证（可选）
如果你需要在表单中启用验证，请确保你的视图中包含以下脚本引用：

html
@section Scripts {
    <script src="~/lib/jquery-validation/jquery.validate.min.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
}



总结
通过以上步骤，你应该能够在 ASP.NET Core 8 中正确安装和配置 Microsoft jQuery Unobtrusive Ajax 库，以便实现无刷新表单提交和部分视图更新。确保你的视图、控制器和脚本文件都正确配置，并且所有必要的脚本文件都已正确引用。