Asp.net Core PartialView提交表单不必要

huangapple go评论93阅读模式
英文:

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&lt;Answer&gt; Answers { get; set; } = new List&lt;Answer&gt;() { 
            new Answer() { Content = &quot;Answeeeer&quot; }, 
            new Answer() { Content = &quot;Answeeeer2&quot; },
            new Answer() { Content = &quot;Answeeeer3&quot; }
        };
public class Quiz
    {
        [Key]
        public Guid Id { get; } = Guid.NewGuid();
        public string Name { get; set; }
        public ICollection&lt;Question&gt; Questions { get; set; } = new List&lt;Question&gt;() { };

In front side I have Question and Answer Partial views:

Question Partial View:

@model QuizIt_Tests.Entities.Question

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


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

	&lt;/script&gt;
}

Answer Partial View:

@model QuizIt_Tests.Entities.Answer


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

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(&quot;EditorTemplates/Question&quot;, question);
        }
        public IActionResult AddBlankAnswer(Question model)
        {
            return PartialView(&quot;EditorTemplates/Answer&quot;, 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.

 &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; id=&quot;addAnswer @Model.Id&quot;&gt;Add Answer&lt;/button&gt;

huangapple
  • 本文由 发表于 2023年1月9日 17:51:21
  • 转载请务必保留本文链接:https://go.coder-hub.com/75055535.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定