Asp.net 核心部分视图不必要地提交表单

jaql4c8m  于 2023-01-10  发布在  .NET
关注(0)|答案(1)|浏览(152)

我想用Asp创建一个测验网站。我想创建测验,向测验中添加问题,并向问题中添加答案。"添加问题"按钮可添加问题,但"添加答案"按钮只提交表单,而不添加问题的答案。
我的课程:

public class Answer
    {
        [Key]
        public Guid Id { get; } = Guid.NewGuid();
        public string Content { get; set; }
        public Guid QuestionId { get; set; }
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" }
        };
public class Quiz
    {
        [Key]
        public Guid Id { get; } = Guid.NewGuid();
        public string Name { get; set; }
        public ICollection<Question> Questions { get; set; } = new List<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>
}

答案部分视图:

@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 });
        } 
    }
x4shl7ld

x4shl7ld1#

您没有在按钮中指定type属性,默认情况下,该属性等于submit,这将导致表单被提交,要更改其行为,请将type值更改为button,如下所示。

<button type="button" class="btn btn-primary" id="addAnswer @Model.Id">Add Answer</button>

相关问题