ASP.NET Core视图中双按钮分存不同数据库的调用异常问题

1. 重复按钮ID：视图中存在两个id="submit2"的按钮，HTML规范要求ID必须唯一，重复ID会导致浏览器无法正确识别按钮行为。
2. 按钮默认提交行为：表单内的按钮默认type="submit"，即使添加了onclick事件，点击时仍会触发表单的默认提交（表单未指定action时，默认提交到当前页面对应的AddOrEdit POST方法）。
3. 路由配置错误：第一个submit2按钮的asp-action="AddOrEdit"，明确指定触发AddOrEdit方法，而非目标的SubmitBD（注意你控制器方法名是SubmitBD，但描述里写的是SubmitDB，存在拼写不一致）。
4. 模型绑定不匹配：SubmitBD方法接收Transaction模型参数，但表单字段属于CategoryModel，直接提交会导致模型绑定失败。

1. 修正按钮基础配置 #

移除重复按钮，为每个按钮设置唯一ID，并明确按钮类型：

<div class="mb-5">
    <!-- 调用SubmitBD的提交按钮 -->
    <ejs-button id="submitDB" asp-action="SubmitBD" asp-controller="Category" type="submit" content="DB Submit" cssClass="e-success"></ejs-button>
    <!-- 触发Test函数的按钮，设置type="button"避免默认表单提交 -->
    <ejs-button id="testBtn" type="button" onclick="Test()" content="Test Button" cssClass="e-success"></ejs-button>
</div>

2. 统一方法名拼写（可选） #

如果你实际需要的方法名是SubmitDB，将控制器中的SubmitBD重命名为SubmitDB，并同步修改视图中的asp-action="SubmitDB"：

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> SubmitDB([Bind("TransactionId,CategoryId,Amount,Note,Date")] Transaction transaction)
{
    if (ModelState.IsValid)
    {
        if (transaction.TransactionId == 0)
            _context.Add(transaction);

        await _context.SaveChangesAsync();
        return RedirectToAction(nameof(Index));
    }  
    return View(transaction);
}

3. 用AJAX实现Test函数的提交逻辑 #

如果希望通过Test函数异步提交数据到SubmitDB，需要手动发送请求并携带防伪令牌：

function Test() {
    debugger;
    // 获取防伪令牌
    const token = document.querySelector('input[name="__RequestVerificationToken"]').value;
    // 构建Transaction数据（根据实际需求填充字段）
    const transactionData = {
        CategoryId: document.querySelector('input[name="CategoryId"]').value,
        Amount: 0,
        Note: "",
        Date: new Date().toISOString()
    };

    // 发送AJAX请求
    fetch('/Category/SubmitDB', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'RequestVerificationToken': token
        },
        body: JSON.stringify(transactionData)
    })
    .then(response => {
        if (response.ok) window.location.href = '/Category/Index';
    })
    .catch(error => console.error('提交失败:', error));
}

4. 调整模型绑定（可选） #

如果需要同时提交Category和Transaction数据，可以修改控制器方法参数：

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> SubmitDB(CategoryModel category, Transaction transaction)
{
    // 先保存Category
    if(category.CategoryId == 0)
        _context.Add(category);
    else
        _context.Update(category);
    await _context.SaveChangesAsync();

    // 关联CategoryId到Transaction并保存
    transaction.CategoryId = category.CategoryId;
    _context.Add(transaction);
    await _context.SaveChangesAsync();

    return RedirectToAction(nameof(Index));
}

• 表单内无需提交表单的按钮，必须设置type="button"，否则会默认触发表单提交。
• ASP.NET Core的防伪令牌必须包含在POST请求中，AJAX请求需手动携带该令牌。
• 控制器方法名与视图asp-action的名称必须完全一致，避免拼写错误。

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