使用Bootstrap 基於MVC輸出移動化table 列表

標籤：tle   模型   tostring   string   bag   web   效果   color   com   

基於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>}

輸出效果：

 

使用Bootstrap 基於MVC輸出移動化table 列表