ASP.NET Core 2.0中实现AJAX提交PC部件添加表单至控制器

看起来你想实现一个无刷新的PC部件添加功能，用ASP.NET Core 2.0 + AJAX对吧？我来帮你一步步搞定这个需求，从视图完善、后端处理到前端AJAX提交都梳理清楚：

先把你提供的视图补全，还要加上防伪造令牌（ASP.NET Core POST请求必须的）、提交按钮，以及用来显示操作结果的提示区域：

@model PcBuildAddViewModel
@{
    ViewData["Title"] = "Add";
}

<div class="form-container">
    <!-- 用来显示操作结果的提示区域 -->
    <div id="messageArea" class="alert" style="display:none;"></div>

    <form id="AddPcForm" class="form-wrapper" method="post">
        <!-- 防伪造令牌，ASP.NET Core默认要求POST请求携带这个 -->
        @Html.AntiForgeryToken()

        <p>Name:</p>
        <input asp-for="@Model.PcPart._Name" type="text" class="form-control" />
        <!-- 显示字段验证错误 -->
        <span asp-validation-for="@Model.PcPart._Name" class="text-danger"></span>

        <!-- 示例：添加更多PC部件字段，比如类型、价格 -->
        <p>Type:</p>
        <input asp-for="@Model.PcPart._Type" type="text" class="form-control" />
        <span asp-validation-for="@Model.PcPart._Type" class="text-danger"></span>

        <p>Price:</p>
        <input asp-for="@Model.PcPart._Price" type="number" step="0.01" class="form-control" />
        <span asp-validation-for="@Model.PcPart._Price" class="text-danger"></span>

        <button type="submit" class="btn btn-primary mt-3">Add PC Part</button>
    </form>
</div>

在你的控制器里创建一个接受POST请求的Action，负责处理表单提交并返回JSON格式的结果（包含成功/失败状态和提示信息）：

using Microsoft.AspNetCore.Mvc;
using System.Threading.Tasks;

public class PcPartsController : Controller
{
    // 假设你有数据库上下文用来操作数据
    private readonly YourDbContext _context;

    public PcPartsController(YourDbContext context)
    {
        _context = context;
    }

    // GET: 显示添加页面
    public IActionResult Add()
    {
        return View(new PcBuildAddViewModel());
    }

    // POST: 处理AJAX提交的表单数据
    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> Add(PcBuildAddViewModel model)
    {
        if (ModelState.IsValid)
        {
            // 将PC部件数据添加到数据库
            _context.PcParts.Add(model.PcPart);
            await _context.SaveChangesAsync();

            // 返回成功的JSON响应
            return Json(new { success = true, message = "PC部件添加成功！" });
        }

        // 模型验证失败时，收集错误信息返回
        var errors = ModelState.Values.SelectMany(v => v.Errors)
                                      .Select(e => e.ErrorMessage)
                                      .ToList();
        return Json(new { success = false, message = "添加失败，请检查输入！", errors = errors });
    }
}

在视图中添加jQuery的AJAX代码，拦截表单提交事件，实现无刷新提交：

<!-- 先引入jQuery（如果还没引入的话） -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function() {
    $('#AddPcForm').submit(function(e) {
        // 阻止表单默认的刷新提交行为
        e.preventDefault();

        // 序列化表单数据（自动包含防伪造令牌）
        var formData = $(this).serialize();

        // 发送AJAX请求
        $.ajax({
            url: '@Url.Action("Add", "PcParts")', // 对应控制器的Action路径
            type: 'POST',
            data: formData,
            success: function(response) {
                var messageArea = $('#messageArea');
                if (response.success) {
                    // 显示成功提示
                    messageArea.removeClass('alert-danger').addClass('alert-success');
                    messageArea.text(response.message).fadeIn();
                    // 清空表单
                    $('#AddPcForm')[0].reset();
                    // 3秒后自动隐藏提示
                    setTimeout(() => messageArea.fadeOut(), 3000);
                } else {
                    // 显示错误提示
                    messageArea.removeClass('alert-success').addClass('alert-danger');
                    var errorContent = response.message;
                    // 如果有具体错误列表，拼接显示
                    if (response.errors?.length > 0) {
                        errorContent += '<br>' + response.errors.join('<br>');
                    }
                    messageArea.html(errorContent).fadeIn();
                }
            },
            error: function() {
                // 处理网络或服务器内部错误
                $('#messageArea').removeClass('alert-success').addClass('alert-danger');
                $('#messageArea').text('请求失败，请稍后重试！').fadeIn();
            }
        });
    });
});
</script>

• 防伪造令牌：@Html.AntiForgeryToken()生成的隐藏字段会被serialize()自动携带，后端的[ValidateAntiForgeryToken]特性会验证它，防止CSRF攻击。
• 模型验证：后端先检查ModelState.IsValid，验证失败时把具体错误返回给前端，用户能直观看到哪里填错了。
• 用户体验：成功提交后自动清空表单、提示自动隐藏，错误时显示具体问题，提升操作流畅度。

这样就能实现你想要的无刷新添加PC部件功能啦~

内容的提问来源于stack exchange，提问作者spoilerd do