Question

我有一个表单，为每条记录写出一个Approve / Deny单选按钮。我试图弄清楚如何使用HttpPost循环遍历每个并确定单选按钮是否被选中，如果是，则选择哪一个。

进行一些研究我发现有些人使用Form集合作为表单，在一个例子中，我发现用户使用表单ViewModel（这是我通常做的）。但是，当我尝试任何一个我空手而归的时候。

这是我的表格。我将列表中的每条记录写到表中。我已经尝试过Html.RadioButton和Html.RadioButtonFor来创建它们。我还在表格下面有一个评论文本框，有人可以在其中添加一些评论。这是视图的片段。

<tbody>
    @foreach (var item in Model.listPendingExceptions)
    {
        <tr>
            <td>@Html.RadioButton("rdo" + item.RID, "A")</td>
            <td>@Html.RadioButton("rdo" + item.RID, "D")</td>
            <td>@item.Shift_Date.ToShortDateString()</td>
        </tr>
    }
</tbody>

@Html.TextAreaFor(m => m.ExceptionComment, new { cols = 200, @rows = 4, @maxlength = "100", @class = "form-control", @placeholder = "100 character limitation", @autofocus = "autofocus" })

在我的HttpPost中，我尝试过使用表单集合。但是，我发现的是查看AllKeys列表。当我查看我的帖子时，AllKeys中唯一的东西就是评论的TextBox值。

当我在HttpPost中使用ViewModel时，我用来填充View中的表的异常列表为NULL。我希望因为我没有将列表存储在隐藏的字段中。

如何循环浏览每条记录，确定选择了哪个单选按钮，以及从评论文本框中获取文字？

EditTemplate的更新

我在Views中为EditorTemplates创建了文件夹结构。

我已经有一个带有异常列表的ViewModel，但我确实将SelectedApproval从主VM移动到了Exceptions列表。

public class ReportPendingExceptionsViewModel
    {
        public List<PendingException> listPendingExceptions { get; set; }

        public bool IsAdmin { get; set; }

        [Required(ErrorMessage = "*Required")]
        public string ExceptionComment { get; set; }
    } 

    public class PendingException
    {
        public int RID { get; set; }
        public DateTime Shift_Date { get; set; }
        public string Shift_Text { get; set; }
        public string Emp_Id { get; set; } 
        public string Emp_Name { get; set; }
        public string Last_Name { get; set; }
        public string First_Name { get; set; }
        public string Comment_Text { get; set; }
        public string SelectedApproval { get; set; }
    }

然后我为表格行创建了一个Razor视图。

@model ProjectName.Models.ViewModels.PendingException

<tr>
    <td>@Html.RadioButtonFor(e=>e.SelectedApproval,"A")</td>
    <td>@Html.RadioButtonFor(e => e.SelectedApproval, "D")</td>
    <td>@Model.Shift_Date.ToShortDateString()</td>
    <td>@Model.Emp_Name</td>
    <td>@Model.Shift_Text</td>
    <td>@Model.Comment_Text</td>
    <td></td>
</tr>

然后我更新了我的主视图以使用EditFor。

<thead>
    <tr>
        <th style="width:80px;">Approve</th>
        <th style="width:80px;">Deny</th>
        <th>Shift Date</th>
        <th>Employee</th>
        <th>Schedule</th>
        <th>Comments</th>
        <th></th>
    </tr>
</thead>
<tbody>
    @Html.EditorFor(f => f.listPendingExceptions)
</tbody>

然而，当我运行它时，我得到的只是RID值。所以，我必须遗漏一些东西。以下是View Source的输出。

我错过了一步吗？

Answer 1

  var username;
  var questionid;

  function renderHTML(data) {
    var htmlString = "";
    username = data[0].username;
    //var examid = data[1].examid;
    questionid = data[2].questionid;
    for (var i = 0; i < data.length; i++) {
      htmlString += "<p>" + data[i].questionid + "." + "\n" + "Question: " + data[i].question + "\n" + "<input type='text'>";
      htmlString += '</p>';
    }
    response.insertAdjacentHTML('beforeend', htmlString);
  }

  function send() {
    var inputText = document.querySelectorAll("input[type='text']");
    var data = [];
    for (var index = 0; index < inputText.length; index++) {
      input = inputText[index].value;
      data.push({
        'text': input
      });
    }
    console.log(data);

Answer 2

使用编辑器模板非常容易。

首先为待处理的例外项目创建视图模型

public class ExceptionVm
{
    public int Id { set; get; }
    public bool? IsApproved { set; get; }
    public DateTime ShiftDate { set; get; }
}

在主视图模型中，您将添加一个类型的集合属性 List<ExceptionVm>。

public class MyViewModel
{
   public string Comment { set;get;}
   public List<ExceptionVm> PendingExceptions { set;get;}
   public MyViewModel()
   {
     PendingExceptions = new List<ExceptionVm>();
   }
}

在您的GET操作中，您初始化视图模型对象，加载PendingExceptions属性

public ActionResult Create()
{
    var vm = new MyViewModel();
    vm.ExceptionVms = new List<ExceptionVm>()
    {
        new ExceptionVm() {Id = 1, ShiftDate = DateTime.Now.AddDays(-3)},
        new ExceptionVm() {Id = 2, ShiftDate = DateTime.Now.AddDays(-2)},
        new ExceptionVm() {Id = 3, ShiftDate = DateTime.Now.AddDays(-1)}
    };
    return View(vm);
}

现在，让我们创建一个编辑器模板。在EditorTemplates或~/Views/YourControllerName/下创建名为~/Views/Shared/的新目录，并在其下添加新的剃刀视图。为文件指定与视图模型类ExceptionVm.cshtml

相同的名称

现在将以下代码添加到编辑器模板视图中。这基本上渲染了2个单选按钮和日期

@model ExceptionVm
<tr>
    <td>@Html.RadioButtonFor(b=>b.IsApproved, true)</td>
    <td>@Html.RadioButtonFor(b => b.IsApproved, false) </td>
    <td> @Model.ShiftDate   @Html.HiddenFor(x=>x.Id)    </td>
</tr>

现在转到主视图，它是MyViewModel类的强类型，并调用Html.EditorFor帮助器方法并将PendingExceptions集合属性传递给

@model MyViewModel
@using(Html.BeginForm())
{
      <table class="table">
        <tbody>
            @Html.EditorFor(f => f.PendingExceptions)
        </tbody>
    </table>
    @Html.TextBoxFor(f => f.Comment)
   <input type="Submit" value="Submit" class="btn btn-default" />
}

对EditorFor的调用将为PendingExceptions集合中的每个项目呈现一个表格行。提交表单时，可以使用相同的MyViewModel类作为参数并检查PendingExceptions属性，遍历每个项目并查看它是true还是false还是{{1 （如果他们没有选择任何东西）

null

如果您不想允许空选择，请将IsApproved属性类型从[HttpPost] public ActionResult Create(MyViewModel model) { // check model.PendingExceptions collection and each items IsApproved prop value // to do : return something }更改为bool?

如何从表单中获取RadioButton值？

2 个答案: