C# , MVC , Instead table html

本文关键字：html table MVC Instead | 更新日期: 2023-09-27 18:14:16

我有这个模型:

 public class CoursesTeacher
{
    public int Id { get; set; }
    public string FullName { get; set; }
    public IEnumerable<string> CourseName { get;  set; }
    public IEnumerable<int> CourseId { get;  set; }
}

我想创建一个代替表html剃刀。老师有多门课程。

这样的

我写了下面的代码:

<table class="table table-bordered">
<tr>
    <th>
        @Html.ActionLink("Teacher Name", "RequestsTeachers")
    </th>
    <th>
        @Html.ActionLink("Corese Name", "RequestsTeachers")
    </th>
    <th>
        Edit
    </th>
</tr>
@foreach (var item in Model)
        {
    <tr>
        <td rowspan="@item.CourseName.Count()">
            @Html.DisplayFor(modelItem => item.FullName)
        </td>
        @foreach (var courseName in item.CourseName)
            {
            <td>
                @Html.DisplayFor(modelItem => courseName)
            </td>
        }
        @foreach (var courseId in item.CourseId)
            {
            <td>
                <div class="pull-right">
                    @Html.NoEncodeActionLink("<span class='glyphicon glyphicon-pencil'></span>", "Edit", "EditFinancial", "Control", routeValues: new { courseId = courseId }, htmlAttributes: new { data_modal = "", @class = "btn btn-default" })
                </div>
            </td>
        }
    </tr>
}

但创建不正确:正确的

如何正确创建

C# , MVC , Instead table html

我将创建一个视图模型来表示课程的信息:

public class CourseInfoModel
{
    public string CourseName { get; set; }
    public int CourseId { get; set; }
    public bool IsFirstCourse { get; set; }
}

然后在模型类中创建一个只读属性，以更合适的方式获取数据:

public class CoursesTeacher
{
    public int Id { get; set; }
    public string FullName { get; set; }
    public IEnumerable<string> CourseName { get; set; }
    public IEnumerable<int> CourseId { get; set; }
    public IList<CourseInfoModel> Courses
    {
        get
        {
            if (CourseName == null || CourseId == null || CourseId.Count() != CourseName.Count())
                throw new Exception("Invalid data"); //courses and ids must have the same number of elements
            var list = new List<CourseInfoModel>();
            for (int i = 0; i < CourseName.Count(); i++)
            {
                list.Add(new CourseInfoModel
                {
                    IsFirstCourse = i == 0,
                    CourseId = CourseId.ElementAt(i),
                    CourseName = CourseName.ElementAt(i),
                });
            }
            return list;
        }
    }
}

现在在视图中很容易呈现你想要的方式的表:

@model IEnumerable<MvcTable.Models.CoursesTeacher>
<table class="table table-bordered">
    <tr>
        <th>
            @Html.ActionLink("Teacher Name", "RequestsTeachers")
        </th>
        <th>
            @Html.ActionLink("Course Name", "RequestsTeachers")
        </th>
        <th>
            Edit
        </th>
    </tr>
    @foreach (var item in Model)
    {
        foreach (var courseItem in item.Courses)
        {
            <tr>
                @if (courseItem.IsFirstCourse)
                {
                    <td rowspan="@item.Courses.Count">
                        @Html.DisplayFor(modelItem => item.FullName)
                    </td>
                }
                <td>
                    @Html.DisplayFor(modelItem => courseItem.CourseName)
                </td>
                <td>
                    <div class="pull-right">
                        <a href="@Url.Action("EditFinancial", "Control", new {courseItem.CourseId})" data-modal="" class="btn btn-default"><span class='glyphicon glyphicon-pencil'></span></a>
                    </div>
                </td>
            </tr>
        }
    }
</table>

不再将CourseName和courseid保存在单独的列表中。为什么不创建一个类来表示课程并使用它呢?

public class CourseVm
{
  public int Id { set; get;}
  public string Name { set; get;}
} 
public class CoursesTeacher
{
  public int Id { set;get;}
  public string FullName { set;get;}
  public List<CourseVm> Courses { set;get;}
}

和强类型为集合CoursesTeacher

的视图
@model IEnumerable<CoursesTeacher>`
<table>
@foreach(var t in Model)
{
  <tr>
      <td>@t.FullName</td>
      <td>
         <table>
            @foreach(var c in t.Courses)
            {
              <tr><td>@c.Name</td>
                  <td><button>Some button</button></td>
              </tr>
            }
         </table>
      </td>
  </tr>
}
</table>
相关文章：