7天搞定ASP.NETMVC-第2天-創(chuàng)新互聯(lián)

介紹

我們提供的服務(wù)有：成都網(wǎng)站制作、網(wǎng)站設(shè)計、外貿(mào)網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、華寧ssl等。為成百上千企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的華寧網(wǎng)站制作公司

在看這邊文章時，我們相信你已經(jīng)成功的完成了第一天的內(nèi)容。

第一天主要集中在：

選擇MVC的理由？
ASP.NET Webform 與 ASP.NET MVC的區(qū)別
了解Controller和View

注：

如果你還沒有完成前一天的內(nèi)容，請先去看完再過來。我們的目標(biāo)是在一天結(jié)束用最好的練習(xí)和現(xiàn)代的方法創(chuàng)建一個小的MVC項目。每次新的試驗都會添加新的方法到前一個實驗中或者讓前一個試驗更加好。

第二天日程

從控制器傳遞到視圖
實驗3 - 使用ViewData
討論實驗3
實驗4 - 使用ViewBag
討論實驗4
用ViewData和ViewBag的問題
實驗5 - 了解強類型View
討論實驗5
了解View Model在ASP.NET MVC中的用法
ViewModel解決方案
實驗6 - 實現(xiàn)View Model
討論實驗6
實驗7 - View中的集合
討論實驗7
結(jié)論

從控制器傳遞到視圖

在實驗2中創(chuàng)建的view非常的靜態(tài)，在現(xiàn)實場景中它會現(xiàn)實某些動態(tài)數(shù)據(jù)。在下個實驗中我們會在View中展示一些動態(tài)數(shù)據(jù)。

View會從Controller中的模型中獲取數(shù)據(jù)。

模型

在ASP.NET MVC中模型表示業(yè)務(wù)數(shù)據(jù)。

實驗3 - 使用ViewData

ViewData是一個字典，它將會包含在controller和view之間傳遞被傳遞的數(shù)據(jù)。Controller將會添加元素到字典中，view會從中讀取出來。讓我們來做個demo。

步驟 1 - 創(chuàng)建Model類

在Model文件夾中創(chuàng)建一個叫Employee的新類：

    public class Employee
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public int Salary { get; set; }
    }

步驟 2 - 在Controller中獲取Model

在下面GetView方法中新建Employee 對象:

            Employee emp = new Employee();
            emp.FirstName = "Sukesh";
            emp.LastName = "Marla";
            emp.Salary = 20000;

注：要確保把using語句放在最上邊或者放在Employee類完整的限定名前.

using WebApplication1.Models;

步驟 3 - 創(chuàng)建ViewData 并返回View

把Employee對象存儲在下面的ViewData中:

            ViewData["Employee"] = emp;
            return View("MyView");

步驟 4 - 在View中展示 Employee 數(shù)據(jù)

打開MyView.cshtml.

像下面這樣從 ViewData中獲取Employee 數(shù)據(jù)并展示：

    <div>
        @{
            WebApplication1.Models.Employee emp = (WebApplication1.Models.Employee)ViewData["Employee"];
        }
        <b>Employee Details </b><br />
        Employee Name : @emp.FirstName@emp.LastName <br />
        Employee Salary: @emp.Salary.ToString("C")
    </div>

步驟 5 - 測試查看輸出

7天搞定 ASP.NET MVC - 第2天

實驗 3 的討論

在寫Razor code時，有括?。ㄕf的是"{"和"}"）和沒有括弧的區(qū)別？

在最新的實驗中@emp.FirstName 可以用下面的code片斷(snippet)替換。

@{	Response.Write(emp.FirstName);
}

沒有括弧的可以簡單的來現(xiàn)實變量或表達(dá)式的值.

為什么必須轉(zhuǎn)換？

把對象保存在ViewData內(nèi)，每次往里添加新的值，它都會裝箱到對象的類型，所以在我們從中取值的時侯做拆箱是必須的.

"@emp.FirstName @emp.LastName"是什么意思？

意思是在顯示FirstName后加一個空格，然后是LastName

我們可以只寫一個單獨的@關(guān)鍵字嗎？

答案是肯定的，然后語法就成了：@(emp.FirstName + " "+emp.LastName)

為什么在Controller中硬編碼Employee類？

只是用于做演示的目的。在現(xiàn)實中我們很可能會從數(shù)據(jù)庫，wcf，web或者其它地方獲取。

Database 邏輯/數(shù)據(jù)訪問層和業(yè)務(wù)層是如何的呢？

在ASP.NET MVC中數(shù)據(jù)訪問層是不言而喻的。塔一直都在但從沒有包含在MVC的定義中。
像之前解釋的一樣，業(yè)務(wù)層屬於Model的一部分.

完整的MVC結(jié)構(gòu)

7天搞定 ASP.NET MVC - 第2天

實驗 4 - 使用ViewBag

ViewBag是可視數(shù)據(jù)只是一個語法糖。ViewBag采用C# 4.0 動態(tài)特性并使ViewData保持動態(tài)。

步驟 1 - 創(chuàng)建 View bag

繼續(xù)使用實驗3 中并用下面code片斷替換步驟3。

            ViewBag.Employee = emp;
            return View("MyView");

步驟 2 - 在view中顯示 EmployeeData

用下面的code片段替換步驟4中的code

    <div>
        @{
            WebApplication1.Models.Employee emp = (WebApplication1.Models.Employee)ViewBag.Employee;
        }http://lybing.blog.51cto.com/user_index.php?action=addblog&job=modify&tid=1746540
Employee Details
        Employee Name: @emp.FirstName @emp.LastName
        Employee Salary: @emp.Salary.ToString("C")
    </div>

步驟 3 - 測試輸出：

7天搞定 ASP.NET MVC - 第2天

實驗 4

我們可以用ViewBag傳遞和獲取ViewData？

是的，我們可以，反之也可以。像我之前講的，ViewBag是個為了動態(tài)顯示數(shù)據(jù)的語法糖。

用ViewData和ViewBag的問題所在?

在Controller和View之間傳遞值用ViewData和ViewBag是一個很好的選擇。但在真實的項目中不常這么做。我們來討論下有什么問題.

性能問題

在ViewData內(nèi)，value是object對象。在使用之前必須要轉(zhuǎn)換到正確類型，這增加了額外的性能開銷。

沒有類型安全，沒有編譯時錯誤

如果我們在獲取value時轉(zhuǎn)換了錯誤的類型或用了錯誤的key，我們會得到一個運行時錯誤。一個好的編程實踐，錯誤應(yīng)該在編譯時被很好的處理。

在數(shù)據(jù)發(fā)送和數(shù)據(jù)接收間沒有合適的連接

做為一個Developer，我個人認(rèn)為這個是個重要的問題。

在MVC，Controller 和View中是比較松散的聯(lián)系。Controller完全不知道在View中發(fā)生了什么，并且view也不知道Controller中發(fā)生了什么。

我們可以在Controller中傳遞一個或多ViewData/ViewBag值?，F(xiàn)在開發(fā)者在寫View時，他/她必須要記住從controller中來的是什么。如果一個Controller和view開發(fā)者不同，那么就更加困難了。完全不可預(yù)知，會導(dǎo)致很多運行時問題和低效率的開發(fā)。

實驗 5 - 理解強類型View

ViewData和ViewBag的這三個問題的原因是強類型。ViewData內(nèi)部values的值的數(shù)據(jù)類型是Object。

如果我們可以以某種方式設(shè)置Controller和View之間需要被傳遞的數(shù)據(jù)的數(shù)據(jù)類型，那么問題就被解決了，這是強類型的強項。

讓我們來做個demo，這次我們將會對View有更深層次的需求。如果薪水大于15000那么就被現(xiàn)實成***?；蛘呔G色。

步驟 1 - 把view修改成強類型的View

添加下面語句在view的頂部

@model WebApplication1.Models.Employee

上面的語句把我們的View變成了Employee類型

步驟 2 - 顯示數(shù)據(jù)

現(xiàn)在在View內(nèi)，簡單輸入@Model和dot()，然后就會得到智能提示數(shù)據(jù)Model(Employee)類的屬性。

7天搞定 ASP.NET MVC - 第2天

寫下下面的copy來展示數(shù)據(jù)

        Employee Details
        Employee Name: @Model.FirstName @Model.LastName

        @if (Model.Salary > 15000)
        {
            <span >
                Employee Salary: @Model.Salary.ToString("C");
            </span>
        }
        else
        {
            <span >
                Employee Sarlary: @Model.Salary.ToString("C")
            </span>
        }

步驟 3 - 從Controller的Action方法中傳遞Model數(shù)據(jù)

修改action方法為下面的code：

            Employee emp = new Employee();
            emp.FirstName = "Sukesh";
            emp.LastName = "Marla";
            emp.Salary = 20000;
            return View("MyView", emp);

7天搞定 ASP.NET MVC - 第2天

實驗 5 的討論

每次在View中輸入完整的限定類名（Namespace.ClassName)是必須的？

不是，我們可以用下面的語句：

@using WebApplication1.Models
@model Employee

View必須一直是強類型嗎？或者我們可以有時可以用ViewData煌ViewBag嗎？

做為最好的實踐，應(yīng)該總是讓view保持強類型。

強類型View中可以有多個Model對象嗎？

不能，在真實項目中我們常常需要在一個view中的地方去展示多個model數(shù)據(jù)，我們會在下個實驗中實現(xiàn)這樣的需求.

理解ASP.NET MVC中的View Model

在實驗5 中我們違反了MVC的原則。對于MVC來說，V是View，應(yīng)該是純粹的UI。它不應(yīng)該包含任何類型的logic。我們做的下面三件事，違反了純粹的MVC架構(gòu)原則。

附加 First name, Last name 和做為完整姓名展示 - Logic
顯示帶貨幣的薪水 - Logic
基于value用不同的顏色來顯示薪水。換句話說：基于一些值來改變HTML元素外表 - Logic

這三個問題之外的問題，會在值得討論的地方來討論。

有時我們想要在一個View中展示多個類似的數(shù)據(jù)。

例如 - 展示當(dāng)前登錄的員工信息

我們可以用下面這些方法來實現(xiàn)。

添加用戶名屬性到Employee 類 - 每次我們想要添加新數(shù)據(jù)在View中展示，添加新屬性到Employee類看似不合邏輯。這個新屬性可能于Employee相關(guān)也可能不相關(guān)。它同樣違反SOLID的SRP原則。
使用ViewBag或ViewData - 我們已經(jīng)討論了使用這個方案的問題

ViewModel是一個解決方案

在ASP.NET MVC應(yīng)用中，ViewModel是一個約定俗成的層。它用于View，Model和act之間，做為View的數(shù)據(jù)容器

Model和ViewModel的不同？

Model是一個指定數(shù)據(jù)的業(yè)務(wù)對象，是基于業(yè)務(wù)和數(shù)據(jù)結(jié)構(gòu)來創(chuàng)建的。ViewModel是一個指定數(shù)據(jù)的View，是基于View來創(chuàng)建的。

它到底是怎么工作的？

很簡單。

Controller處理交互作用的Logic或者簡單的工作，處理用戶的請求。
Controller獲取一個或多個model數(shù)據(jù)。
Controller會決定哪個view做為請求最合適的響應(yīng)
Controller會基于view的需求來獲取數(shù)據(jù)Model，然后創(chuàng)建和初始化ViewModel對象
Controller會通過ViewData/ViewBag/Stongly 類型的View來傳遞ViewModel數(shù)據(jù)到View
Controller會返回一個View

View和ViewModel是怎么聯(lián)系的？

View將會被封裝成一個強類型View：ViewModel

Model和ViewModel是怎么聯(lián)系的？

Model和ViewModel應(yīng)該是相互獨立對的。Controller將會基于一個或多個Model對象創(chuàng)建和實例化ViewModel對象

讓我們做個小實驗來更好的理解。

實驗 6 - 執(zhí)行ViewModel

步驟 1 - 創(chuàng)建文件夾

在項目中新建一個叫ViewModel的文件夾

步驟 2 - 新建Employee ViewModel

為了做這個，我們先列出對于這個view的需求：

姓和名應(yīng)該被添加在之前的顯示中。
總額應(yīng)該和貨幣一起顯示
薪水應(yīng)該顯示不同的顏色（基于value）
當(dāng)前用戶名同樣也需要顯示在view中

在ViewModels文件夾中新建一個叫EmployeeViewModel的類，像：

public class EmployeeViewModel
{
    public string EmployeeName { get; set; }    public string Salary { get; set; }
    public string SalaryColor { get; set; }
    public string UserName{get;set;}
}

請注意：在ViewModel中，F(xiàn)irstName和LastName的用一個叫EmployeeName的簡單屬性來替代。Salary屬性的數(shù)據(jù)類型是一個string并且新增了兩個新的屬性：SalaryColor、UserName

步驟 3 - 在view中使用View Model

在實驗 5 中我們創(chuàng)建了Employee類型的View，轉(zhuǎn)換為EmployeeViewModel

@using WebApplication1.ViewModels
@model EmployeeViewModel

步驟 4 - 在view中顯示數(shù)據(jù)

用下面的片段來替換view中的code：

public ActionResult GetView()
{
    Employee emp = new Employee();
    emp.FirstName = "Sukesh";
    emp.LastName = "Marla";
    emp.Salary = 20000;
    EmployeeViewModel vmEmp = new EmployeeViewModel();
    vmEmp.EmployeeName = emp.FirstName + " " + emp.LastName;
    vmEmp.Salary = emp.Salary.ToString("C");
    if (emp.Salary > 15000)
    {
        vmEmp.SalaryColor = "yellow";
    }
    else
    {
        vmEmp.SalaryColor = "green";
    }
    vmEmp.UserName = "Admin";
    return View("MyView", vmEmp);
}

步驟 5 - 測試輸出

7天搞定 ASP.NET MVC - 第2天

同樣的結(jié)果，但是這次的view中沒有包含任何的Logic

實驗 6 的討論

這意味著每個Model都要一個View Model嗎？

不是，每個View會有相應(yīng)的ViewModel。

這是用來練習(xí)Model和ViewModel關(guān)系的好例子嗎？

不是，做為Model和ViewModel的一個好練習(xí)，應(yīng)該是互相不獨立，不依賴的。

我們應(yīng)該總是來創(chuàng)建ViewModel？如果View沒有包含任何的展示Logic，又想要像這樣來展示Model的數(shù)據(jù)？

我們應(yīng)該總是創(chuàng)建ViewModel。每個View應(yīng)該有它自己的ViewModel，即便ViewModel中會像model一樣包含同樣的屬性。

我們來看下這種情況：View不包含任何展示Logic并且想要像上面一樣來展示Model數(shù)據(jù)。在這種情況下假定我們不創(chuàng)建ViewModel

會出現(xiàn)的問題：在未來的需求中，如果被要求在UI中添加顯示新的數(shù)據(jù) 或者需要放一些展示Logic，我們可能需要全新的UI來達(dá)到目的。

所以我們最好保存最開始的版本，并創(chuàng)建ViewModel。在這個例子中，在最初階段的ViewModel將會和Model很相似

實驗 7 - 使用集合的View

在這個實驗中，我們會在View中展示一個Employee的列表。

步驟 1 - 改變EmployeeViewModel類

從EmployeeViewModel中刪除UserName屬性。

public class EmployeeViewModel
{
    public string EmployeeName { get; set; }
    public string Salary { get; set; }
    public string SalaryColor { get; set; }
}

步驟 2 - 創(chuàng)建ViewModel集合

在ViewModel文件夾中新建一個EmployeeListViewModel的類：

public class EmployeeListViewModel
{
    public List<EmployeeViewModel> Employees { get; set; }
    public string UserName { get; set; }
}

步驟 3 - 改變?yōu)閺婎愋偷腣iew

把MyView.cshtml轉(zhuǎn)換成一個EmployeeListViewModel類型

<body>
    <div>
        Hello @Model.UserName
        <hr />
        <div>
            <table>
                <tr>
                    <th>Employee Name</th>
                    <th>Salary</th>
                </tr>
                @foreach (EmployeeViewModel item in Model.Employees)
                {
                    <tr>
                        <td>@item.EmployeeName</td>
                        <td >@item.Salary</td>
                    </tr>
                }
            </table>
        </div>
    </div>
</body>

步驟 5 - 為Employee新建Business層

在這個實驗中，會把我們的項目帶到下一層深度。添加Business層到項目中。在Model文件夾中新建一個EmployeeBusinessLyaer的類，并添加一個叫GetEmployees的方法

public class EmployeeBusinessLayer
{
     public List<Employee> GetEmployees()
     {
          List<Employee> employees = new List<Employee>();
          Employee emp = new Employee();
          emp.FirstName = "johnson";
          emp.LastName = " fernandes";
          emp.Salary = 14000;
          employees.Add(emp);
        
          Employee emp2 = new Employee();
          emp2.FirstName = "mikefn";
          emp2.LastName = "mike";
          emp2.Salary = 16000;
          employees.Add(emp2);
          return employees;
     }
}

步驟 6 - 通過Controller來傳遞數(shù)據(jù)

public ActionResult GetView()
{
        EmployeeListViewModel employeeListViewModel = new EmployeeListViewModel();
        EmployeeBusinessLayer empBal = new EmployeeBusinessLayer();
        List<Employee> employees = empBal.GetEmployees();
        List<EmployeeViewModel> empViewModels = new List<EmployeeViewModel>();
        foreach (Employee emp in employees)
        {
            EmployeeViewModel empViewModel = new EmployeeViewModel();
            empViewModel.EmployeeName = emp.FirstName + " " + emp.LastName;
            empViewModel.Salary = emp.Salary.ToString("C");
            if (emp.Salary > 15000)
            {
                empViewModel.SalaryColor = "yellow";
            }
            else
            {
                empViewModel.SalaryColor = "green";
            }
            empViewModels.Add(empViewModel);
        }
        employeeListViewModel.Employees = empViewModels;
        employeeListViewModel.UserName = "Admin";
        return View("MyView", employeeListViewModel);
}

步驟 7 - 輸出

7天搞定 ASP.NET MVC - 第2天

實驗 7 的討論

View可以是List類的強類型嗎？

當(dāng)然可以

為什么創(chuàng)建分開的EmployeeListViewModel類，而不是新建一個強類型的List<EmployeeListViewModel> ?

如果我們使用List直接替換EmployeeListViewModel，那么會有兩個問題。

管理將來展示的Logic
UserName屬性不是關(guān)聯(lián)單獨的Employees。而是關(guān)聯(lián)完整的View

為什么我們從EmployeeViewModel中刪除UserName屬性，讓它成為EmployeeListViewModel中的一部分呢？

所有的Employee將會有同樣的UserName屬性，把UserName放在EmployeeViewModel中只是增加冗余的code，也增中了整體數(shù)據(jù)的內(nèi)存存儲需要.

原文：http://www.codeproject.com/Articles/897559/Learn-MVC-in-days-Day

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

新聞名稱：7天搞定ASP.NETMVC-第2天-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://bm7419.com/article4/didpie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、用戶體驗、網(wǎng)站設(shè)計、網(wǎng)站營銷、域名注冊、電子商務(wù)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容