asp.net-mvc-3 - 在 Questionbank razor 应用程序中将 Partialview 项目返回给 Controller

Question

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

@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 时，我正在调用我的 PartialView _Question 每次我 clcik btnAddQuestion 它都会加载我的 partialView 页面 _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" />

...

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

更新：

我查看了代码..嗯..

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

为什么您需要以 HTML 形式包装每个问答对？

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

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