1. 程式人生 > 實用技巧 >在7天-第6天逐步學習MVC(模型檢視控制器)

在7天-第6天逐步學習MVC(模型檢視控制器)

MVC 2是安靜的老和本文是多年後寫的。我們建議您從我們開始閱讀新鮮學習MVC 5從這裡一步一步系列:http: / / www.codeproject.com/Articles/866143/Learn-MVC-step-by-step-in-days-Day 內容 所以,MVC 6天議程是什麼? 第一天:控制器、強型別的檢視和助手類 第二天:單元測試、路由和出站url 第三天:區域性檢視、資料註釋,剃鬚刀,身份驗證和授權 第四天:- JSON, Jquery、狀態管理和中控制器 第五天:捆綁、縮小檢視模型、異常處理和領域 實驗室22:顯示模式(MVCMobile) 介紹 步驟1:建立相應的頁面 步驟2:——就是這樣,solet的測試。 步驟3:——更多的定製和控制 步驟4:測試你的移動定製 實驗室23:- MVC OAuth提供者 第一步:註冊您的應用程式ID和關鍵 步驟2:建立一個MVC網站與OAuth身份驗證 第三步:開始瀏覽 實驗室24:- MVC模型繫結 介紹 步驟1:建立“EnterCustomer。aspx和控制器 步驟2:建立使用者模型 步驟3:建立繫結該對映。 步驟4:將對映器與行動 步驟5:享受你的輸出 實驗室25:剃鬚刀佈局 介紹 步驟1:建立頁面佈局 步驟2:建立檢視和佈局 步驟3:建立一個控制器和看到你的佈局 實驗室26:自定義Html輔助方法 介紹 步驟1:建立一個MVC專案與簡單的類檔案 步驟2:類標記為靜態和新增方法 步驟3:使用助手類。 什麼是Lastday嗎? 你是全新的MVC嗎? 不要錯過MVC的面試問題的答案嗎 所以,MVC 6天議程是什麼? 6天我們有五大實驗室:- 手機支援使用“這個”功能。整合應用程式使用Facebook、twitter或其他任何第三方網站通過使用OAuth”。使用模型繫結繫結使用者介面和你的模型類,如果屬性名稱是不同的。剃鬚刀的佈局。建立您自己的自定義檢視引擎。 如果你錯過了Asp.net MVC教程的前幾天,下面是討論什麼主題的連結。 第一天:控制器、強型別的檢視和助手類 http://www.codeproject.com/Articles/207797/Learn-MVC-Model-view-controller-Step-by-Step-in-7 第二天:單元測試、路由和出站url http://www.codeproject.com/Articles/259560/Learn-MVC-Model-view-controller-Step-by-Step-in-7 第三天:區域性檢視、資料註釋,剃鬚刀,身份驗證和授權 http://www.codeproject.com/Articles/375182/Learn-MVC-Model-View-Controller-Step-by-Step-in-7 第四天:- JSON, Jquery、狀態管理和中控制器 http://www.codeproject.com/Articles/375182/Learn-MVC-Model-View-Controller-Step-by-Step-in-7 第五天:捆綁、縮小檢視模型、異常處理和領域 http://www.codeproject.com/Articles/724559/Learn-MVC-Model-view-controller-Step-by-Step-in-7 實驗室22:顯示模式(MVCMobile) 介紹 這是一個小型裝置如移動的世界。作為一個MVC developerand我們期望很多的支援 微軟MVC相同的模板。現在桌面螢幕和手機螢幕大小有巨大的變化。 所以我們想建立不同的螢幕為桌面和不同螢幕的移動。例如我們將建立“回家。aspx”正常的桌面和“Home.mobile。aspx”移動。如果MVC可以自動檢測裝置型別和呈現適當的頁面,將節省大量的工作。這是自動使用MVC顯示模式”。 當任何HTTP請求到一個web應用程式這個HTTP請求的值稱為“使用者代理”。這種“使用者代理”價值使用MVC顯示模式和適當的檢視選擇和呈現為每個裝置。讓我們來做一個演示,看到它住在血和肉。 步驟1:建立相應的頁面 讓我們建立一個示例MVC專案兩個檢視”指數。桌面aspx”和“Index.Mobile。aspx”移動,如以下圖所示。 也讓我們新增一個控制器稱為“家”控制器將呼叫“指數”的觀點。 注意:你可以看到以下程式碼片段我們已經建立了一個行動結果指數。因為我們的檢視名稱和操作名稱一樣,我們不需要傳遞的檢視名稱返回檢視();。 隱藏,複製Code

publicclassHomeController : Controller
{
publicActionResult Index()
        {
return View();
        }
}

步驟2:——就是這樣,solet的測試。 這就是我們要做的。現在讓我們去測試如果MVC顯示模式實現了自己的承諾。 所以現在如果你去點選瀏覽器的控制器和動作你會看到下面的左手邊的輸出。如果你遇到相同的控制器和動作使用android手機模擬器,您將看到螢幕的右邊部分。 在這個實驗室模擬移動測試我們使用Opera移動模擬器。您可以從http://dev.opera.com/articles/opera-mobile-emulator/下載模擬器 步驟3:——更多的定製和控制 但如果我們佤邦nt更多的定製和控制:- 如果桌面顯示“Index.aspx”。如果手機顯示“Index.mobile.aspx”。如果Android手機顯示“index . andria .aspx”。 我們已經實現了前兩個條件。現在對於第三個條件,我們需要執行更多的額外步驟。放鬆,他們絕對是小的和嬰兒步伐,但有偉大的結果。 第一步是新增一個頁面“Index.android”。aspx "特別是android在你的檢視資料夾,如下圖所示。 下一步是對你的“Global.asax”做一些改變。cs”檔案。第一步是新增“Webpages”名稱空間,如下圖所示。 下一步是對你的“Global.asax”做一些改變。cs”檔案。第一步是新增“Webpages”名稱空間,如下圖所示。 隱藏,複製Code

using System.Web.WebPages;

第二步是使用“DisplayModeProvider”類並在“Modes”集合中新增一個“Android”條目,如下面的程式碼片段所示。下面的程式碼搜尋字串“Android”,如果找到它就呈現“Index.Android”。aspx頁面”。 隱藏,複製Code

protectedvoid Application_Start()
{
DisplayModeProvider.Instance.Modes.
                Insert(0, newDefaultDisplayMode("Android")
            {
                ContextCondition = (context => context.
                    GetOverriddenUserAgent().IndexOf("Android", 
StringComparison.OrdinalIgnoreCase) >= 0)
            });
}

步驟4:測試你的移動定製 現在,如果您以Android為使用者代理執行opera移動模擬器,如下圖所示,您將看到Android頁面(Index.android)。aspx)被渲染。 實驗室23:- MVC OAuth提供者 對終端使用者來說,最無聊的過程之一就是註冊站點。有時那些冗長的表單和電子郵件驗證只是把使用者嚇跑了。那麼,通過驗證使用者使用現有的facebook / twitter / linkedin /等賬戶來讓事情變得簡單怎麼樣?因此,使用者使用他已經擁有的東西,同時網站確保該使用者是正確的使用者。 這是通過使用MVC OAuth(授權的開放標準)實現的。 實現OAuth有三個步驟,見上圖:- 註冊你的應用並獲得ID和金鑰。使用第三方站點進行身份驗證。身份驗證完成後,瀏覽您的站點。 第1步:-註冊你的應用程式,獲得ID和金鑰 所以第一步是在第三方網站上註冊你的應用。對於這個實驗室,我們將使用facebook進行開放身份驗證。請注意,twitter、linked in和其他網站的步驟會有所不同。開啟developers.facebook.com,點選“建立新應用”選單,如下圖所示。 輸入“app名稱”、“類別”,點選“建立app”按鈕,如下圖所示。 app註冊完成後,點選顯示按鈕即可獲得“app ID”和“app祕鑰”,如下圖所示。 步驟2:建立一個MVC站點,用於使用OAuth進行身份驗證 現在我們有了ID和鍵,讓我們繼續建立一個MVC Internet應用程式。我們正在建立一個網際網路應用程式,以便我們得到一些現成的或你可以說“OAuth”模板程式碼。 一旦專案被建立,開啟“authorconfig”。從“App_start”資料夾下載。 在這個配置檔案中,你會發現“RegisterAuth”方法,你會看到很多第三方站點的方法呼叫。取消“RegisterFacebookClient”方法的註釋,並放入ID和鍵,如下面的程式碼所示。 隱藏,複製Code

publicstaticclassAuthConfig
{
publicstaticvoidRegisterAuth()
        {
// To let users of this site log in using their accounts from other sites such as Microsoft, Facebook, and Twitter,
// you must update this site. For more information visit http://go.microsoft.com/fwlink/?LinkID=252166

//OAuthWebSecurity.RegisterMicrosoftClient(
//    clientId: "",
//    clientSecret: "");

//OAuthWebSecurity.RegisterTwitterClient(
//    consumerKey: "",
//    consumerSecret: "");

OAuthWebSecurity.RegisterFacebookClient(
                appId: "753839804675146",
                appSecret: "fl776854469e7af9a959359a894a7f1");

//OAuthWebSecurity.RegisterGoogleClient();
        }
}

執行您的應用程式並複製localhost URL名稱和埠號。 回到你的開發者FB門戶,開啟你剛剛建立的應用程式,點選設定,點選“新增平臺”,如下圖所示。 開啟另一個對話方塊,選擇網站,點選新增。 在URL中,給出本地主機URL和埠號,如下圖所示。 第三步:開始瀏覽 以上就是全部設定,現在執行應用程式並單擊log in。 螢幕打開了兩個選項,一個在左手邊是你的本地登入使用“表單”認證和右手邊是你的第三方提供。點選facebookbutton,放入您的證書並享受輸出。 實驗室24:- MVC模型繫結 介紹 在學習MVC Day 1實驗5中,我們使用HTML幫助器類來對映HTML UI和MVC模型物件。下面是一個簡單的HTML表單,它執行了一個post到“SubmitCustomer”的操作。 隱藏,複製Code

<formid="frm1"method=post action="/Customer/SubmitCustomer">
            Customer code :- <inputname="CustomerCode"type="text"/>
            Customer name :- <inputname="CustomerName"type="text"/>
    <inputtype=submit/>
</form>

“SubmitCustomer”操作接受一個customer物件。這個“Customer”物件與在這些文字框中填充的資料一起自動生成,而不需要任何繫結和對映。 隱藏,複製Code

publicclassCustomerController : Controller
{
publicActionResult SubmitCustomer(Customer obj)
{return View("DisplayCustomer");}
}

您知道為什麼customer物件會自動填充嗎?這是因為customer類的文字框名稱和屬性名稱是相同的。 隱藏,複製Code

publicclassCustomer
{
publicstring CustomerCode { get; set; }
publicstring CustomerName { get; set; }
}

但是,如果文字框名稱與“Customer”類屬性名稱不相同呢? 換句話說,HTML文字框名稱為“txtCustomerCode”,類屬性名稱為“CustomerCode”。這就是模型粘結劑的作用。 模型繫結器將HTML表單元素對映到模型。它充當HTML UI和MVC模型之間的橋樑。讓我們為ModelBinder做一些手部練習。 步驟1:-建立“EnterCustomer”。aspx”和控制器 第一步是建立“EnterCustomer”。aspx檢視,將採取“客戶”資料。 隱藏,複製Code

<formid="frm1"method=post action="/Customer/SubmitCustomer">
            Customer code :- <inputname="TxtCode"type="text"/>
            Customer name :- <inputname="TxtName"type="text"/>
    <inputtype=submit/>
</form>

要呼叫這個表單,我們需要在“Customer”控制器中執行一個操作,因為你不能在MVC中直接呼叫檢視,你需要通過控制器。 隱藏,複製Code

publicclassCustomerController : Controller
{
publicActionResult EnterCustomer()
        {
return View();
        }
}

步驟2:-建立客戶模型 下一步是建立一個“Customer”模型。請注意“Customer”類的屬性名稱和HTML UI元素文字框名稱是不同的。 隱藏,複製Code

publicclassCustomer
{
publicstring CustomerCode { get; set; }
publicstring CustomerName { get; set; }
}

步驟3:-建立執行對映的binder。 現在,因為UI元素名稱和“Customer”類有不同的名稱,我們需要建立“Model”繫結器。為了建立模型繫結類,我們需要實現“IModelBinder”介面。在下面的程式碼中,您可以看到我們是如何在“BindModel”方法中編寫對映程式碼的。 隱藏,複製Code

publicclassCustomerBinder : IModelBinder
{
publicobject BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
        {
HttpRequestBase request = controllerContext.HttpContext.Request;

string strCustomerCode = request.Form["TxtCode"];
string strCustomerName = request.Form["TxtName"];

returnnewCustomer
            {
                CustomerCode = strCustomerCode,
                CustomerName = strCustomerName
            };
        }
    }

步驟4:將對映器與行動 現在我們有了活頁夾,HTML UI現在是時候連線它們了。檢視下面的“SubmitCustomer”操作程式碼。屬性繫結繫結繫結器和“Customer”物件。 隱藏,複製Code

publicclassCustomerController : Controller
{
publicActionResult SubmitCustomer([ModelBinder(typeof(CustomerBinder))]Customer obj) 
{

return View("DisplayCustomer");
}
}

步驟5:享受你的輸出 現在點選呼叫客戶資料輸入螢幕的操作(“EnterCustomer”)。 當您填充資料並點選submit時,您將看到下面填充的“Customer”物件。 實驗室25:剃鬚刀佈局 介紹 佈局就像ASP中的母版頁面。淨Web表單。母版頁面為Web表單檢視(ASPX)提供標準外觀,而佈局為razor檢視(CSHTML)提供標準外觀。如果你是剃鬚刀的新使用者,請檢視lab12 MVC剃鬚刀檢視。 在這個實驗室中,我們將看到如何實現剃鬚刀佈局。 步驟1:建立頁面佈局 首先,我們需要建立一個佈局頁面。因此,建立一個新的MVC web應用程式,轉到views資料夾,右鍵單擊,新增新專案,並選擇MVC佈局頁面模板,如下圖所示。 在MVC佈局頁面中,我們需要定義將應用於所有razor頁面的通用結構。你可以看到在下面的佈局頁面,我們有三個部分的標題,正文和頁尾。頁首和頁尾是自定義的部分,而“渲染體”的東西,來自MVC和顯示體內容。 隱藏,複製Code

<div>
@RenderSection("Header")
@RenderBody()
@RenderSection("Footer")
</div> 

步驟2:-建立檢視和應用佈局 現在,一旦我們建立了佈局,接下來要做的就是將該佈局應用到檢視。右鍵單擊檢視的共享資料夾並選擇razor view。 如需應用版式頁面,請選擇“…”瀏覽選項,如上圖所示,並選擇版式頁面如下圖所示。 建立檢視後,第一行程式碼指出頁面使用的佈局。它看起來如下面的程式碼所示。 隱藏,複製Code

@{Layout = "~/Views/Default1/_LayoutPage1.cshtml";}

檢視中的最後一件事是填充所有section。頁尾和頁首部分是自定義部分,所以我們需要使用@section命令,後面跟著部分名稱和我們想要在這些部分中放入的內容。所有其他文字都是正文的一部分(@RenderBody())。 隱藏,複製Code

This is body
@section  Footer{Copyright 2015-2016}
@section Header{Welcome to my site}

簡單地說,佈局和razor檢視程式碼之間的對映如下所示。 第3步:-建立一個控制器,看看你的佈局在行動 現在我們已經設定了建立控制器和呼叫檢視的動作的時間。您應該會看到如下所示的內容。您可以看到佈局模板是如何應用於檢視的。 實驗室26:自定義Html輔助方法 介紹 在第一天,我們已經討論了MVC助手類。它幫助我們以更有效的方式使用輸入控制元件。當你輸入' @Html。在MVC razor檢視中,你會在智慧感知中得到類似這樣的東西。 Html助手方法讓我們輕鬆快捷地建立Html輸入控制元件,如文字框,單選按鈕,複選框,文字區域。在這個實驗室中,我們將進一步建立“自定義”助手方法。 要建立一個定製的HTML助手方法,我們需要使用擴充套件方法。在。net 3.5中引入了擴充套件方法的概念。 如果你是一個新擴充套件方法觀看以下youtube視訊www.questpond.com http://www.youtube.com/watch?v=Iu7OrL6vCOw 步驟1:建立一個MVC專案與簡單的類檔案 建立一個簡單的MVC專案CustomHtmlHelperDemo。新增一個名為HelperSample的控制器和一個名為Index的操作。在MVC專案中建立一個新的資料夾並將其命名為ExtensionClasses。 步驟2:類標記為靜態和新增方法 對於擴充套件方法,我們需要將類標記為靜態。 隱藏,複製Code

public static class HelperExtension
{
}

在這個類中,讓我們建立一個名為“HelloWorldLabel”的新靜態方法,它將返回型別為MvcHtmlStringand接受型別為HtmlHelper的引數。 注意:請確保在宣告第一個引數之前新增" this "關鍵字,因為我們的目標是為HtmlHelper類建立一個擴充套件方法。 隱藏,複製Code

publicstaticMvcHtmlStringHelloWorldLabel(this HtmlHelper helper)
{

}

步驟3:使用助手類。 最後一步是匯入“System.Web.Mvc”。Html”名稱空間。我們需要匯入此名稱空間,因為預設的TextBoxFor、TextAreaFor和其他html helper擴充套件方法在此名稱空間中可用。只有當我們要使用其中一種擴充套件方法時,它才是必需的。 隱藏,複製Code

returnhelper.Label("Hello World");

只需在檢視中編寫以下程式碼並說build,您可能會得到如下所示的錯誤。 要解決上述錯誤,只需將using語句放在檢視的頂部,如下所示 隱藏,複製Code

@using CustomHtmlHelperDemo.ExtensionClasses

構建應用程式,按F5並測試應用程式。 什麼是Lastday嗎? 我的最後一天將主要是關於如何整合Javascript框架的(Angular, KO)和MVC。 最後,你可以觀看我關於WCF、Silver light、LINQ、WPF、設計模式、實體框架等不同章節的c#和MVC培訓視訊。請不要錯過我的。net和c#面試問題和答案手冊。 你對MVC是全新的嗎? 如果你是一個全新的人,我建議從以下4個視訊開始,大約10分鐘,這樣你就可以快速進入MVC。 實驗1:-一個簡單的Hello world ASP。淨MVC應用程式。 實驗2:在這個實驗中,我們將看到如何使用檢視資料在控制器和檢視之間共享資料。 實驗3:在這個實驗中,我們將建立一個簡單的客戶模型,用一些資料進行處理,並在檢視中顯示相同的資料。 實驗4:在這個實驗中,我們將建立一個簡單的客戶資料輸入螢幕,並在檢視上進行一些驗證。 從MVC 5開始 如果你想開始與MVC 5開始與下面的視訊學習MVC 5在2天。 不要錯過MVC的面試問題的答案嗎 在這個7天系列中,我每推進一個實驗室,我也更新了一篇單獨的文章,討論重要的MVC面試問題,這些問題在面試中被問到。到目前為止,我已經收集了60個有精確答案的重要問題,您可以從http://www.codeproject.com/articles/556995/model-view-controller-mvc-interview-question- and檢視相同的問題 本文轉載於:http://www.diyabc.com/frontweb/news1895.html