ASP.NET MVC的Create View中的集合的數據綁定

Question

我正在嘗試將調查功能添加到我的ASP.NET MVC 5 Web應用程序中，以便用戶可以創建帶有自定義問題的調查以發送給其他用戶。 問題是，我無法允許用戶在“創建調查”視圖中向調查添加問題。

我已經看到了在“編輯”視圖中執行此操作的方法，當已經創建了模型的實例時，但我希望用戶能夠在將調查添加到數據庫之前創建調查問題。

這是我的調查模型：

public class Survey
    {
        public int SurveyId { get; set; }

        public string Name { get; set; }

        public string Author { get; set; }

        public DateTime StartDate { get; set; }

        public DateTime EndDate { get; set; }

        public List<Question> Questions { get; set; }

        public List<Response> Responses { get; set; }
    }

這是我的問題模型：

public class Question
    {
        public int QuestionId { get; set; }

        public int SurveyId { get; set; }

        public string Title { get; set; }

        public string Body { get; set; }

        public QuestionType QuestionType { get; set; }

        public DateTime CreatedOn { get; set; }

        public DateTime LastModified { get; set; }

        public List<Answer> Answers { get; set; }
    }

老實說，我現在在Create.cshtml中的代碼是垃圾，因為我真的不知道從哪里開始，但在這里它是無論如何：

<h2>Create</h2>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Survey</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Author, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Author, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Author, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.StartDate, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.StartDate, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.StartDate, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.EndDate, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.EndDate, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.EndDate, "", new { @class = "text-danger" })
            </div>
        </div>

        <h4 class="well well-small">
            Questions
        </h4>

        <button class="toggle-add-question" data-target="#add-question" data-toggle="modal" type="button">
            <i class="icon-plus"></i> Add Question
        </button>

        <div class="modal" id="add-question" tabindex="-1">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3>Add Question</h3>
            </div>
            <div class="modal-body">
                <div class="row">
                    <form method="post">
                        <fieldset>
                            <div class="form-group">
                                <label for="Title">Title</label>
                                <input type="text" id="Title" name="Title" data-bind="value: title" />
                            </div>
                            <div class="form-group">
                                <label for="Type">Type</label>
                                <select id="Type" name="Type" data-bind="value: type">
                                    <option>Yes/No</option>
                                    <option>Number</option>
                                </select>
                            </div>
                        </fieldset>
                        <div class="form-group">
                            <div class="col-md-offset-2 col-md-10">
                                <input type="submit" value="Create" class="btn btn-default" data-dismiss="modal" />
                            </div>
                        </div>
                    </form>
                </div>
                <div class="row">
                    <div class="span6">
                        <textarea id="Body" name="Body"></textarea>
                    </div>
                </div>
            </div>
        </div>

        <table class="table">
            <tr>
                <th>
                    Question Title
                </th>
                <th>
                    Question Body
                </th>
                <th>
                    Question Type
                </th>
            </tr>
            @if (Model.Questions != null)
            {
                for (var i = 0; i < Model.Questions.Count(); i++)
                {
                    <tr>
                        @Html.HiddenFor(x => Model.Questions[i].QuestionId)
                        <td>
                            @Html.TextBoxFor(x => Model.Questions[i].Title)
                        </td>
                        <td>
                            @Html.TextBoxFor(x => Model.Questions[i].Body)
                        </td>
                        <td>
                            @Html.TextBoxFor(x => Model.Questions[i].QuestionType)
                        </td>
                    </tr>
                }
            }
        </table>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

我想要的是讓用戶能夠點擊“添加問題”按鈕，彈出帶有問題字段的模態，然后讓用戶能夠點擊“保存”並擁有模態退出和新問題出現在表格中。 現在，我得到的錯誤是對象引用未設置為對象的實例，這非常有意義，因為尚未創建Survey對象，但我不確定如何以不同方式執行此操作。 （沒有表格，彈出模態視圖，但不添加任何問題）。

任何幫助將不勝感激，謝謝！

Answer 1

通過組合AJAX和部分視圖（此處稱為部分視圖）保存模式彈出窗口時，您可以更新表格。

包含您的問題數據的表可能位於具有自己的視圖模型的部分中，該模型接收您要呈現的問題。 您可以按原樣保留標記。

在您的頁面上，表格現在，將其替換為包含部分內部的div。

保存添加新問題的模態時，可以使用AJAX調用（單擊時觸發）命中Controller，保存新問題記錄（使用您需要的任何驗證）並使用新視圖模型返回表部分，填充了數據庫中的問題（包括您剛剛保存的新內容）。

在AJAX調用的成功回調中，使用新的partial和view模型填充容器div，然后關閉彈出窗口。 該頁面將在表格中顯示一個新問題，而不會經歷整個頁面循環。