使用Bootstrap 基于MVC输出移动化table 列表

基于Bootrap的列表组及栅格布局来实现

模型定义

public class StreetEvent
    {
        public int Id { get; set; }
        public string StreetName { get; set; }
        public int LACnt { get; set; }

        public int JACnt { get; set; }

        public int SLCnt { get; set; }

        public int PQCnt { get; set; }
    }

测试Controller方法

public ActionResult TableView2([Form]Para para)
        {
            List<StreetEvent> list = new List<StreetEvent>();
            for (int i = 0; i < 20; i++)
            {
                list.Add(new StreetEvent
                {
                    Id = i,
                    StreetName = "街道" + i.ToString(),
                    LACnt = 10 + i * 2,
                    SLCnt = 15 + i * 3,
                    JACnt = 8 + i * 2,
                    PQCnt = 5 + i * 2
                });
            }
            return View(list);
        }

输出视图

@model IEnumerable<MvcWeb01.Models.StreetEvent>

@{
    ViewBag.Title = "TableView2";
}
<div class="container">
    <div class="row">
        <div class="col-xs-12 text-center"><h3>案件统计报表</h3></div>
    </div>
</div>
@foreach (MvcWeb01.Models.StreetEvent item in Model)
{
    <div class="list-group">
        <a href="#" class="list-group-item">
            <div class="container">
                <div class="row">
                    <div class="col-xs-6 text-left">街道</div>
                    <div class="col-xs-6 text-right">@item.StreetName</div>
                </div>
            </div>
        </a>
        <a href="#" class="list-group-item">
            <div class="container">
                <div class="row">
                    <div class="col-xs-6 text-left">立案数</div>
                    <div class="col-xs-6 text-right">@item.LACnt</div>
                </div>
            </div>
        </a>
        <a href="#" class="list-group-item">
            <div class="container">
                <div class="row">
                    <div class="col-xs-6 text-left">结案数</div>
                    <div class="col-xs-6 text-right">@item.JACnt</div>
                </div>
            </div>
        </a>
        <a href="#" class="list-group-item">
            <div class="container">
                <div class="row">
                    <div class="col-xs-6 text-left">受理数</div>
                    <div class="col-xs-6 text-right">@item.SLCnt</div>
                </div>
            </div>
        </a>
        <a href="#" class="list-group-item">
            <div class="container">
                <div class="row">
                    <div class="col-xs-6 text-left">派遣数</div>
                    <div class="col-xs-6 text-right">@item.PQCnt</div>
                </div>
            </div>
        </a>
    </div>

}

输出效果：