如何将模型从视图传递到控制器，将项目添加到列表，传递回视图

Question

每次单击按钮时，我都会在表单中添加一个局部视图。 它是一个带有一组响应的文本区域。 如何将我的模型从视图传递到控制器，将其添加到列表模型并返回视图？

我正在传递 ReviewFormViewModel 我想将 ListAdhoc 传递给部分控制器并向其添加项目，然后将其传递回视图。

public class ReviewFormViewModel
{
    ...// other fields
    public List<AdhocViewModel> ListAdhoc { get; set; }
}

public class AdhocViewModel
{
    public int? ReviewId { get; set; }
    public String AdhocQuestion { get; set; } //free form
    public int? SelectedAnswer { get; set; } // for binding int? for optional
    public String Comments { get; set; }
    public List<AdhocOptionsVM> ListAdhocOptions { get; set; }
}

public class AdhocOptionsVM
{
    public int AnswerId { get; set; }
    public String RatingName { get; set; }
    public Decimal Rating { get; set; }
    public String ActiveFl { get; set; }

}

局部视图控制器

 public PartialViewResult Adhoc()
    {
        //pass model object on button click and add each item to the model everytime
        var AdhocObj = new AdhocViewModel();

        AdhocObj.ListAdhocOptions = new List<AdhocOptionsVM>();
        var query = db.dbQuestionOptions.Where(qo => qo.ActiveFl == "Y").OrderByDescending(qo => qo.Rating).ToList();

        foreach (var item in query)
        {
            var AdhocAnsOptionsVMObj = new AdhocOptionsVM();
            AdhocAnsOptionsVMObj.AnswerId = item.AnswerId;
            AdhocAnsOptionsVMObj.RatingName = item.RatingName;
            AdhocAnsOptionsVMObj.Rating = item.Rating;
            AdhocAnsOptionsVMObj.ActiveFl = item.ActiveFl;

            AdhocObj.ListAdhocOptions.Add(AdhocAnsOptionsVMObj);
        }


        return PartialView("Adhoc", AdhocObj);
}

以及使用 ReviewFormViewModel 的部分视图：

<div class="adhoc">
@using (Html.BeginCollectionItem("adhoc"))
{
    <div class="panel panel-success">
        <div class="panel-heading">
            @Html.HiddenFor(m => m.ReviewId)
            @Html.HiddenFor(m => m.AdhocId)

            @Html.TextAreaFor(m => m.AdhocQuestion, htmlAttributes: new { @style = "width:650px", @placeholder = "Enter Adhoc Question here" })<br />
        </div>
        <div class="panel-body">
            @foreach (var optAnswer in Model.ListAdhocOptions)
            {
                <div class="radio">
                    <responselabel>@Html.RadioButtonFor(m => m.SelectedAnswer, optAnswer.AnswerId, new { id = optAnswer.AnswerId }) @optAnswer.RatingName</responselabel><br />
                </div>
            }
            <div>@Html.ValidationMessageFor(m => m.SelectedAnswer)</div><br />

            @Html.TextAreaFor(m => m.Comments, htmlAttributes: new { @style = "width:650px", @placeholder = "Comments" })<br /><br />
        </div>
        <button type="button" class="delete">Delete</button>
    </div>

}

主视图

@model CustomerFeedback.Areas.ProjectManagers.Models.ReviewFormViewModel

@{
    ViewBag.Title = "CreateFormsIndex";
}

<h4 align="center">Project Review Form</h4>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="text-center">
                <h4>
                    @Html.DisplayName(Model.ProjectId) @Html.DisplayName(Model.ProjectName)
                </h4>
                <h4>
                    PM: @Html.DisplayName(Model.FullName)
                </h4>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <br />
    <div class="panel-group">
        @using (Html.BeginForm())
        {

            @Html.AntiForgeryToken()
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            @Html.HiddenFor(m => m.ProjectId)
            @Html.HiddenFor(m => m.AccountId)
            @Html.HiddenFor(m => m.ReviewDate)

            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="panel-group">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                Required Questions
                            </h4>
                        </div>
                        @for (int i = 0; i < Model.ListReqQuestions.Count; i++)
                        {
                            <div class="panel panel-success">
                                <div class="panel-heading">
                                    @Html.HiddenFor(m => m.ListReqQuestions[i].QuestionId)
                                    @Html.DisplayFor(m => m.ListReqQuestions[i].QuestionText)
                                </div>
                                <div class="panel-body">
                                    @foreach (var optAnswer in Model.ListReqQuestions[i].ListQuestionOptions)
                                    {
                                        <div class="radio">
                                            <responselabel>@Html.RadioButtonFor(m => m.ListReqQuestions[i].SelectedAnswer, optAnswer.AnswerId, new { id = optAnswer.AnswerId }) @optAnswer.RatingName</responselabel><br />
                                        </div>
                                    }
                                    <div>@Html.ValidationMessageFor(m => m.ListReqQuestions[i].SelectedAnswer)</div><br />

                                    @Html.TextAreaFor(m => m.ListReqQuestions[i].Comments, htmlAttributes: new { @style = "width:650px", @placeholder = "Comments" })<br /><br />
                                </div>
                            </div>
                        }

                        <div class="panel-heading">
                            <h4 class="panel-title">
                                Optional Questions
                            </h4>
                        </div>
                        @for (int i = 0; i < Model.ListOpQuestions.Count; i++)
                        {
                            <div class="panel panel-success">
                                <div class="panel-heading">
                                    @Html.HiddenFor(m => m.ListOpQuestions[i].QuestionId)
                                    @Html.DisplayFor(m => m.ListOpQuestions[i].QuestionText)
                                </div>
                                <div class="panel-body">
                                    @foreach (var optAnswer in Model.ListOpQuestions[i].ListQuestionOptions)
                                    {
                                        <div class="radio">
                                            <responselabel>@Html.RadioButtonFor(m => m.ListOpQuestions[i].SelectedAnswer, optAnswer.AnswerId, new { id = optAnswer.AnswerId }) @optAnswer.RatingName</responselabel><br />
                                        </div>
                                    }
                                    <div>@Html.ValidationMessageFor(m => m.ListOpQuestions[i].SelectedAnswer)</div><br />

                                    @Html.TextAreaFor(m => m.ListOpQuestions[i].Comments, htmlAttributes: new { @style = "width:650px", @placeholder = "Comments" })<br /><br />
                                </div>
                            </div>
                        }
                        @*on click (new adhoc question) add a new freeform question with list of answers*@
                        <div class="panel panel-success" id="adhoc">
                            @* renders partial adhoc view *@
                        </div>
                        <br />
                        <div class="center">
                            <input type="button" value="New Adhoc Question" class="btnAdhoc btn-success" />
                        </div>
                        <br />
                        <div class="center">
                            <input type="submit" value="Save" name="Command" class="btn btn-success" />
                            <input type="submit" value="Submit" name="Command" class="btn btn-success" />
                            <input type="submit" value="Cancel" name="Command" class="btn btn-success" />
                            <input type="submit" value="Attach" name="Command" class="btn btn-success" />
                        </div>

                    </div>
                </div>
            </div>
        }
    </div>
</div>

<script>

    $(function () {

        $('.btnAdhoc').click(function (event) {
            event.preventDefault();

            $.ajax({
                url: '/ProjectManagers/Forms/Adhoc',
                //data: JSON.stringify(model),
                type: 'get',
                success: function (result) {
                    $('#adhoc').append(result);
                }
            });
        });
    })
</script>

更新：我添加了 AdhocViewModel。

我已经为这些属性添加了视图模型。 我有一个表格，其中包含一组要回答的问题和答案。 那些来自数据库。 我有一个按钮，单击将生成局部视图并附加到表单（可以是多个）。 局部视图由一个文本区域（用于输入的任何问题）、一组响应（来自数据库）和一个评论框组成。 我不知道如何在发布（提交）时处理这个问题。 我的尝试是将模型从视图传递到局部控制器，向其中添加项目并将其传递回视图进行处理。 我在传递模型数据方面没有任何成功

更新 2使用 BeginCollectionItem 帮助程序更新了代码。 添加了主视图

Answer 1

集合未绑定的原因是因为BeginCollectionItem()的参数必须与您的属性名称匹配。 将其更改为

@using (Html.BeginCollectionItem("ListAdhoc")) // binds to List<AdhocViewModel> ListAdhoc

此外，您还需要在主视图中使用循环来呈现AdhocViewModel中的现有AdhocViewModel 。 即使最初不存在，如果由于ModelState无效而需要返回视图，仍然需要它。 在主视图中包括

<div class="panel panel-success" id="adhoc">
    @foreach(var item in Model.ListAdhoc)
    {
        @Html.Partial("Adhoc", item)
    }
</div>