英文:
Asp.net Core PartialView submits form unnecessarily
问题
我想创建一个使用Asp的测验网站。我想创建测验,向测验中添加问题,并为问题添加答案。添加问题的按钮可以成功添加问题,但是"Add answer"按钮提交表单而不是向问题添加答案。
我的类:
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 = "答案1" },
new Answer() { Content = "答案2" },
new Answer() { Content = "答案3" }
};
}
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">问题</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">添加答案</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">答案内容</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 });
}
}
英文:
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 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 Partial View:
@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>
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 });
}
}
答案1
得分: 0
你没有在按钮中指定type
属性,默认情况下它等于submit
,这会导致表单被提交。要更改其行为,请将type
值更改为button
,如下所示。
<button type="button" class="btn btn-primary" id="addAnswer @Model.Id">Add Answer</button>
英文:
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" class="btn btn-primary" id="addAnswer @Model.Id">Add Answer</button>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论