Asp.net Core PartialView中添加答案按钮意外提交表单问题

我使用ASP.NET Core搭建测验网站，需要实现创建测验、为测验添加题目、为题目添加答案的功能。目前添加题目按钮可正常工作，但添加答案按钮未执行添加答案操作，反而提交了表单。

实体类代码 #

Answer类 #

public class Answer
{
    [Key]
    public Guid Id { get; } = Guid.NewGuid();
    public string Content { get; set; }
    public Guid QuestionId { get; set; }
}

Question类 #

public class Question
{
    [Key]
    public Guid Id { get; } = Guid.NewGuid();
    public string Content { get; set; }
    public Guid QuizId { get; set; }
    public ICollection<Answer> Answers { get; set; } = new List<Answer>() { 
        new Answer() { Content = "Answeeeer" }, 
        new Answer() { Content = "Answeeeer2" },
        new Answer() { Content = "Answeeeer3" }
    };
}

Quiz类 #

public class Quiz
{
    [Key]
    public Guid Id { get; } = Guid.NewGuid();
    public string Name { get; set; }
    public ICollection<Question> Questions { get; set; } = new List<Question>() { };
}

前端局部视图 #

Question局部视图 #

@model QuizIt_Tests.Entities.Question

<hr style="height: 4px; color: black;" />
<div class="w-100 p-3 px-5 my-3">
    <label asp-for="Content" class="control-label">Question</label>
    <input asp-for="Content" class="form-control" value="@Model.Content" />
    <span asp-validation-for="Content" class="text-danger"></span>
    <div id="answerRows @Model.Id" class="w-75"> 
        @Html.EditorFor(model => model.Answers)
        <button class="btn btn-primary" id="addAnswer @Model.Id">Add Answer</button>
    </div>
</div>

@section Scripts {
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script src="jquery-3.6.1.min.js"></script>
    <script>
        $("#addAnswer " + @Model.Id).click(function () {
            console.log("clicked");
            $.ajax({
                url: '@Url.Action("AddBlankQuestion", "Quizes")',
                cache: false,
                success: function (html) {
                    $("#answerRows " + @Model.Id").append(html); },
                                            error: function (xhr, status, error) {
                        console.log(xhr.responseText);
                    }
                });
            return false;
        });
    </script>
}

Answer局部视图 #

@model QuizIt_Tests.Entities.Answer

<div class="row" style="background-color:red; margin: 20px;">
    <label asp-for="Content" class="control-label">Answer Content</label>
    <input asp-for="Content" class="form-control" value="@Model.Content" />
    <span asp-validation-for="Content" class="text-danger"></span>
</div>

控制器代码 #

public class QuizesController : Controller
{
    private readonly ApplicationDBContext _context;

    public QuizesController(ApplicationDBContext context)
    {
        _context = context;
    }

    public IActionResult AddBlankQuestion(Quiz model)
    {
        Question question = new Question(); 
        return PartialView("EditorTemplates/Question", question);
    }
    public IActionResult AddBlankAnswer(Question model)
    {
        return PartialView("EditorTemplates/Answer", new Answer() { QuestionId = model.Id });
    } 
}

问题修复方案 #

1. 修正按钮和容器的ID格式 #

元素ID包含空格会导致jQuery选择器解析错误，将空格替换为连字符：

<!-- 修改容器ID -->
<div id="answerRows-@Model.Id" class="w-75"> 
    @Html.EditorFor(model => model.Answers)
    <!-- 修改按钮ID -->
    <button class="btn btn-primary" id="addAnswer-@Model.Id">Add Answer</button>
</div>

2. 修正AJAX请求的Action和参数 #

当前AJAX错误调用了添加题目的AddBlankQuestion，应改为调用添加答案的AddBlankAnswer，并传递当前Question的ID：

@section Scripts {
    <!-- 只保留一个jQuery引入，避免冲突 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script>
        $("#addAnswer-@Model.Id").click(function (event) {
            // 明确阻止按钮的默认表单提交行为
            event.preventDefault();
            console.log("clicked");
            $.ajax({
                url: '@Url.Action("AddBlankAnswer", "Quizes")',
                type: 'GET',
                // 传递Question的ID给控制器
                data: { id: '@Model.Id' },
                cache: false,
                success: function (html) {
                    $("#answerRows-@Model.Id").append(html);
                },
                error: function (xhr, status, error) {
                    console.log(xhr.responseText);
                }
            });
        });
    </script>
}

3. 调整控制器的AddBlankAnswer方法 #

修改方法参数，直接接收Question的ID，无需绑定整个Question模型：

public IActionResult AddBlankAnswer(Guid id)
{
    return PartialView("EditorTemplates/Answer", new Answer() { QuestionId = id });
}

4. 移除重复的jQuery引入 #

局部视图中同时引入了CDN和本地的jQuery文件，会导致脚本冲突，保留其中一个即可。

内容的提问来源于stack exchange，提问作者Mətin Abaszadə