Asp.net Core PartialView submits form unnecessarily-CodePudding

I want to create a Quiz website with Asp. I want to create Quiz, add questions to the quiz, and add answers to the question. Add question button adds a question, but the Addanswer button submits the form instead of adding an answer to the question.

My classes:

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>() { };

In front side I have Question and Answer Partial views:

Question Partial View:

@model QuizIt_Tests.Entities.Question

<hr style="height: 4px; color: black;" />
<div >
    <label asp-for="Content" >Question</label>
    <input asp-for="Content"  value="@Model.Content" />
    <span asp-validation-for="Content" ></span>
    <div id="answerRows @Model.Id" > 
        @Html.EditorFor(model => model.Answers)
        <button  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 Partial View:

@model QuizIt_Tests.Entities.Answer


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

My Controller:

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

CodePudding user response：

You did not specify the type attribute in the button, which by default is equal to submit which causes the form to be submitted, to change its behavior, change the type value to button as follows.

 <button type="button"  id="addAnswer @Model.Id">Add Answer</button>