熱門文章 (Popular Post)

顯示具有 ASP.NET MVC 標籤的文章。 顯示所有文章

By :

前言

過去在開發 ASP.NET Application 過程中,按下 F5 啟動 / 偵錯網站時常常會跳出目前所在 View (.cshtml),而並非自己想要偵錯/測試的頁面。 雖然手動點回 Index.cshtml 並不困難,但長久下來也浪費了不少時間。 最近讀者詢問相關問題時,整理一下如何設定起始頁面 (startup page),並簡單做一個紀錄,也解決自己長久以來的困擾。


解決方法

Step 1.  對欲啟動專案點選右鍵 → Properties → Web
Step 2. 選擇 Specific Page → 選擇啟動時的 page 即完成設定

Tag : ,

By :

前言

重要:在閱讀本篇前建議,實作前面的文章內容,本篇只提供範例程式與簡易程式說明。

本篇是結合Razor, HtmlHelper, ViewModel, Entity Framework(code first), and local db 等前述的
內容所撰寫一篇簡易的應用程式。利用這個簡單範例,可以讓您透過一個CRUD的專案,進
而由此範例進行延伸,能繼續更深入的學習與延伸發展新功能(一種先求有,再求好的觀念)。

這個範例程式並不完美,希望透過修改這個應用程式,了解基本的使用方法。
若有觀念錯誤與修改建議,也請各位先進不吝指教。

Github位址: https://github.com/superpucy/FcuMvcWebDemo2


介紹

這個範例專案有幾個主要的重點,包含
  1. App_Data、Model、Migrations 資料夾與 Web.config:Local database 與 code first 相關。
  2. Controller:包含新增、修改、刪除、檢視與條列的 Controller 與 Action 。
  3. Service:主要邏輯實作,包含ViewModel與資料Model對應、資料Model操作。
  4. ViewModel與View:網頁實作。


By :

介紹

Object Relational Mapping, ORM,一種將關聯式資料庫轉換對應成為物件的抽象化技術,
好處是可以讓開發者直接使用物件導向方式對資料庫進行操作,只需要一套語法,不需要
直接面對各家資料庫,進而降低切換資料庫所需要做的工。 對於工程師來說,在開發上能
夠減少不少時間。

下列我們簡單比較 ADO .Net 與 Entity Framework 的差異:

ADO .Net
必須初始化連線,直接輸入SQL語法對資料庫進行操作,開發者需要自行組裝SQL語法與
參數。如下圖所示,建立連線後,取回離線資料庫到容器後,再進行後續的邏輯運算。

By :

前言

為了這一篇,前面需要鋪了許多的梗,寫了許多可能不是很重要但很基礎的觀念,包含
  1. Html 基礎 (請參考 網頁系統 與 Html基礎簡介)
  2. Controller, Action 與 View 的關係(請參考 Controller and View 1-3)。
  3. Razor, html Helper, 與model binder  (請參考 Razor and Htmlhelper)
當對於前面幾篇文章稍微有概念後,看到這篇才不會有太多的疑問。
若有觀念錯誤與修改建議,也請各位先進不吝指教。



介紹

在Controller and View 2 - 資料傳遞篇,我們有提到簡易的接收與傳遞資料的方法,但隨
著系統功能複雜與欄位越來越多的情況下,我們的資料內容也越來越多,而必須增加許
多程式碼做介接與驗證,維護變得相當不容易。

一般來說,許多程式開發者會使用(Data transfer object, DTO)的方式來處理這個問題。
將所有的參數放入一個物件裡,進行傳遞,好處是增加程式的可讀性與容易使用。

回想起剛開始學習 MVC 的時候,不懂ViewModel的目的與用途,而一直將他視作DTO
並用來傳遞參數,但隨著開發時間久了,雖然覺得ViewModel與DTO頗相似,但個人覺
得比ViewModel 較接近於描述 View 的行為或定義 View 的規格。

簡單的例子:
使用者資料維護功能,CreateUserViewModel  與  UpdateUserPasswordViewModel 內容來
源都是使用者資料庫,但 UpdateUserPasswordViewModel 內可能只有使用者帳號密碼
相關欄位,而不需要將所有資料帶出。
另外,ViewModel也能透過增加屬性的方式,進行資料格式指定與驗證,所以個人認知
偏向 ViewModel 用於描述 View 的規格。


By :

前言

本篇介紹 將參數傳遞到Controller將資料傳遞到View 的方法,雖然與正統使用ViewModel
的方式不同,但其中包含了許多基礎的概念,分享給大家參考。
若有講解錯誤或建議,請各位先進不吝指教。

介紹

如何傳遞參數到Controller範例(form與 input使用法方請見第二篇 html 介紹)

開啟範例程式,我們先開啟Views\Home\Index.html 進行改寫,內容如下:

By :

前言

這一章節我們將簡單介紹 Controller 的架構,若有觀念錯誤或建議,也請各位先進不吝指導。

關鍵字:Routing ConfigControllerActionResult.


介紹

前面的文章我們提到Controller負責的工作為路由(routing):簡單的說,您有一個網站網址為
www.yourdomain.com,當使用者輸入這個網址後,送出的資訊將透過相對應的 Controller 進
行處理,最後回傳結果(網頁內容)給使用者,使用者即可在瀏覽器上看見網頁內容。

Routing Config
我們怎麼知道哪一個網址,對應哪一個 Controller 呢?
在專案中,我們透過 RouteConfig.cs 設定所有網址與Controller之間的對應。(上一篇的最後
,我們教您如何開啟一個範本Web application,我們以這個範本為例來進行說明)
我們可以在專案下找到 App_Start\RouteConfig.cs 這個檔案。

By :

前言

本篇除了簡單說明 MVC 概念,也進一步說明 Asp .Net MVC Web Application 專案架構。
呈現環境為visual studio 2015 community:
連結:https://www.visualstudio.com/zh-tw/products/visual-studio-community-vs.aspx。

若有觀念錯誤或建議,也請各位先進不吝指導。



介紹

MVC 一種軟體架構模式,把系統分成三個種核心,分別為:Model, View, Controller。
主要將網頁分成邏輯處理(物件操作)、視覺呈現與路由控制(發送、接收請求),各種元件
處理不同的工作,強調職責分離,開發與維護人員可以更快速對於目的與問題,找到該
處理的程式,讓程式的修改與功能擴充簡化,提高程式可用性。

By :

前言:

這一系列文章是過去學習Asp .Net MVC,自己整理的筆記,過去曾用於回學校指導學弟
妹專題課程。因學校不同學程與個人程式學習經驗不同,其實進行教學的時候,非專攻
網頁程式的學弟妹,對於基礎的html仍舊很陌生。
這系列的文章從 網頁系統操作流程與html 開始說明,到最後發佈專案到IIS或Azure Web
 APP做一個簡單流程介紹,讓初學網頁程式的學生有個概念。

這系列的文章包含下面內容:
 1.  網頁系統 與 Html基礎簡介
 2.  MVC 架構與說明(以Asp .Net MVC C# 為例)
 3.  Controller and View 1 - Controller 架構篇
 4.  Controller and View 2 - 資料傳遞篇
 5.  Controller and View 3 - View架構篇
 6.  Razor and HtmlHelper
 7.  ViewModel (Attribute and model binding)
 8.  ORM and Entity framework 簡介
 9.  Entity framework database first with localdb
      9-1 附錄 Entity framework database first with MySQL database
 10.Entity framework code first with localdb
 11.Linq、Lambda 與 System.Linq.Enumerable 方法
 12.範例:一個新增、修改、刪除、查詢與檢視的應用程式
 13.Install IIS and publish web application project (Deploy to IIS)
 14.Azure初體驗 申請流程、上傳Web應用程式與SQL資料庫匯入
      (Deploy to Azure Web Application)

若有觀念錯誤與修改建議,也請各位先進不吝指教。


介紹:

我們一般認知的網頁操作行為(看facebook、逛網拍、看網誌、收電子郵件、或看新聞),
皆是以開啟瀏覽器,輸入網站連結(網站查詢),前往我們想去的網站,取得我們想要的
資訊(如下圖所示)。

By :

前言

本篇提供使用Entity framework,資料來源為MySQL的使用者參考。

測試環境:
Visual studio 2015 community
MySQL 5.6.25-log

目錄

1.Insatll Download MySQL for Visual Studio
2.Install Download Connector/Net
3.Setting on Visual studio

重要:一定要先安裝Download MySQL for Visual Studio,再安裝Download Connector/Net
Impotrtant: Always install the MySQL for Visual Studio before installing MySQL Connector/Net.


Insatll Download MySQL for Visual Studio

下載 MySQL Installer,選擇安裝 MySQL for Visual Studio

直接下載 MySQL for Visual Studio

You can download MySQL Installer, select and install MySQL for Visual Studio
or
directly download and install MySQL for Visual Studio

Step.1 開啟 MySQL Installer ,進行下載安裝程式。
           Open MySQL Installer and download installer

By :

前言

這篇是過去初學Asp .Net MVC過程中的筆記,在取得Entity Framework資料庫物件、
資料運算與撰寫程式的Linq + Lambda方法。這篇不詳細說明原理,而大略紀錄如何
使用。若有錯誤的地方,歡迎各位先進指點,謝謝!

本篇文章有引用MSDN與WIKI部分說明,若有不妥,請告知。
本篇文章測試環境為visual studio community 2013:


By :

前言

這篇是過去初學Asp .Net MVC過程中的筆記,新增LocalDB、建立ADO資料模型、
與更新資料模型的流程,提供給大家參考。
若有錯誤請不吝指教,謝謝!


目錄

  1. 建立範本專案
  2. 建立local database 與資料表
  3. 建立ADO.NET Entity Data Model
  4. 更新ADO.NET Entity Data Model


建立範本專案

(Visual Studio 版本不同畫面有些差異,本篇文章使用Visual Studio 2015)
Step 1. 開啟 Visual Studio 2013/2015, 選擇檔案(file) -> 新增(new) -> 新專案(new project)
            選擇web -> ASP.Net Web Application, 輸入專案名稱,點確定。

By :

前言

這篇是過去初學Asp .Net MVC過程中的筆記,設定連線字串、使用code first產生localDB
的流程,提供給大家參考。
若有錯誤請不吝指教,謝謝!


目錄

  1. 建立範本專案
  2. 設定 Connection String
  3. 建立 DbContext
  4. 執行 database migration 指令
  5. 檢視資料庫
  6. 更新 database


建立範本專案

(Visual Studio 版本不同畫面有些差異,本篇文章使用Visual Studio 2015)
Step 1. 開啟 Visual Studio 2013/2015, 選擇檔案(file) -> 新增(new) -> 新專案(new project)
            選擇web -> ASP.Net Web Application, 輸入專案名稱,點確定。


By :

前言

這篇是過去初學Asp .Net MVC過程中的筆記,一些基礎的Razor語法,提供給大家參考。
若有錯誤請不吝指教,謝謝!



Razor

與JSP, PHP, ASP, AngularJs...等許多網頁語言相同,動態網頁需要輸出資料需要用的語法。
這些網頁語言使用特殊的符號,像是<% %>、$、{{}}等符號,提供使用者撰寫程式邏輯或輸出資料。
Razor語法相當直覺、輕量化語容易學習的特性,減少在開發者 View 中輸出資料時使用的語法(簡潔)
並降低開發者的學習時間,可混用 HTML 與程式語言指令。

當然,在 Visual Studio,可享有 Intellisense 能力。

Razor的基本使用方法如下:
1."@" + 變數名稱 的方式,就可以輸出程式中的變數
@UserName
@Model.Name

2.如果程式有多行,可以使用 @{ } 的方式來設定
@{
    var UserName = "Duran";
    var a = 1;
    var b = 2;
    var c = a + b;
}

3.註解
@*註解*@
@*
多行註解
*@

4.可以與html語法混用
@{
    var a = 1;
    <div>@a</div>
}
5.基本上會偵測html tag(像是div、span、p等,自動轉換html語法),
  某些情況下,若需要告知這段文字是html語法,可以使用@:
@{
    var a = 1;
    <div>@a</div>
    @:a
}

6. 陳述式 @(a+b)
@{ 
    var a=1;
    var b=1; 
    var count = @(a+b)
}

7.引用外部css或js
<script cripts="" jquery-1.7.1.min.js="" src="@Url.Content(" type="text/javascript">< /script>


HtmlHelper

MVC提供許多Html Helpers幫助開發者快速的產出通用的 Html 標籤,像是超連結或者表單元素。
如下圖所示,這些Helper會自動轉換成 Html 元素

By :

前言:

這篇文章分享如何在Visual Studio中使用工作清單(Task List),操作方法簡單
,卻可以幫助開發者快速註記工作內容與快速找到程式碼需要修改位置。

自己工作應用方式如下:
1.在開始撰寫程式前,可以利用工作清單將工作事項註記在程式碼中,減
   少切換工作過程中,花費時間追尋程式碼。
2.利用工作清單設定優先製作順序。
3.Team Leader或技術主管可以利用工作清單告知其他工程師,撰寫架構、
   撰寫步驟...等

文章注意事項:
1.此篇文章會同步發佈於個人部落格與點部落。
2.使用的環境為Visual Studio Community 2013。
3.此文章利用一個全新的ASP .NET Web Application專案(MVC)進行操作。


目錄:




實作:

1.使用方式(How to use)

Step 1. 開啟Visual Studio Community 2013,點選新專案(ASP .NET Web Application)。
             Open Visual Studio Community 2013,click new project(ASP .NET Web Application)

By :

前言:

在前一間公司工作期間,常常在許多論壇、研討會甚至線上學習網站,得到許多Azure相關
資訊,在某個專案需要添購硬體的流程中,個人去比較了費用上的差異,發現Azure蠻適合
沒辦法硬體(機房、線路、網路...等)管理的中小型公司與軟體創業團隊使用。而且從前同事
Alan得知,若公司本身就有Visual Studio(訂閱msdn)部分,還有優惠。

在陰錯陽差的情況下,協助某個朋友詢問各家雲端平台的價格,比較了各家價格資訊與客
服比較,結果請點連結。而我也順便申請了Azure服務,來測試一下。不嘗試還好,一嘗試
發現真的挺方便的!!

而這篇文章,簡單紀錄一下整個申請流程、上傳Web應用程式,與SQL資料庫匯入的流程,
提供未來的自己與大家參考。

此篇文章會同步發布於個人Blogger與點部落(這兩天改版,之後上傳)。


目錄:




實作:

1.申請流程與付費使用

Step 1. 前往Azure雲端平台,點選價格計算機
            Go to Azure,Click "Pricing calculator"

By :

前言:

回想約三年前的第一份工作,在 Java Application 或 Android App 專案開發過程中,與其他開
發者溝通與確認WebAPI格式是必須且非常繁瑣的。雖然工作內容不難,但常常因為一些細節
耗費相當多的時間。
在開發過程中,必須要了解WebAPI使用方式、解析或回傳不同格式資料(XML、JSON)、需
要保持資料一致性...等。所以我們必須以文件紀錄這些資訊,並作為開發者之間溝通的方式。

早期紀錄的方式,以簡單的Google document或Word方式紀錄與說明 WebAPI,記錄範例如
下:

方法:GET
參數格式:String
參數名稱:Id
回傳資料格式:JSON
回傳資料內容:{ "name" : "duran" }

這種紀錄方式有些缺點:
1.人工撰寫文件:非常花費時間。
2.文字記錄錯誤:因為人工輸入,運氣不好可能因為錯字花費很多時間。
3.無法即時測試:Get可能方便測試,輸入網址即可測試,如果是Post呢? 如果有10個參數呢?
                               如果超長JSON呢?
4.難以紀錄歷程:問題比較小,使用版本控管軟體可以解決這個問題。
5.文件不夠詳細:可能又要找WebAPI開發者討論,花費時間。


換了新環境,當然也要入境隨俗的偷學新東西!! 而不能像過去一樣花費時間在鎖碎的
問題上!!
今天這篇主要簡單介紹swashbuckle,一個整合ApiExplorer and Swagger/swagger-ui,容易安裝、容易維護WebAPI與可以進行測試的好用套件。

這篇文章將同時發佈在點部落與個人blogger



Install Package:

Step.1 開啟Visual Studio,點選New Project...
           Open Visual Studio,  Click New Project...

By :

前言:

因為公司某個專案,為了達到即時更新資料,開始研究SignalR。
這個專案使用long polling方法,每隔一段時間向WebAPI Server要求資料,無法
達到前端、後端更改資料後,即時真正即時更新的需求,故改用SignalR套件,
來實作即時更新 (real time is so cool ! )。

(但實際效益與伺服器的負載量還需要再深入研究)


這個功能在專案上已經實作完畢,在開始實作前,我有找些教學影片與網站,
自己嘗試連接SignalR的服務,作成一個範例,這篇就是整個範例的實作過程,
除了記錄下來給未來的自己複習,也分享大家參考。

(若有說明或觀念錯誤,歡迎指導)

本篇文章同步發布於個人的blogger與點部落,文章最後有提供範例下載。
文長謹慎。


實作:

實作可以分成三段(可點超連結):
  1. 後端專案設定:SignalR相關設定,包含解決 cross domain 問題
  2. 前端專案設定:JQuery + AngluarJS 使用與設定
  3. 結果呈現:SiganlR成果呈現與範例專案下載

後端專案設定

Step 1首先我們先開啟新專案,選擇ASP .NET MVC 4 Web Application
          專案名稱為 SignalRDemo
          File => New Project => ASP .NET MVC 4 Web Application
          Name is SignalRDemo

By :

前言:

在正式學習Asp Web程式開發的時候,剛好是從MVC開始學起,對於前一版的Asp, Asp .Net(C#, vb)不甚熟悉。雖然常常在除錯、修改些維護專案Asp, Asp .Net程式,但也僅限於網路上查詢語法,直接撰寫使用,有許多原理或方法不是很懂。

維護這些專案一陣子後,偶然在維護案發現Request.QueryString and Request.Form兩個在Asp傳遞參數的方法。且這兩個方法可以在Controller中使用,相當方便(雖然在MVC中可能不是很正式的用法),但在這邊簡單說明使用方法。
如果您對於httpget與httppost相當了解與熟練,這篇只需要看範例及可。
(此篇文章同步放上個人點部落)


說明:

QueryString:

當我們在網頁系統傳遞參數的過程中,最簡單也最快的方法是使用http get方式進行傳輸:
簡單的說,將需要的變數放置在網址(URL)後面,一併傳遞至下一個網頁,進行處理。而
QueryString就是接收在網址上的變數之其中一種方式。

舉例來說:
我們有兩個string,分別為account與nickname
account: admin
nickname: duran

我們只需要將變數用下面的方法,接在網址後面即可。
原網址 http://your_web_site/index
新網址 http://your_web_site/index?account=admin&nickname=duran

若再增加一個變數name=DuranHsieh,則使用&接下一個變數(依此類推)
新網址 http://your_web_site/index?account=admin&nickname=duran&name=DuranHsieh
在controll中加入Request.QueryString["name"]; ,就可以取得網址列,名稱為name的內容值。

範例:
我們使用Asp .Net MVC的範例程式:
Step 1.在HomeController中的Index,使用Request.QueryString方法將內容放入ViewBag:
public ActionResult Index()
{
    ViewBag.name = Request.QueryString["name"];
    ViewBag.account = Request.QueryString["account"];
    ViewBag.nickname = Request.QueryString["nickname"];
    return View();
}

Step 2.在Index.cshtml加上
@ViewBag.name
@ViewBag.account
@ViewBag.nickname

Step 3.執行程式後,在網址最後方加上?account=admin&nickname=duran&name=DuranHsieh
可以看到取得內容顯示在網頁上。

- Copyright © Duran Hsieh @ Duran 的技術冶煉廠 - Date A Live - Powered by Blogger - Designed by Johanes Djogan -