MVC基本開發介紹 (1)列表展示

前言：

現在如果用.net 的解決方案來做網站或者是網站的后台管理系統，MVC 應該是比較流行的。

自從進了新公司后，也一直在用mvc + webapi 來做項目，這里做個分享性的總結，有更好的方法歡迎分享，希望對初學者有幫助。

正文：

  這里先說個工具，Web Essential ,具體使用參考這里，真的是個神器一般的存在，一定會對你的開發提供極大的便利。推薦大家使用最新版本，新功能，新特性值得一試。順道提一下，如果你發現這個這個東西無法調用了，看看頁面是不是少了body元素。

  項目是基本的mvc asp.net 4.5模板，不進行身份驗證（這東西寫起來感覺就多了。。）

確定之后項目應該是如下：

一個HomeController，有jquery， bootstrap（js+css）。

這里順便提一下Scripts 里面的_references.js 文件，他是給vs的智能提示用的，項目中引用的js文件默認都會被自動添加到該文件中，如果你發現vs的js提示不管用了，看看1：是不是引用的js不存在於這個文件中，2：是不是按順序添加，比如bootstrap要引用jquery，所以jquery就應該在bootstrap前面，像下面這樣。

 

一個一個來介紹，首先是最常見的列表頁面。一般來說有兩種做法

1. 頁面提交ajax請求，向服務端獲取json格式的數據，然后用js來給面的元素賦值，可以參考這里.

2. 用mvc的視圖模板引擎直接生成視圖頁面。下面來簡單說明一下：

現在公司項目中ORM沒有用微軟推薦的EF，外加介紹起來東西也比較多，這里就直接模擬一下數據庫了。

新建一個靜態DB類，給添加一個模擬數據，然后CRUD都對這些數據進行操作。代碼如下：

    public static class DB
    {
        public static List<Person> Persons = new List<Person>()
        {
            new Person() { ID = 1,Name = "aaa",Birth = new DateTime(1991,1,1),IsAdmin  = true ,Gender = 1 },
            new Person() { ID = 1,Name = "bbb",Birth = new DateTime(1992,1,1),IsAdmin  = false  ,Gender = 2 },
            new Person() { ID = 1,Name = "ccc",Birth = new DateTime(1993,1,1),IsAdmin  = false ,Gender = 0 },
            new Person() { ID = 1,Name = "ddd",Birth = new DateTime(1994,1,1),IsAdmin  = false ,Gender = 2 },

        };
    }
    public class Person
    {
        public int ID { get; set; }
        public bool IsAdmin { get; set; }
        public String Name { get; set; }
        public short Gender { get; set; }
        public DateTime Birth { get; set; }
        public int Age
        {
            get
            {
                return DateTime.Now.Year - Birth.Year;
            }
        }

    }

 

我們把Index頁面作為列表頁，用Strong Type的model. Controller 里面就應該是這樣：

        public ActionResult Index(string name = "")
        {
            var ps = DB.Persons.Where(w => w.Name.IndexOf(name) != -1);
            return View(ps);
        }

name是我們的查詢參數。

View這樣：

@using BasicMVCCRUDExample.Models
@model IEnumerable<Person>
<div style="margin-top:30px;">
    <table class="table table-bordered text-center">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年齡</th>
                <th>出生日期</th>
                <th>性別</th>
                <th>是管理員</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var p in Model) {
                <tr>
                    <td>@p.ID</td>
                    <td>@p.Name</td>
                    <td>@p.Age</td>
                    <td>@p.Birth.ToShortDateString()</td>
                    <td>
                        @(p.Gender == 1 ? "男" : p.Gender == 2 ? "女" : "未知")
                    </td>
                    <td>
                        @Html.CheckBox("IsAdmin", p.IsAdmin)
                    </td>
                    <td>
                        <a>編輯</a>
                        <a>刪除</a>
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>

除了基本的數據展示，通常還會增加一列操作列，用於編輯和修改。

第一行我們using了BasicMVCCRUDExample.Models這個命名空間，如果說這個namespace在這個controller對應的view里面用到的頻率比較高，我們可以把他放到web.config里面，然后重開一下vs，就不需要在每個view里面引用一遍了。如下：

運行訪問頁面，效果如下。

 

然后我們給他加上搜索查詢過濾的功能：

controller里面已經加好了參數，下面是頁面中。一般來說，我們把查詢條件放到form表單里面提交，當然也可以自己用jquery ajax來模擬提交（有些情況下需要用到），這里先介紹一下form表單的。

把原先的頁面改成如下：

@using BasicMVCCRUDExample.Models
@model IEnumerable<Person>
<div style="margin-top:30px;">
    @using (Html.BeginForm("Index", "Home", FormMethod.Get)) {
        <div class="row">
            <div class="col-md-3">
                <input type="text" name="name" class="form-control" />
            </div>
            <div class="col-md-1">
                <button class="btn btn-primary" type="submit">搜索</button>
            </div>
        </div>
    }
 <table>.....</table>
</div>

我們在table上面加了一個using塊，用來渲染一個form標簽。這里有兩點要注意，

1：搜索框的name屬性一定要和查詢參數名一樣，controller里面Index ActionResult接收一個name參數，input的name屬性值就必須是name，否則controller無法接收到。

2. button標簽，如果不給type屬性，默認是submit，點一下按鈕就會提交form，造成頁面的刷新。所以這里標識一下。

 

完成之后效果如下：

可以看一下地址欄，點搜索之后會給地址加上name參數。如果在搜索框里面寫了條件，能實現對應的過濾。

輸入aaa，點搜索：

看地址欄變化，調試也可發現name 為aaa

一般來說，我們會希望這個搜索框的內容在搜索完之后還在里面，這樣我們就需要aaa傳給后台之后再傳回來，最簡單的做法就是放到ViewBag里面，然后回傳到頁面，再給頁面的input value屬性賦值。但這樣做有個缺點，如果查詢的條件比較多，Index方法參數就會比較多，ViewBag的就會多次賦值。所以，介紹另一個方法，用SearchModel的方式來實現。

首先定義一個查詢類：

public class PersonSearchModel
    {
        //只有一個查詢條件，所以只要一個屬性
        public String Name { get; set; }
    }

然后修改一下Index方法:

public ActionResult Index(PersonSearchModel m)
        {
            m.Name += "";
            IEnumerable<Person> ps = DB.Persons.Where(p => p.Name.IndexOf(m.Name) != -1);
            ViewBag.PersonSearchModel = m;
            return View(ps);
        }

Index 接收一個m，m不會為null，即使頁面沒有傳參數。因為這里我們把name作為IndexOf方法的參數，所以name不能為null，所以我們給他加上一個空字符串.

然后把這個m賦值給ViewBag。

頁面如下：

@using BasicMVCCRUDExample.Models
@model IEnumerable<Person>
@{
    var searchM = (PersonSearchModel)ViewBag.PersonSearchModel;
}
<div style="margin-top:30px;">
    @using (Html.BeginForm("Index", "Home", FormMethod.Get)) {
        <div class="row">
            <div class="col-md-3">
                <input type="text" name="name" class="form-control" value="@searchM.Name" />
            </div>
            <div class="col-md-1">
                <button class="btn btn-primary" type="submit">搜索</button>
            </div>
        </div>
    }
    <table class="table table-bordered text-center">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年齡</th>
                <th>出生日期</th>
                <th>性別</th>
                <th>是管理員</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var p in Model) {
                <tr>
                    <td>@p.ID</td>
                    <td>@p.Name</td>
                    <td>@p.Age</td>
                    <td>@p.Birth.ToShortDateString()</td>
                    <td>
                        @(p.Gender == 1 ? "男" : p.Gender == 2 ? "女" : "未知")
                    </td>
                    <td>
                        @Html.CheckBox("IsAdmin", p.IsAdmin)
                    </td>
                    <td>
                        <a>編輯</a>
                        <a>刪除</a>
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>

先獲取到這個searchM，由於ViewBag 的屬性是dynamic類型，所以強制轉換成我們的PersonSearchModel類型。然后用這個searchM給input的value屬性賦值。再搜索，輸入查詢條件之后內容就能保存下來了。

如果以后新加了查詢條件，只要給searchModel加參數，然后頁面賦值就可以了。

 

關於這個列表頁面，暫時也就想到這么些東西，想到再加把。

明天再寫修改的。