将部分视图项目返回到问题库剃须刀应用程序中的控制器

Question

我正在尝试使用 MVC3 剃刀和 EF4 开发一个小型的问题库应用程序。这是我的问题库剃须刀页面：

@using System.Linq
@model MvcApplication1.ViewModels.QuestionBankViewModel
@{
    ViewBag.Title = " Question Bank";
}
    @Html.ValidationSummary(true)

<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
        @using (Ajax.BeginForm(new AjaxOptions()
  {
      UpdateTargetId = "divToAddQuestion",
      InsertionMode = InsertionMode.InsertAfter,
  }))
  {

<div class="div_question">
    <table class="table_question">
        <tr>
            <td rowspan="3">
            </td>
            <td>
                <span>Question Bank Title</span>
            </td>
            <td>@Html.EditorFor(model => model.QuestionBank.QuestionBankName) @*Question*@
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
        </tr>

    </table>
        <div class="div_answer">
            <table class="table_answer">
                <tr>
                    <td>
                        <span>Questions()</span>
                    </td>
                    <td>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </td>
                    <td>
                        <input type="submit" id="btnAddQuestion" name="ButtonCommand" value="Add Question" class="cancel" />
                    </td>
                    <td></td>
                </tr>
            </table>
        </div>
       <div id="divToAddQuestion">
        </div>
          <div id="divToAddAnswer">
        </div>
</div>
             <div>
        <input type="submit" id="btnSaveQuestionBank" name="ButtonCommand" value="Save" />
    </div>
    }

当我点击btnAddQuestion时，我正在调用我的PartView_Question每次我点击btnAddQuestion时，它都会加载我的部分视图页面_Question

这是我的部分观点_Question

@using System.Linq
@model MvcApplication1.Models.Question
@{
    ViewBag.Title = " Question";
}
    @Html.ValidationSummary(true)
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />

<div class="div_question">
    <table class="table_question">
     <tr>
         <td>
                <span>Question Number:</span>
            </td>
             <td >
               @Html.TextBoxFor(model => model.QuestionIndex, new { @class = "tinytextbox" })
            </td>
             <td></td>
        </tr>
        <tr>
            <td>
                <span>Question</span>
            </td>
            <td>@Html.EditorFor(model => model.strQuestion) @*Question*@
            </td>
            <td>
                @Html.ActionLink("Delete this", "Delete", new { id = Model.QuestionIndex }, new { @class = "deletebutton2", title = "Click to delete this Question and its Answers" })
            </td>
        </tr>
    </table>
        <div class="div_answer">
            <table class="table_answer">
                <tr>
                    <td>
                        <span>Answers()</span>
                    </td>
                    <td>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </td>
                    <td>
                        <input type="submit" id="btnAddAnswer" name="ButtonCommand" value="Add Answer" class="cancel" />
                    </td>
                </tr>
            </table>
        </div>
      </div>

这是我的模型类

 using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    namespace MvcApplication1.Models
    {
        public class QuestionBank 
        {
            public virtual int QuestionBankId { get; set; }
            public virtual string QuestionBankName { get; set; }
            public virtual List<Question> Questions { get; set; }
            public virtual List<Answer> Answers { get; set; }
            public virtual int SubjectTypeId { get; set; }
        }
        public class Question
        {
            public int QuestionId { get; set; }
            public int QuestionIndex { get; set; }
            public string strQuestion { get; set; }
        }
        public class Answer
        {
            public int AnswerId { get; set; }
            public int QuestionId { get; set; }
            public string strAnswer { get; set; }
            public int AnswerIndex { get; set; }
        }
    }

这是我的观点模型

    using System.Collections.Generic;
using MvcApplication1.Models;
namespace MvcApplication1.ViewModels
{
    public class QuestionBankViewModel
    {
        public QuestionBank QuestionBank { get; set; }
        public IEnumerable<Question> Questions { get; set; }
        public IEnumerable<Answer> Answers { get; set; }
        public string ButtonCommand { get; set; }
        public int QuestionIndex { get; set; }
        public int AnswerIndex { get; set; }
    }
}

当我点击btnAnswer时，我需要加载我的partialView _Answer。

@using System.Linq
@model MvcApplication1.Models.Answer
@{
    ViewBag.Title = " Answer";
}
@Html.ValidationSummary(true)
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<div class="div_answer">
    <table class="table_answer">
        <tr>
            <td>
                <span>Answer Number:</span>
            </td>
            <td>
                @Html.TextBoxFor(model => model.AnswerIndex, new { @class = "tinytextbox" })
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                <span>Answer</span>
            </td>
            <td>@Html.EditorFor(model => model.strAnswer) @*Question*@
            </td>
            <td>
            </td>
        </tr>
    </table>
</div>

在这里，我可以添加一个答案。每次我单击Add ans它都会加载新的答案选择。

当用户完成添加问题及其相应答案时，用户可以使用 EF4 上下文单击并保存整个题库。

我的问题是当我单击"保存"按钮时，我找不到我输入的问题和答案。

   using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcApplication1.ViewModels;
using MvcApplication1.Models;
namespace MvcApplication1.Controllers
{
    public class HomeController : Controller
    {
        Question qmodel = new Question();
        Answer amodel = new Answer();
        [HttpGet]
        public ActionResult QuestionBank()
        {
            return View();
        }
        [HttpPost]
        public ActionResult QuestionBank(QuestionBankViewModel model)
        {
            switch (model.ButtonCommand)
            {
                case "Add Question":
                    model.QuestionIndex++;
                    qmodel.QuestionIndex = model.QuestionIndex ;
                    return PartialView("_Question", qmodel);
                    break;
                case "Add Answer":
                    model.AnswerIndex++;
                    amodel.AnswerIndex = model.AnswerIndex;
                    return PartialView("_Answer", amodel);
                    break;
                case "Save":
                    this.SaveQuestionBank(model);
                    break;
            }
            return View(model);
        }
        public ActionResult Question()
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";
            return View();
        }
        public void SaveQuestionBank(QuestionBankViewModel model)
        {
            QBContext context = new QBContext();
            foreach (Question question in model.Questions)
            {
                context.Question.Add(question);
            }
            foreach (Answer answer in model.QuestionBank.Answers)
            {
                context.Answer.Add(answer);
            }
            context.QuestionBank.Add(model.QuestionBank);

        }
        public ActionResult About()
        {
            return View();
        }
    }
}

我的用户应该能够根据需要添加和删除任意数量的问题和答案选项，最后他们应该能够通过单击"保存"按钮保存所有内容。

当我单击保存按钮时，我期望在我的控制器中IEnumerable<Question> Questions和IEnumerable<Answer> Answers，但我总是将它们显示为空。为什么，我该如何解决这个问题？或者你认为我的方法有什么问题吗？

这是我的完整来源，但它无法获得我的控制器的问题和答案。感谢您的意见和建议。

Answer 1

我无法尝试您发布的代码，因为我认为并非所有部分都在那里试一试，但我想我可以提出一些线索来找到问题。

通过模型绑定绑定集合时，必须确保生成的输入元素的 name 属性应遵循规则:)

举个例子..

域模型

  public class Movie
  {
    public int Id { get; set; }
    public string Name { get; set; }
  }

视图模型

  public class AddMoviesModel
  {
    public Movie[] Movies { get; set; }
  }

发布操作

[HttpPost]
public ActionResult Index(AddMoviesModel moviesModel)
{
   // save to db?
}

我可以添加 5 部电影的表格

@model MvcBinding.Models.AddMoviesModel
@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>
@using (Html.BeginForm())
{
  for (var i = 0; i < 5; i++)
  {
    <p>
      @Html.EditorFor(m => m.Movies[i])  
    </p>
  }
  <input type="submit" value="Submit"/>
}

这里要注意的重要一点是我生成输入元素以添加 5 部电影的方式。如果看到视图源，则输入元素的名称应为 Movies[0].x、Movies[1].x.。（注意Movies是AddMoviesModel的属性名称）

<input type="text" name="Movies[0].Id" />
<input type="text" name="Movies[0].Name" />
<input type="text" name="Movies[1].Id" />
<input type="text" name="Movies[1].Name" />
...

请查看视图源，并确保输入元素的名称遵循规则，以发生集合的模型绑定。

更新：

我查看了代码..嗯..

问题是您已经有一个父窗体，并且每次单击"添加问题"按钮时都会添加新的子窗体。当您尝试提交主表单时，子表单中的问题不会发布到服务器，因此没有约束力:(

为什么需要每个问答对都包装在 HTML 表单中？

事实上，您不需要HTML表单来进行AJAX调用。

您应该将"添加问题"和"添加答案"更改为普通按钮（而不是提交），并且必须将一些JavaScript挂接到这些按钮的单击事件以进行服务器调用以获取部分视图，或者您甚至可以将这些按钮替换为Ajax.ActionLinks。你必须改变现在实施的方式。