我想用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 });
}
}
1条答案
按热度按时间x4shl7ld1#
您没有在按钮中指定
type
属性,默认情况下,该属性等于submit
,这将导致表单被提交,要更改其行为,请将type
值更改为button
,如下所示。