學習MVC專案在7天-第7天
介紹 快樂的一天。最後我們進入了“7天學習MVC專案”系列的最後階段。我相信你已經享受了所有的日子，並從中學到一些東西。 請不要忘記在文章的最後留下你的評論/建議/反饋。 議程 最後一天是什麼時間?實驗室32 -制定計劃 關於實驗室32的演講 實驗33 -建立單頁應用程式-第1部分-設定 領域是什麼?關於33實驗室的演講 實驗室35—建立單頁面應用程式—第3部分—建立員工 接下來是什麼?讓我們計劃 尋找解決方案的旅程 理解問題解決方案——常見的資料型別問題——那麼複雜資料呢?解決方案-一個常見的資料格式標準問題- XML格式問題解決方案- JSON 回到我們35實驗室的演講 實驗36 -建立單個頁面應用程式-第4部分-批量上傳結論從MVC 5開始 完整的系列 第1天第2天第3天第4天第5天第6天7天獎金第1天獎金第2天 我們很高興地宣佈，這篇文章現在可以從www.amazon.com和www.flipkart.com獲得同樣的紙質書 實驗室32 -制定計劃 這實際上不是一個與任何新功能相關的實驗室。這個實驗室只是為了讓專案更加結構化和系統化。 步驟1 -建立解決方案資料夾 右鍵單擊解決方案，選擇“新增>>新解決方案資料夾”。 將資料夾命名為“檢視和控制器”。 現在，重複上述步驟，建立另外三個類似的資料夾，分別叫做“Model”、“ViewModel”和“Data Access Layer” 步驟2 -建立資料訪問層專案 右擊資料訪問層資料夾並建立一個名為“DataAccessLayer”的新類庫專案。 步驟3 -建立業務層和業務實體專案 在模型資料夾中建立兩個新的類庫專案，分別稱為“BusinessLayer”和“BusinessEntities”。 步驟4 -建立ViewModel專案 在ViewModel資料夾中建立一個新的專案類庫專案，並將其命名為ViewModel。 步驟5 -新增引用 首先逐個右擊每個專案。選擇Add>>Reference，並選擇如下引用。 對於DataAccessLayer，選擇BusinessEntities 對於BusinessLayer，選擇DataAccessLayer和BusinessEntities 對於MVC網路應用，選擇BusinessLayer,BusinessEntities, ViewModel 對於businessentity System.ComponentModel.DataAnnotations 步驟6 -設定專案 將saleserpdale .cs從MVC專案中的DataAccessLayer資料夾複製到新建立的DataAccessLayer類庫專案中。 從MVC (WebApplication1)專案中刪除DataAccessLayer資料夾。 複製的員工。從MVC專案中的模型資料夾到新建立的BusinessEntities類庫專案。 將EmployeeBusinessLayer.cs從theMVC專案中的Model資料夾複製到新建立的BusinessLayer類庫專案中。 從MVC專案中刪除模型資料夾。 將MVC專案中的ViewModels資料夾中的所有類複製到新建立的ViewModel類庫專案中。 從MVC專案中刪除ViewModels資料夾 移動MVC專案(WebApplication1)到“檢視和控制器”解決方案資料夾。 步驟7 -建立專案 從選單欄中選擇Build>>Build Solution。 您將得到以下錯誤訊息。 步驟8 -解決錯誤 新增系統。ViewModel專案的Web引用 使用Nuget manager並在DataAccessLayer和BusinessLayer專案中安裝實體框架。(如果你對如何使用Nuget Manager感到困惑，我建議你看看第三天) 注意:業務層內部需要實體框架引用，因為業務層直接連線到資料訪問層。作為一個合適的體系結構，業務層不應該直接連線到資料訪問層。我們可以通過Repository模式來完成這一任務。儲存庫模式將完全超出本系列的討論範圍。 從MVC專案中刪除EntityFramework。 右擊MVC專案並選擇“管理Nuget包”選項。 選擇“管理Nuget軟體包”對話方塊左側的“已安裝軟體包”。 右邊部分將顯示之前安裝的所有包。選擇EntityFramework並單擊uninstall。 步驟9 -建立解決方案 您將得到以下錯誤。 步驟10 -解決錯誤 現在我們在MVC專案中既沒有SalesERPDAL引用，也沒有實體框架引用。新增這些引用不是一個好的做法。作為一個最佳實踐，控制器不應該直接連線到資料訪問層。 1. 在DataAccessLayer專案中使用名為SetDatabase的靜態方法建立一個名為DatabaseSettings的新類，如下所示。 隱藏,複製Code
using System.Data.Entity; using WebApplication1.DataAccessLayer; namespace DataAccessLayer { public class DatabaseSettings { public static void SetDatabase() { Database.SetInitializer(new DropCreateDatabaseIfModelChanges<SalesERPDAL>());<saleserpdal> } } } </saleserpdal>
2. 在BusinessLayer專案內部使用名為SetBusiness的靜態方法建立一個名為BusinessSettings的新類，如下所示。 隱藏,複製程式碼
using DataAccessLayer; namespace BusinessLayer { public class BusinessSettings { public static void SetBusiness() { DatabaseSettings.SetDatabase(); } } }
3.從全域性中刪除兩個錯誤的使用語句。asax和刪除資料庫。SetInitializer宣告。呼叫BusinessSettings。設定業務功能如下。 隱藏,複製Code
using BusinessLayer;
.
.
.
BundleConfig.RegisterBundles(BundleTable.Bundles);
BusinessSettings.SetBusiness();
構建應用程式。構建會成功。 確保執行應用程式一次,☻ 關於實驗室32的演講 什麼是解決方案資料夾? 解決方案資料夾只是邏輯資料夾。它們實際上不會在物理硬碟驅動器中建立。唯一的目的是使解決方案更加系統化。 實驗33 -建立單頁應用程式-第1部分-設定 現在，我們將不對現有的控制器和檢視進行任何更改。我們將為這個實驗室建立新的控制器和檢視。 保持現有選項不變，以便在後期比較早期版本和單頁版本，從而更好地瞭解它。 實現和理解Asp中的另一個概念。Net MVC稱為區域。 正如我所說的，在這個實驗室中，我們將從頭開始建立新的控制器、檢視和檢視模型。 只有遵循的東西才會被重複使用 現有的業務層 現有資料訪問層 現有的業務實體 身份驗證和異常過濾器 FooterViewModel Footer.cshtml 步驟1 -建立一個新的區域 右鍵單擊專案並選擇Add>>Area。將彈出一個對話方塊。將其設定為SPA並選擇ok。 它將在我們的專案中建立一個新的資料夾結構，如下所示。 顯然，與該區域相關的模型資料夾是不需要的。刪除它。 領域是什麼? 區域只是在Asp中實現模組的一種方法。淨MVC專案。 每個專案都由多個模組組成。例如:賬戶模組、客戶關係模組、支付閘道器模組等。 在傳統的應用程式開發風格中，我們通常使用“資料夾”來實現這一點。我們在單個專案中建立多個資料夾。每個資料夾代表一個模組。我們將各自模組的所有檔案儲存在各自的資料夾中。 現在，自定義資料夾將是一個大問題時，Asp。淨MVC。 比如說在Asp中。Net MVC我們將使用簡單的資料夾來實現模組。 現在DataAccessLayer, BusinessLayer, BusinessEntities和viewmodel不會產生任何問題。它們是簡單類，因此可以儲存在任何地方。 控制器-我們不能把它放在任何地方。它必須儲存在Controller資料夾中。但這不是什麼大問題，因為從MVC 4對控制器位置的限制被刪除了。現在我們可以把它放在任何我們想要的地方。 檢視——不幸的是，對於檢視來說，這是不可能的。所有的檢視必須放在“~/ views /ControllerName”或“~/ views /Shared”資料夾中。 這就是我們要描繪的區域。 步驟2 -建立所需的檢視模型 在ViewModel類庫專案中建立一個名為SPA的新資料夾，並建立一個名為MainViewModel的ViewModel，如下所示。 隱藏,複製Code
using WebApplication1.ViewModels; namespace WebApplication1.ViewModels.SPA { public class MainViewModel { public string UserName { get; set; } public FooterViewModel FooterData { get; set; }//New Property } }
步驟3 -建立索引操作方法 在MainController中放入以下using語句。 隱藏,複製Code
using WebApplication1.ViewModels.SPA; using OldViewModel=WebApplication1.ViewModels;
現在在MainController中建立一個名為Index的新操作方法，如下所示。 隱藏,複製Code
public ActionResult Index() { MainViewModel v = new MainViewModel(); v.UserName = User.Identity.Name; v.FooterData = new OldViewModel.FooterViewModel(); v.FooterData.CompanyName = "StepByStepSchools";//Can be set to dynamic value v.FooterData.Year = DateTime.Now.Year.ToString(); return View("Index", v); }
正如你所看到的，一個名為OldViewModelis的別名被新增為WebApplication1。檢視模型名稱空間。現在我們不用寫WebApplication1.ViewModels了。我們可以簡單地編寫OldViewModel.ClassName。 不指定別名將導致歧義錯誤。兩個namesapces WebApplication1.ViewModels。水療和WebApplication1。ViewModels有一些類似的類。 步驟4 -建立索引檢視 建立與上述索引方法關聯的檢視，如下所示。 隱藏,複製Code
@using WebApplication1.ViewModels.SPA
@model MainViewModel
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Employee Single Page Application</title>
</head>
<body>
<div style="text-align:right">
Hello, @Model.UserName
<a href="/Authentication/Logout">Logout</a>
</div>
<hr />
<div id="DivOption">
</div>
@Html.Partial("Footer", Model.FooterData)
</body>
</html>
, 步驟5 -執行並測試應用程式 按F5並執行應用程式。完成登入過程並在主控制器中導航到索引操作。 關於33實驗室的演講 為什麼控制器名稱前必須有SPA關鍵字? 當我們向ASP中新增一個區域時。在asp.net MVC應用程式中，Visual Studio建立一個名為AreaName的檔案arearegistr .cs，其中包含一個派生自AreaRegistration的類。該類定義AreaName屬性和RegisterArea方法，後者為新區域註冊路由資訊。 在我們的例子中，你可以找到nameSpaArealRegistration.cs檔案，它將位於" ~/Areas/Spa "資料夾中。SpaArealRegistration類的RegisterArea方法包含以下程式碼。 隱藏,複製Code
context.MapRoute( "SPA_default", "SPA/{controller}/{action}/{id}", new { action = "Index", id = UrlParameter.Optional } );
這就是為什麼，當涉及到控制器時，我們把SPA關鍵字放在控制器名稱之前 註冊類中的註冊區是如何被呼叫的? 開放的全球。asax檔案。Application_Start的第一行如下所示。 隱藏,複製Code
AreaRegistration.RegisterAllAreas();
RegisterAllAreas方法查詢應用程式域中派生自aregistration的所有型別，並呼叫它們的每個RegisterArea方法。 我們能在不使用SPA的情況下呼叫MainController操作嗎? 讓我們把這個問題簡單化。 問題是這個URL能工作嗎?“localhost: 8870 /主要指數” 答案是-是的。 AreaRegistration類建立新路由，但不會刪除其他路由。在RouteConfig類中定義的路由仍然可以正常工作。如前所述，控制器位置沒有限制。因此，它將工作，但輸出不會正確顯示，因為它將無法找到檢視。我建議您執行一次應用程式並嘗試它。 實驗室34 -建立單個頁面應用程式-第2部分顯示員工 步驟1 -建立顯示現有員工的ViewModel。 在ViewModel類庫的SPA資料夾中建立新的ViewModel類EmployeeViewModel和EmployeeListViewModel，如下所示。 隱藏,複製Code
namespace WebApplication1.ViewModels.SPA { public class EmployeeViewModel { public string EmployeeName { get; set; } public string Salary { get; set; } public string SalaryColor { get; set; } } }
隱藏,複製Code
namespace WebApplication1.ViewModels.SPA { public class EmployeeListViewModel { public List<employeeviewmodel> Employees { get; set; } } } </employeeviewmodel>
注意:這兩個檢視模型都是為非spa應用程式建立的ViewModel的精確副本。唯一的區別是這次BaseViewModel不是必需的。 步驟2 -建立員工名單索引 在MainController中建立名為EmployeeList的新操作方法，如下所示。 隱藏,收縮,複製Code
public ActionResult EmployeeList() { 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.Value.ToString("C"); if (emp.Salary > 15000) { empViewModel.SalaryColor = "yellow"; } else { empViewModel.SalaryColor = "green"; } empViewModels.Add(empViewModel); } employeeListViewModel.Employees = empViewModels; return View("EmployeeList", employeeListViewModel); } </employeeviewmodel></employeeviewmodel></employee>
注意:HeaderFooterFilter不是必需的。 步驟3 -建立AddNewLink PartialView 現在我們不能使用早期的AddNewLink部分檢視，因為我們在那裡的錨標籤會導致完全重新整理。我們的目標是建立一個“單一頁面應用程式”，因此不應該有任何完全重新整理。 建立一個名為AddNewLink的新的部分檢視。cshtml在“~/Areas/Spa/Views/Main”資料夾中。 隱藏,複製Code
<a href="#" onclick="OpenAddNew();">Add New</a> <a href="#" onclick="OpenBulkUpload();">BulkUpload</a>
步驟4 -建立AddNewLink操作方法 在MainController中建立一個名為GetAddNewLink的新操作方法，如下所示。 隱藏,複製Code
public ActionResult GetAddNewLink()
{
if (Convert.ToBoolean(Session["IsAdmin"]))
{
return PartialView("AddNewLink");
}
else
{
return new EmptyResult();
}
}
步驟5 -建立員工列表檢視 在~/Areas/Spa/Views/Main資料夾中建立一個名為EmployeeList的新的部分檢視。 隱藏,複製Code
@using WebApplication1.ViewModels.SPA
@model EmployeeListViewModel
<div>
@{
Html.RenderAction("GetAddNewLink");
}
<table border="1" id="EmployeeTable">
<tr>
<th>Employee Name</th>
<th>Salary</th>
</tr>
@foreach (EmployeeViewModel item in Model.Employees)
{
<tr>
<td>@item.EmployeeName</td>
<td style="background-color:@item.SalaryColor">@item.Salary</td>
</tr>
}
</table>
</div>
步驟6 -設定EmployeeList作為初始螢幕 用於此開啟索引。cshtml位於" ~/Areas/Spa/Views/Main "資料夾中，在DivOptions div中包含僱員列表操作結果，如下所示。 隱藏,複製Code
... </div> <hr /> <div id="DivOption"> @Html.Action("EmployeeList","Main") </div> @Html.Partial("Footer"...
步驟7 -執行和測試 按F5並執行應用程式。 實驗室35 -建立單頁應用程式-第3部分-建立員工 步驟1 -建立AddNew ViewModels 在ViewModel類庫專案的SPA資料夾中建立一個名為CreateEmployeeViewModel的新檢視模型，如下所示。 隱藏,複製Code
namespace WebApplication1.ViewModels.SPA { public class CreateEmployeeViewModel { public string FirstName { get; set; } public string LastName { get; set; } public string Salary { get; set; } } }
步驟2 -建立AddNew動作方法 在MainController中放入以下using語句 隱藏,複製Code
using WebApplication1.Filters;
現在在MainController中建立AddNew動作方法，如下所示。 隱藏,複製Code
[AdminFilter] public ActionResult AddNew() { CreateEmployeeViewModel v = new CreateEmployeeViewModel(); return PartialView("CreateEmployee", v); }
步驟3 -建立CreateEmployee部分檢視 在“~/Areas/Spa/Views/Main”資料夾中建立一個名為CreateEmployee的新的部分檢視，如下所示。 隱藏,收縮,複製Code
@using WebApplication1.ViewModels.SPA
@model CreateEmployeeViewModel
<div>
<table>
<tr>
<td>
First Name:
</td>
<td>
<input type="text" id="TxtFName" name="FirstName" value="@Model.FirstName" />
</td>
</tr>
<tr>
<td colspan="2" align="right">
@Html.ValidationMessage("FirstName")
</td>
</tr>
<tr>
<td>
Last Name:
</td>
<td>
<input type="text" id="TxtLName" name="LastName" value="@Model.LastName" />
</td>
</tr>
<tr>
<td colspan="2" align="right">
@Html.ValidationMessage("LastName")
</td>
</tr>
<tr>
<td>
Salary:
</td>
<td>
<input type="text" id="TxtSalary" name="Salary" value="@Model.Salary" />
</td>
</tr>
<tr>
<td colspan="2" align="right">
@Html.ValidationMessage("Salary")
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="BtnSubmit" value="Save Employee" onclick="SaveEmployee();" />
<input type="submit" name="BtnSubmit" value="Cancel" onclick="CancelSave()" />
<input type="button" name="BtnReset" value="Reset" onclick="ResetForm();" />
</td>
</tr>
</table>
</div>
步驟4 -包括jQuery UI 右擊專案並選擇“管理Nuget管理器”。 搜尋“jQuery UI”。 安裝jQuery UI。 它將向專案新增幾個JavaScript (.js)和樣式表(.css)檔案。 步驟5-包括jQuery UI 開放”~ /區域/水療中心/檢視/主/索引。包括jQuery.js,jQueryUI.js等。綜援。所有這些檔案都是由Nuget manager作為jQuery UI包的一部分新增的。 隱藏,複製Code
<head> <metaname="viewport"content="width=device-width"/> <scriptsrc="~/Scripts/jquery-1.8.0.js"></script> <scriptsrc="~/Scripts/jquery-ui-1.11.4.js"></script> <title>Employee Single Page Application</title> <linkhref="~/Content/themes/base/all.css"rel="stylesheet"/> ...
步驟6 -實現OpenAddNew函式。 在“~/Areas/Spa/Views/Main/Index”中建立一個新的JavaScript函式OpenAddNew。cshtml”,如下所示。 隱藏,複製Code
<script> function OpenAddNew() { $.get("/SPA/Main/AddNew").then ( function (r) { $("<div id='DivCreateEmployee'></div>").html(r). dialog({ width: 'auto', height: 'auto', modal: true, title: "Create New Employee", close: function () { $('#DivCreateEmployee').remove(); } }); } ); } </script>
步驟7 -執行和測試 按F5並執行應用程式。 完成登入過程並在MainController中導航到索引操作。最後點選新增新超連結。 步驟8 -建立ResetForm函式 CreateEmployee開放。cshtml檢視。在頂部建立ResetForm函式，如下所示。 隱藏,複製Code
@model CreateEmployeeViewModel <script> function ResetForm() { document.getElementById('TxtFName').value = ""; document.getElementById('TxtLName').value = ""; document.getElementById('TxtSalary').value = ""; } </script> <div> <table> ...... ...... <input type="submit" name="BtnSubmit" value="Save Employee" onclick="SaveEmployee();" /> <input type="submit" name="BtnSubmit" value="Cancel" onclick="CancelSave()" /> <input type="button" name="BtnReset" value="Reset" onclick="ResetForm();" /> </td> </tr> ...... ……
步驟9 -建立CancelSave函式 CreateEmployee開放。cshtml檢視。在頂部建立CancelSave函式，如下所示。 隱藏,複製Codedocument.getElementById(“TxtSalary”)。值= " "; ,,} ,,函式CancelSave () { ,,,,,,$ (' # DivCreateEmployee ') .dialog(“關閉”); ,,} 接下來是什麼? 在繼續執行步驟10之前，首先讓我們瞭解下一步應該做什麼。 終端使用者單擊Save Employee按鈕。 控制元件中的值必須在客戶端進行驗證。 如果所有的值都是有效的，那麼所有的值將被傳輸到伺服器端。 必須在資料庫中儲存一個新的員工記錄。 CreateEmployee對話方塊必須在此之後關閉 使用新值更新網格。 讓我們計劃 驗證 對於驗證，我們可以使用在專案的非spa版本中使用的相同的驗證JavaScript程式碼。 儲存員工 我們將建立一個MVC操作方法來儲存employee並使用jQuery Ajax呼叫它。 從客戶端到伺服器端的資料傳輸 在早期，通過表單標記和提交按鈕的幫助，可以輕鬆自動地處理這個問題。現在我們不能遵循這種方法，因為它會導致完全重新整理。這次我們使用的是jQuery Ajax方式，這將讓我們呼叫伺服器端MVC動作方法而不需要fu頁面重新整理。 現在最重要的問題是，如果呼叫是手動的，資料將如何從JavaScript轉移到MVC的動作方法。 尋找解決方案的旅程 理解這個問題 不管是JavaScript、。net還是其他任何技術，當你聽到data這個詞的時候，你首先想到的是什麼? 它的變數。我們使用變數來臨時儲存資料，然後將其轉儲到資料庫等永續性儲存中。 在我們的例子中，我們使用兩種技術——JavaScript和Asp。淨MVC。 JavaScript是一種技術和Asp。Net MVC是另一個。 它們不能交換資料，或者簡單地說，它們不能相互直接交換變數。 你可能會想，為什麼他們不能? 它們都有變數。這兩種技術都支援像float, int和char這樣的資料型別，那麼為什麼它們不能直接互相傳送變數呢? 答案是，他們有，但不一樣。 . net中的整數資料型別不需要與其他技術中的整數資料型別相同。它們可能在大小上不同，也可能在其他屬性上不同。 舉一個實時的例子。 人有腿、手、眼睛等。 狗也有一些共同之處。 它們都一樣嗎?肯定沒有。人的眼睛不能被狗的眼睛所替代，反之亦然。 同樣，我們在所有的技術中都有變數的概念，但它們並不相同。再次重複同樣的句子“。net中的整數不同於Java中的整數” 解決方案——一種常見的資料型別 行業在過去已經意識到這個問題，並認為資料型別實際上將是相同的。能夠容納任何資料的資料型別，我們稱之為“最相容的資料型別”，即字串資料型別。 字串資料型別結束了，它可以容納任何東西。 我們可以將整型資料轉換為字串型別，並將其儲存為字串變數。 我們可以將浮動資料轉換為字串型別，並將其儲存在字串變數中。 … 任何資料都可以儲存在string型別的變數中。 最終的解決方案是“每次需要從techny1傳送到technolgoy2時，techny1將把資料轉換成字串型別並將其傳送給techny2，因為100%保證techny2會理解字串”。 現在這已經成為行業標準。 問題——複雜資料怎麼樣? 問題——複雜資料怎麼樣? 如果是，那麼複雜資料呢? 如果我們想把員工的資訊從一種技術轉移到另一種技術呢? 在。net中，“類和物件”將用於表示複雜資料。 請看下面的示例 隱藏,e=new Employee(); e。EmpName = " Sukesh”; e。地址=“孟買”; 在JavaScript中，“JavaScript物件”將用於表示複雜資料。 請看下面的例子: 隱藏,複製Codevar e = { EmpName = " Sukesh ", 地址=“孟買” }; 將複雜資料從。net傳遞給其他技術，將類物件從。net傳遞給其他技術，將資料從JavaScript傳遞給其他技術，將JavaScript物件從JavaScript傳遞給其他技術。 這是不可能的。根據標準，首先我們將轉換資料(。Net物件或JavaScript物件)的字串型別，然後它將被髮送。 解決方案-通用資料格式標準 就像以前一樣，行業在這裡確定了一個共同的標準。它說，應該有一個共同的，每個人都應該在傳送資料之前表示自己的資料。這就是XML出現的原因。 每種技術都將其資料轉換為XML格式的字串，然後將其傳送給另一種技術。就像字串一樣，XML也被認為是標準格式，因此每種技術都知道它。 在上面的c#程式碼中建立的僱員物件可以用XML格式表示，如下所示。 隱藏,Code<影印件;employee> & lt; / employee> & lt; employee> ,,,& lt; EmpName> Sukesh< / EmpName> ,,,& lt; Address> Mumbai< / Address> & lt; / Employee> 所以解決方案是，“技術1將把它的複雜資料轉換成用XML格式表示的字串資料，然後將字串傳送給技術2” 問題- XML格式問題 XML格式存在以下問題 1. XML格式增加了需要傳送的總字串的大小。 弦的尺寸越大，傳遞的時間就越長。這意味著更低的效能。 2. 第二個原因(也是主要原因)是XML很難建立和解析。 讓我們再多談談。 如前所述，每種技術都必須基於資料建立XML字串，它將傳送該XML字串。現在在c#中，在XML序列化器的幫助下，從。net物件建立XML字串很容易。 但是JavaScript呢?在JavaScript中，我們既沒有序列化的概念，也沒有現成的XML操作庫。因此，當從JavaScript向其他技術傳送資料時，我們必須從JavaScript物件手動建立XML字串。這是一個非常困難的任務。 當一個技術接收來自其他技術的資料，它總是使用XML格式的字串。在c#中，在XML反序列化器的幫助下，解析XML字串並從中建立。net物件將變得非常容易。 但是JavaScript呢?在JavaScript中，我們既沒有XML反序列化器，也沒有XML操作庫，因此解析XML字串在這裡是一項非常困難的任務。 解決方案- JSON 為了解決XML格式的問題，業界提出了一種名為JSON的新格式。它是“JavaScript物件表示法”的縮寫。 在上面c#程式碼中建立的Employee物件可以用JSON格式表示，如下所示。 隱藏,複製程式碼{ EmpName:“Sukesh”, 地址:“孟買” } 用JSON格式表示的資料看起來像JavaScript物件，因此這種格式被命名為JSON (JavaScript物件表示法) 正如您所看到的，與之前相比，它是輕量級的。 JavaScript中有現成的函式，用於將JavaScript物件轉換為JSON格式的字串，以及將JSON格式的字串解析為JavaScript物件。 下面的程式碼解釋了JSON字串的建立和解析。 隱藏,複製Codevar e = { EmpName = " Sukesh ", 地址=“孟買” }; var EmployeeJsonString = JSON.stringify(e);//這個EmployeeJsonString將被髮送到其他技術。 隱藏,複製Codevar EmployeeJsonString = GetFromOtherTechnology (); var e = JSON.parse (EmployeeJsonString); 警報(e.EmpName); 警報(e.Address); 關閉對話方塊 為了關閉CreateEmployee對話方塊，我們可以使用jQuery Api。 更新網格 網格更新可以通過兩種方式中的一種來完成。 1. 與區域性檢視 為grid建立一個部分檢視，就像我們為CreateEmployee功能所做的那樣。 在EmployeeListview中建立一個帶有id的div，並在其中顯示部分檢視(網格)。 當單擊Save Employee按鈕時，以部分檢視結果的形式獲得更新的網格，並用新的PartialViewResult替換網格div的內部HTML。 我相信到目前為止我們完成的任何實驗都會給你們一個很好的想法關於如何實現這個，因此我保留這個作為一個任務。完成後，不要忘記對這次經歷發表評論。 2. 與手工程式碼 在這種方法中，MVC action方法將返回單個EmployeeViewModel而不是EmployeeListViewModel，後者將在JavaScript端接收，並使用JavaScript將新行手動插入到grid手動中。(EmployeeViewModel將作為JSON字串從MVC操作方法傳送到JavaScript)。 回到我們的實驗室 步驟10 -建立SaveEmployee操作 現在在MainController中建立一個名為SaveEmployee的新操作，如下所示。 隱藏,複製程式碼(AdminFilter) public ActionResult SaveEmployee(僱員emp) { ,,EmployeeBusinessLayer empBal = new EmployeeBusinessLayer(); ,,empBal.SaveEmployee (emp); EmployeeViewModel(); empViewModel。EmployeeName = emp.FirstName + " " + emp.LastName; empViewModel。工資= emp.Salary.Value.ToString(“C”); 如果(emp.Salary比;15000) { empViewModel。SalaryColor =“黃色”; } 其他的 { empViewModel。SalaryColor =“綠色”; ,,} 返回Json (empViewModel); } 現在我們只使用Json方法將Json字串從MVC動作方法傳送到JavaScript。 步驟11 -包括valid. js 包括在以前的實驗室中建立的valid. js檔案，如下所示。 隱藏,複製Code@using WebApplication1.ViewModels.SPA @ model CreateEmployeeViewModel & lt;指令碼src = " ~ /指令碼/ Validations.js”祝辭& lt; / script> & lt; script> 函式ResetForm () { …… 步驟12 -建立SaveEmployee函式 CreateEmployee開放。cshtml檢視。在頂部建立SaveEmployee函式，如下所示。 , 隱藏,收縮,複製程式碼… … 函式SaveEmployee () { 如果(IsValid ()) { var e = { FirstName: $ (' # TxtFName ') .val (), 姓:$ (' # TxtLName ') .val (), 年薪:$ (' # TxtSalary ') .val () }; $ . post(“/水療中心/主/ SaveEmployee”,e),然後( 函式(r) { var newTr = $('<tr></tr>'); var nameTD = $('<td></td>'); var salaryTD = $('<td></td>'); nameTD.text (r.EmployeeName); salaryTD.text (r.Salary); salaryTD。css(“背景顏色”,r.SalaryColor); newTr.append (nameTD); newTr.append (salaryTD); $ (' # EmployeeTable ') .append (newTr); $ (' # DivCreateEmployee ') .dialog(“關閉”); } ); } } & lt; / script> , 步驟13 -執行和測試 按F5並執行應用程式。 關於35實驗室的演講 JSON方法做什麼? 它將返回JSONResult。 JSONResult是ActionResult的子元素之一。 在第六天，我們談到了MVC請求週期。讓它再來一次吧。 ExecuteResult在ActionResult類中被宣告為抽象。ActionResult類的所有子類都以自己的方式定義它。在第一天我們談到了ViewResult。在ViewResult類中，ExecuteResult方法將執行以下操作。 它將建立ViewPageActivator類的物件。 它將選擇正確的ViewEngine並將ViewPageActivator物件作為引數傳遞給ViewEngine的建構函式。建立View類的物件 它將呼叫View的RenderView方法，該方法將呈現最終的HTML輸出響應。 對於JsonResult, ExecuteResult方法將， 將響應內容型別設定為“Application/Json” 使用JavaScript Serializerit將傳遞的資料轉換為JSON格式的字串 將最終的JSON格式的字串寫入響應流。 實驗36 -建立單頁應用程式-第4部分-批量上傳 步驟1 -建立SpaBulkUploadController 建立一個名為SpaBulkUploadController的新AsyncController 隱藏,複製Codenamespace WebApplication1.Areas.SPA.Controllers { ,,公共類SpaBulkUploadController: AsyncController ,,{ ,,} } 步驟2 -建立索引操作 在上面的控制器中建立一個名為Index的新操作方法，如下所示。 隱藏,複製程式碼(AdminFilter) 公共ActionResult指數() { ,,返回PartialView(“指數”); } 步驟3 -建立索引PartialView 在“~/Areas/Spa/Views/SpaBulkUpload”中建立一個新的名為Index的PartialView，如下所示。 隱藏,複製Code< div> ,,選擇File: <input type=" File " name="fileUpload" id="MyFileUploader" value="" /> ,,<input type="submit" name="name" value="Upload" onclick="Upload();"/比; & lt; / div> 步驟4 -建立OpenBulkUpload方法 開放指數。cshtml在" ~/Areas/Spa/Views/Main "資料夾中建立一個JavaScript方法Index。cshtml如下。 隱藏,複製程式碼函式OpenBulkUpload() { ,,,,,,$ . get(" /水療中心/ SpaBulkUpload指數”)不要猶豫 ,,,,,,,,( ,,,,,,,,,,函式(r) { ,,,,,,,,,,,,$ (" & lt; div id =“DivBulkUpload”祝辭& lt; / div>”). html (r)。對話方塊({width: 'auto'， height: 'auto'， modal: true, title: "Create New Employee"， ,,,,,,,,,,,,,,關閉:function () { ,,,,,,,,,,,,,,,,$ (' # DivBulkUpload ') .remove (); ,,,,,,,,,,,,,,}}); ,,,,,,,,,,} ,,,,,,,,); ,,,,} ,,& lt; / script> & lt; / head> & lt; body> ,,& lt; div風格= " text-align:對"比; , 步驟5 -執行和測試 按F5並執行應用程式。完成登入過程 導航到主控制器的索引操作並單擊BulkUpload連結。 步驟6 -建立FileUploadViewModel 在ViewModel類庫的SPA資料夾中建立一個新的檢視模型類FileUploadViewModel。 隱藏,複製Codenamespace WebApplication1.ViewModels.SPA { ,,公開課FileUploadViewModel ,,{ ,,,,,,獲取HttpPostedFileBase檔案;設定;} ,,} } 步驟7 -建立上傳操作 在SpaBulkUploadController中建立一個名為Upload的新操作方法，如下所示。 隱藏,收縮,複製程式碼(AdminFilter) 公共非同步Task< actionresult>上傳(FileUploadViewModel模型) { int t1 = Thread.CurrentThread.ManagedThreadId; List< employee>員工=等待任務。工廠。 (() =比;GetEmployees(模型)); int t2 = Thread.CurrentThread.ManagedThreadId; bal = new EmployeeBusinessLayer(); bal.UploadEmployees(員工); vm = new EmployeeListViewModel(); vm。Employees = new List<employeeviewmodel>(); foreach (Employee中的Employee項) { EmployeeViewModel(); 維生素。EmployeeName =專案。FirstName + " " + item.LastName; 維生素。工資= item.Salary.Value.ToString(“C”); 如果專案。工資比;15000) { 維生素。SalaryColor =“黃色”; } 其他的 { 維生素。SalaryColor =“綠色”; } vm.Employees.Add(維生素); } 返回Json (vm); } 私人List< employee>GetEmployees (FileUploadViewModel模型) { List< employee>employees = new List<employee>(); StreamReader = new StreamReader(model.fileUpload.InputStream); csvreader。ReadLine();//假設第一行是header 而(! csvreader.EndOfStream) { var line = csvreader.ReadLine(); var值= line.Split('，');//值之間用逗號分隔 員工e =新員工(); e。FirstName =值[0]; e。LastName =值[1]; e。工資= int.Parse(值[2]); employees.Add (e); } 返回的員工; } & lt; / employee> & lt; / employee> & lt; / employee> & lt; / employeeviewmodel> & lt; / list< employee> & lt; / employee> & lt; / actionresult> 正如您所看到的，這次我們沒有重定向，而是返回JsonResult。 步驟8 -建立上傳功能 開啟~/Areas/Spa/Views/SpaBulkUpload”資料夾中的索引檢視。 並建立一個JavaScript函式Upload，如下所示。 隱藏,收縮,複製Code< script> 函式上傳(){ 偵錯程式; var fd = new FormData(); $('#MyFileUploader')[0]; fd。追加(“類”,file.files [0]); . ajax({美元 url:“/水療中心/ SpaBulkUpload /上傳”, 型別:“文章”, contentType:假的, processData:假的, 資料:fd })。然後(函式(e) { 偵錯程式; for (i = 0;我& lt;e.Employees.length;我+ +) { var newTr = $('<tr></tr>'); var nameTD = $('<td></td>'); var salaryTD = $('<td></td>'); nameTD.text (e.Employees[我].EmployeeName); salaryTD.text (e.Employees[我].Salary); salaryTD。css(“背景顏色”,e.Employees[我].SalaryColor); newTr.append (nameTD); newTr.append (salaryTD); $ (' # EmployeeTable ') .append (newTr); } $ (' # DivBulkUpload ') .dialog(“關閉”); }); } & lt; / script> & lt; div> 選擇檔案:…… 步驟9 -執行和測試 為測試建立一個文字檔案，如下所示。 按F5並執行應用程式。 結論 在這裡我們完成了7天的旅程。我們使用Asp中的許多特性完成了一個簡單的專案。淨MVC。我們還詳細討論了許多理論概念。 很快我將釋出另外兩篇關於MVC的文章。它不會是系列的一部分，但它包括了在這7天作為專案的一部分沒有涉及到的一些事情 第2條-學習MVC專案在7天-獎金天1 在這裡，我們將再次建立一個SPA專案，但是要藉助Web API和angular的幫助 第1條-學習MVC專案在7天-獎金天1 在這裡，我們將談談一些MVC主題，其中沒有涵蓋在7天。 捆綁和縮小 Appliaction_Error 臨時資料 建立自定義助手類 MVC單元測試 MVC依賴解析器 從MVC 5開始 如果你想開始與MVC 5開始與下面的視訊學習MVC 5在2天。 如果你認為有更多的東西需要包括在內，請免費給我一個電子郵件差不多。 你的評論，郵件總是激勵我們做更多。把你的想法和評論寫在下面，或者傳送郵件到[email protected] 在Facebook, LinkedIn或twitter上聯絡我們，以保持最新的版本。 如需在孟買進行線下技術培訓，請訪問StepByStepSchools.Net 線上培訓請訪問JustCompile.com或www.Sukesh-Marla.com 本文轉載於：http://www.diyabc.com/frontweb/news1757.html