Question

我继承了一些不完整的代码。开发人员使用编辑器模板来创建他的复选框列表。问题是它没有绑定回模型，因此我可以将数据返回到服务器端。任何人都有一个例子，说明如何使用editorfortemplate复选框列表并将数据发送回模型？以下是editortemplate内容。

EDITOR TEMPLATE ，名为ServiceTypeViewModel.cshtml

     @model List<ViewModels.ServiceTypeViewModel>
<table>

@{int k = 0; int columns = 2;}

@for (int i = 0; i < (Model.Count / columns + (Model.Count % columns == 0 ? 0 : 1)); i++)
{
    <tr>
    @for(int j = 0; j<columns; j++){
        <td>
            @if (k<Model.Count) { 
                <input name="ProvidedServices[@(k)].Name" id="ProvidedServices__@(k)__Name" type="hidden" value="@Model[k].Name">       
                <input name="ProvidedServices[@(k)].Selected" class="CB" id="ProvidedServices__@(k)__Selected" type="checkbox" value="true">
                <input name="ProvidedServices[@(k)].Selected" type="hidden" value="false">
                <input name="ProvidedServices[@(k)].ServiceTypeClass" id="ProvidedServices__@(k)__ServiceTypeClass" type="hidden" value="@Model[k].ServiceTypeClass">       
                <input name="ProvidedServices[@(k)].ServiceType" id="ProvidedServices__@(k)__ServiceType" type="hidden" value="@Model[k].ServiceType">       
                @Html.DisplayFor(m=>Model[k].Name)
                k++;
            }
        </td>
    }
    </tr>
}
</table>

以下模型

  public class ServiceTypeViewModel
    {
        public string ServiceTypeClass { get; set; }
        public string ServiceType { get; set; }
        public bool Selected { get; set; }
        public string Name { get { return ServiceTypeClass + " " + ServiceType; } }
    }
}

主模型中的EditorFor Template定义。

[UIHint("ServiceTypeViewModel")]
public List<ServiceTypeViewModel> ProvidedServices { get; set; }

Index.cshtml

    @Html.LabelFor(x => x.ProvidedServices)
    @Html.EditorFor(x => x.ProvidedServices)

如何将其显示为列表？

我让它在模板中呈现如上图所示，但回发将providerservices返回为null。下面的代码呈现两列复选框。

@model List<ViewModels.ServiceTypeViewModel>
<table>
 @{int k = 0; int columns = 2;}

@for (int i = 0; i < (Model.Count / columns + (Model.Count % columns == 0 ? 0 : 1)); i++)
{
   <tr>
    @for(int j = 0; j<columns; j++){
     <td>
   @if (k<Model.Count) { 
    @Html.HiddenFor(m => m[k].Name);
    @Html.HiddenFor(m => m[k].ServiceTypeClass);
    @Html.HiddenFor(m => m[k].ServiceType);
    @Html.CheckBoxFor(m => m[k].Selected);
    @Html.DisplayFor(m => m[k].Name);
  k++;
      }
        </td>
    }
    </tr>
  }
</table>

Answer 1

将ServiceTypeViewModel.cshtml更改为

@model ViewModels.ServiceTypeViewModel

<tr>
  <td>
    @Html.HiddenFor(m > m.ServiceTypeClass)
    @Html.HiddenFor(m > m.ServiceType)
    @Html.CheckBoxFor(m > m.Selected)
    @Html.DisplayFor(m => m.Name)
  </td>
</tr>

并确保其位于/Views/Shared/EditorTemplates文件夹（或/Views/yourConrollerName/EditorTemplates文件夹）

中

附注：不清楚变量k和columns应该做什么，但此编辑器模板将为集合中的每个项目生成正确的html

编辑（根据修订后的问题）

如果您想要2列布局，请修改模板以使用<div>元素并使用css设置样式

@model ViewModels.ServiceTypeViewModel
<div>
  @Html.HiddenFor(m > m.ServiceTypeClass)
  ....
</div>

并在主视图中

<div id="container">
  @Html.EditorFor(x => x.ProvidedServices) 
</div>

和css

#container div {
  width: 50%;
  display: inline-block;
  float: left;
}

这将生成2列，如this fiddle

所示

或者，如果您确实想要使用表（由于表是表格数据，它不是真的合适），那么您就不能使用EditorTempate。相反，您需要在主视图中使用for循环

<table>
  <tr>
    @for(int i = 0; i < Model.ProvidedServices.Count; i++)
    {
      <td>
        @Html.HiddenFor(m => m.ProvidedServices[i].ServiceTypeClass)
        @Html.HiddenFor(m => m.ProvidedServices[i].ServiceType)
        @Html.CheckBoxFor(m => m.ProvidedServices[i].Selected)
        @Html.LabelFor(m => m.ProvidedServices[i].Selected, Model.ProvidedServices[i].Name)
      </td>
      if((i + 1) % 2 == 0)
      {
        @:</tr><tr>
      }
    }
  </tr>
</table>

附注：包含属性Name的隐藏输入有点无意义。它只是一个readonly属性（没有setter）所以它无论如何也不会受到限制。

CheckboxList MVC EditorFor Template PostBack

1 个答案: