Question

我创建了一个Razor页面，该页面允许用户在提交表单之前动态添加到对象模型中，但是当我尝试转换为部分视图时，则没有将对象添加到页面模型中。刚移到局部视图时，相同的代码不应该工作吗？

此代码有效：

<div class="row form-group">
    <div>
        <input type="submit" asp-page-handler="AddQuestion" class="btn btn-info" value="Add Question" />
    </div>
    <div class="form-group">
            @for (var i = 0; i < Model.SurveyObject.Questions.Count; i++)
            {
                <h4><span class="alert-info">Question ID# @Model.SurveyObject.Questions[i].QuestionId</span></h4>
                <span class="hidden">
                    @Html.LabelFor(x => Model.SurveyObject.Questions[i].QuestionId)
                    @Html.EditorFor(x => Model.SurveyObject.Questions[i].QuestionId)
                </span>
                @Html.LabelFor(x => Model.SurveyObject.Questions[i].Question)
                @Html.EditorFor(x => Model.SurveyObject.Questions[i].Question)
            }
    </div>
</div>

但是当转换为局部视图时，它不起作用：

<div class="row form-group">
    <div>
        <input type="submit" asp-page-handler="AddQuestion" class="btn btn-info" value="Add Question" />
    </div>
    <div class="form-group">
        @for (var i = 0; i < Model.SurveyObject.Questions.Count; i++)
        {
            @await Html.PartialAsync("_SurveyCreateQuestion", Model.SurveyObject.Questions[i]);
        }
    </div>
</div>

这里是支撑物。

public class Survey
{
    public string SurveyName { get; set; }
    public List<SurveyQuestion> Questions { get; set; }
    public Survey()
    {
        this.SurveyName = "new survey name here";
        this.Questions = new List<SurveyQuestion>();
    }
}
public class SurveyQuestion
{
    public int QuestionId { get; set; }
    public string Question { get; set; }
    public List<SurveyResponse> ResponseList { get; set; }
    public SurveyQuestion() { }
    public SurveyQuestion(int id)
    {
        this.QuestionId = id;
        this.Question = "question text for id " + id;
        this.ResponseList = new List<SurveyResponse>();
    }
}
public class SurveyResponse
{
    public int ResponseId { get; set; }
    public string Response { get; set; }
    public SurveyQuestion NextQuestion { get; set; }
    public SurveyResponse() { }
    public SurveyResponse(int id)
    {
        this.ResponseId = id;
        this.Response = "response text for id " + id;
    }
}

这是cshml文件。

public class SurveyCreateModel : PageModel
{
    [BindProperty]
    public Survey SurveyObject { get; set; }
    public void OnGet()
    {

    }
    public void OnPostAddQuestion()
    {
        this.SurveyObject.Questions.Add(new SurveyQuestion(this.SurveyObject.Questions.Count + 1));
    }
}

部分视图。

@model SurveyCreateModel.SurveyQuestion
@if (Model == null)
{
    <span></span>
}
else
{
    <h4><span class="alert-info">Question ID# @Model.QuestionId</span></h4>
    <span class="hidden">
        @Html.LabelFor(x => Model.QuestionId)
        @Html.EditorFor(x => Model.QuestionId)
    </span>
    @Html.LabelFor(x => Model.Question)
        @Html.EditorFor(x => Model.Question)
}

在没有部分视图的情况下查看呈现的HTML的循环，将按预期方式创建唯一元素，如两次单击添加问题按钮时生成的标签一样。

<label for="SurveyObject_Questions_0__QuestionId">QuestionId</label>
<label for="SurveyObject_Questions_1__QuestionId">QuestionId</label>

但是，当将用于生成标记的相同代码移入同一循环内的局部视图时，html会呈现如下：

<label for="QuestionId">QuestionId</label>

部分视图的屏幕打印不起作用-按住添加问题，但始终停留在第一个问题-模型未更新

代码工作的屏幕截图-按下添加问题按钮两次并添加了两个问题-模型正在更新

Answer 1

我无法使它与部分视图一起使用，但在使用编辑器模板时确实可以使用。

@model SurveyCreateModel.SurveyQuestion
<h4><span class="alert-info">Question ID# @Model.QuestionId</span></h4>
<span class="hidden">
    @Html.LabelFor(x => Model.QuestionId)
    @Html.EditorFor(x => Model.QuestionId)
</span>
@Html.LabelFor(x => Model.Question)
@Html.EditorFor(x => Model.Question)

然后在cshtml中简单地引用此代码：

<div class="form-group">
  @Html.EditorFor(x => x.SurveyObject.Questions)
</div>

使用Razor部分视图动态添加到表单中的页面模型

1 个答案: