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

【问题标题】：How to pass Model from View to Controller, add items to list, pass back to view如何将模型从视图传递到控制器，将项目添加到列表，传回视图
【发布时间】：2017-02-02 22:39:27
【问题描述】：

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

我正在传递 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 帮助器更新了代码。添加主视图

【问题讨论】：

很难理解你想在这里做什么。在您的部分中没有任何地方显示与ListAdhoc 的属性有关的任何内容@
但是您声称部分使用了ReviewFormViewModel，这显然不是基于您的代码 - 它必须是@model AdhocViewModel
如果该部分是针对AdhocViewModel 的，那是没有意义的，因为ReviewFormViewModel 包含AdhocViewModel 的集合，并且为了为集合生成控件，他们需要有索引器和您的部分意愿不要那样做。
嗨斯蒂芬，我已经更新了我的问题
最好的猜测是您希望动态地将新项目添加到您的收藏中（尽管根据您显示的代码，即使这样也没有任何意义）。如果是这样，请参阅this answer 了解一些选项

标签： javascript asp.net-mvc asp.net-ajax

【解决方案1】：

集合不绑定的原因是BeginCollectionItem()中的参数必须与你的属性名称匹配。改成

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

此外，您还需要在主视图中使用循环来呈现集合中现有的AdhocViewModel。即使最初不存在，但在您需要返回视图时仍然需要它，因为ModelState 无效。在主视图中包括

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

【讨论】：