{"id":1464,"date":"2014-11-13T04:00:01","date_gmt":"2014-11-13T04:00:01","guid":{"rendered":"http:\/\/www.rezafaisal.net\/?p=1464"},"modified":"2014-11-13T04:02:04","modified_gmt":"2014-11-13T04:02:04","slug":"all-for-one-one-asp-net","status":"publish","type":"post","link":"https:\/\/www.rezafaisal.net\/?p=1464","title":{"rendered":"All for One, One ASP.NET"},"content":{"rendered":"

Dulu ketika hanya ada ASP.NET Web Form, dunia baik-baik saja dan kemudahan dapat dilihat dengan mata dan kemudahan dapat digunakan oleh jari-jari ini :P Kemudian datanglah ASP.NET MVC. Dan dunia seperti terbelah dua #hehehe. Karena saat project dibuat, Visual Studio memberikan pilihan “dunia ASP.NET Web Form” atau “dunia ASP.NET MVC”. Dua dunia yang berbeda dan membuat perpecahan kubu developer menjadi dua juga :P<\/p>\n

\"blog01\"<\/a><\/p>\n

Tapi itu duluuuuuuuuuu…..<\/p>\n

Sejal 2013, dimulai oleh Visual Studio 2013 maka ASP.NET disatukan kembali secara default, tanpa perlu install “tambahan web tool” atau yang lainnya. Sejak itu secara default diberikan jalan untuk mempersatukan keduanya dalam satu project. Sebagai informasi saat ini selain ASP.NET Web Form dan ASP.NET MVC terdapat anggota keluarga baru pada ASP.NET yaitu ASP.NET Web API (walaupun terdapat keluar baru lainnya yaitu SignalR, yang akan kita bahas pada posting berikutnya).<\/p>\n

Untuk membuat ASP.NET web application dengan Visual Studio 2013 diberikan sebuah template project saja, seperti yang terlihat pada gambar ini.<\/p>\n

\"blog02\"<\/a><\/p>\n

Setelah memilih ASP.NET Web Application dan tombol OK diklik maka akan ditampilkan window opsi selanjutnya, seperti gambar di bawah ini.<\/p>\n

\"blog03\"<\/a><\/p>\n

Jika memilih template “Empty” seperti gambar di atas, maka dapat dilihat pada checkbox “Add folders and core reference for” dapat dicentang ketiganya.\u00a0 Ini artinya dalam project tersebut dapat ditambahkan file “web form” atau file-file “mvc” dimulai dengan file controler, model bahkan file razor-nya view. Dan tidak ketinggalan di project yang sama tersebut bisa ditambahkan class controller “web api”.<\/p>\n

Bagaimana jika pada template dipilih “Web Forms”\u00a0 atau MVC?<\/p>\n

\"blog04\"<\/a> \"blog05\"<\/a><\/p>\n

\"blog06\"<\/a><\/p>\n

Seperti yang dilihat pada gambar checkbox pada “Add folder and core references for” tetap dapat dipilih, ini artinya dalam project tersebut dapat berisi ketiga anggota keluarga ASP.NET tersebut.<\/p>\n

Nah paparan di atas memberikan sedikit gambaranan tentang One ASP.NET<\/strong>. One ASP, memberikan seluruh anggota ASP.NET dari Web Forms, MVC dan Web API dapat tinggal berdampingan dalam satu project, baik project web application maupun web site.<\/p>\n

Berikut ini dicoba template “Empty” untuk membuktikan ketiga anggota ASP.NET ini dapat digunakan dalam satu project.\u00a0 Pertama adalah lakukan pembuatan project seperti yang telah dicontohkan di atas, kemudian pilih template Empty dan centang checkbox Web Forms, MVC dan Web API.<\/p>\n

Setelah project dibuat maka dapat dilihat struktur folder seperti berikut ini (lihat Solution Explorer).<\/p>\n

\"blog07\"<\/a><\/p>\n

Bagi yang sudah pernah membuat aplikasi web dengan ASP.NET MVC, dengan melihat struktur folder dari gambar di atas akan dapat mengetahui bahwa struktur tersebut biasa digunakan pada ASP.NET MVC. Kemudian jika kita melirik pada bagian “References” dapat dilihat namespace-namespace berikut ini.<\/p>\n

\"image\"<\/a><\/p>\n

Dari reference yang digunakan pada project ini dapat dilihat terdapat reference yang diperlukan oleh Web API seperti Microsoft.Web.Infrastructure.\u00a0 Juga terdapat reference untuk MVC seperti System.Web.Mvc dan System.Web.Razor.\u00a0 Sedangkan reference untuk Web Forms dapat dilihat pada System.Web dan lain-lain.<\/p>\n

{Web Forms<\/em><\/strong>}<\/p>\n

Berikut ini bukti bahwa project ini dapat “berisi” halaman Web Forms.\u00a0 Caranya tambahkan halaman Web Forms dengan cara klik kanan pada project pilih Add > Web Form dan beri nama file HelloWebForm.<\/p>\n

\"blog07\"<\/a><\/p>\n

Berikut ini isi file HelloWebForm.aspx<\/p>\n

\n
\n
   1:<\/span> <%@ Page Language=\"C#\" AutoEventWireup=\"true\" CodeBehind=\"HelloWebForm.aspx.cs\" Inherits=\"WebApplication3.HelloWebForm\" %><\/span><\/pre>\n
<\/p>\n
   2:<\/span><\/pre>\n
<\/p>\n
   3:<\/span> <!<\/span>DOCTYPE<\/span> html<\/span>><\/span><\/pre>\n
<\/p>\n
   4:<\/span><\/pre>\n
<\/p>\n
   5:<\/span> <<\/span>html<\/span> xmlns<\/span>=\"http:\/\/www.w3.org\/1999\/xhtml\"<\/span>><\/span><\/pre>\n
<\/p>\n
   6:<\/span> <<\/span>head<\/span> runat<\/span>=\"server\"<\/span>><\/span><\/pre>\n
<\/p>\n
   7:<\/span>     <<\/span>title<\/span>><\/<\/span>title<\/span>><\/span><\/pre>\n
<\/p>\n
   8:<\/span> <\/<\/span>head<\/span>><\/span><\/pre>\n
<\/p>\n
   9:<\/span> <<\/span>body<\/span>><\/span><\/pre>\n
<\/p>\n
  10:<\/span>     <<\/span>form<\/span> id<\/span>=\"form1\"<\/span> runat<\/span>=\"server\"<\/span>><\/span><\/pre>\n
<\/p>\n
  11:<\/span>     <<\/span>div<\/span>><\/span><\/pre>\n
<\/p>\n
  12:<\/span>         <<\/span>asp:Label<\/span> ID<\/span>=\"Label1\"<\/span> runat<\/span>=\"server\"<\/span> Text<\/span>=\"Label\"<\/span>><\/<\/span>asp:Label<\/span>><\/span><\/pre>\n
<\/p>\n
  13:<\/span>     <\/<\/span>div<\/span>><\/span><\/pre>\n
<\/p>\n
  14:<\/span>     <\/<\/span>form<\/span>><\/span><\/pre>\n
<\/p>\n
  15:<\/span> <\/<\/span>body<\/span>><\/span><\/pre>\n
<\/p>\n
  16:<\/span> <\/<\/span>html<\/span>><\/span><\/pre>\n
<\/p>\n<\/div>\n<\/div>\n
dan berikut ini adalah isi file HelloWebForm.aspx.cs<\/p>\n
\n
\n
   1:<\/span> using<\/span> System;<\/pre>\n
<\/p>\n
   2:<\/span> using<\/span> System.Collections.Generic;<\/pre>\n
<\/p>\n
   3:<\/span> using<\/span> System.Linq;<\/pre>\n
<\/p>\n
   4:<\/span> using<\/span> System.Web;<\/pre>\n
<\/p>\n
   5:<\/span> using<\/span> System.Web.UI;<\/pre>\n
<\/p>\n
   6:<\/span> using<\/span> System.Web.UI.WebControls;<\/pre>\n
<\/p>\n
   7:<\/span><\/pre>\n
<\/p>\n
   8:<\/span> namespace<\/span> WebApplication3<\/pre>\n
<\/p>\n
   9:<\/span> {<\/pre>\n
<\/p>\n
  10:<\/span>     public<\/span> partial<\/span> class<\/span> HelloWebForm : System.Web.UI.Page<\/pre>\n
<\/p>\n
  11:<\/span>     {<\/pre>\n
<\/p>\n
  12:<\/span>         protected<\/span> void<\/span> Page_Load(object<\/span> sender, EventArgs e)<\/pre>\n
<\/p>\n
  13:<\/span>         {<\/pre>\n
<\/p>\n
  14:<\/span>             Label1.Text = \"Hello Web Form\"<\/span>;<\/pre>\n
<\/p>\n
  15:<\/span>         }<\/pre>\n
<\/p>\n
  16:<\/span>     }<\/pre>\n
<\/p>\n
  17:<\/span> }<\/pre>\n
<\/p>\n<\/div>\n<\/div>\n
Kemudian klik kanan pada file tersebut dan pilih View in browser, dan dapat dilihat halaman web form ini dapat dijalankan dengan lancar :)<\/p>\n
{Web API<\/em><\/strong>}<\/p>\n
Untuk membuktikan Web API juga dapat berada pada project ini maka dapat melakukan hal berikut ini, klik kanan pada folder Controllers, dan pilih Web API Controller Class kemudian berikan nama HelloController.<\/p>\n
\"blog08\"<\/a><\/p>\n
Berikut ini isi dari file HelloController.<\/p>\n
\n
\n
   1:<\/span> using<\/span> System;<\/pre>\n
<\/p>\n
   2:<\/span> using<\/span> System.Collections.Generic;<\/pre>\n
<\/p>\n
   3:<\/span> using<\/span> System.Linq;<\/pre>\n
<\/p>\n
   4:<\/span> using<\/span> System.Net;<\/pre>\n
<\/p>\n
   5:<\/span> using<\/span> System.Net.Http;<\/pre>\n
<\/p>\n
   6:<\/span> using<\/span> System.Web.Http;<\/pre>\n
<\/p>\n
   7:<\/span><\/pre>\n
<\/p>\n
   8:<\/span> namespace<\/span> WebApplication3.Controllers<\/pre>\n
<\/p>\n
   9:<\/span> {<\/pre>\n
<\/p>\n
  10:<\/span>     public<\/span> class<\/span> HelloController : ApiController<\/pre>\n
<\/p>\n
  11:<\/span>     {<\/pre>\n
<\/p>\n
  12:<\/span>         \/\/ GET api\/<controller><\/span><\/pre>\n
<\/p>\n
  13:<\/span>         public<\/span> IEnumerable<string<\/span>> Get()<\/pre>\n
<\/p>\n
  14:<\/span>         {<\/pre>\n
<\/p>\n
  15:<\/span>             return<\/span> new<\/span> string<\/span>[] { \"Hello\"<\/span>, \"Web\"<\/span>, \"API\"<\/span> };<\/pre>\n
<\/p>\n
  16:<\/span>         }<\/pre>\n
<\/p>\n
  17:<\/span><\/pre>\n
<\/p>\n
  18:<\/span>         \/\/ GET api\/<controller>\/5<\/span><\/pre>\n
<\/p>\n
  19:<\/span>         public<\/span> string<\/span> Get(int<\/span> id)<\/pre>\n
<\/p>\n
  20:<\/span>         {<\/pre>\n
<\/p>\n
  21:<\/span>             return<\/span> \"Hello Web API\"<\/span>;<\/pre>\n
<\/p>\n
  22:<\/span>         }<\/pre>\n
<\/p>\n
  23:<\/span><\/pre>\n
<\/p>\n
  24:<\/span>         \/\/ POST api\/<controller><\/span><\/pre>\n
<\/p>\n
  25:<\/span>         public<\/span> void<\/span> Post([FromBody]string<\/span> value<\/span>)<\/pre>\n
<\/p>\n
  26:<\/span>         {<\/pre>\n
<\/p>\n
  27:<\/span>         }<\/pre>\n
<\/p>\n
  28:<\/span><\/pre>\n
<\/p>\n
  29:<\/span>         \/\/ PUT api\/<controller>\/5<\/span><\/pre>\n
<\/p>\n
  30:<\/span>         public<\/span> void<\/span> Put(int<\/span> id, [FromBody]string<\/span> value<\/span>)<\/pre>\n
<\/p>\n
  31:<\/span>         {<\/pre>\n
<\/p>\n
  32:<\/span>         }<\/pre>\n
<\/p>\n
  33:<\/span><\/pre>\n
<\/p>\n
  34:<\/span>         \/\/ DELETE api\/<controller>\/5<\/span><\/pre>\n
<\/p>\n
  35:<\/span>         public<\/span> void<\/span> Delete(int<\/span> id)<\/pre>\n
<\/p>\n
  36:<\/span>         {<\/pre>\n
<\/p>\n
  37:<\/span>         }<\/pre>\n
<\/p>\n
  38:<\/span>     }<\/pre>\n
<\/p>\n
  39:<\/span> }<\/pre>\n
<\/p>\n<\/div>\n<\/div>\n
Untuk mengujinya dapat menggunakan web browser, pada address bar tuliskan alamat dengan pola seperti berikut ini : http:\/\/ip_address:port\/api\/Hello<\/a> maka akan didapat respon berupa format JSON seperti berikut ini :<\/p>\n
\n
\n
   1:<\/span> [\"Hello\"<\/span>,\"Web\"<\/span>,\"API\"<\/span>]<\/pre>\n
<\/p>\n<\/div>\n<\/div>\n
{MVC<\/em><\/strong>}<\/p>\n
Untuk membuktikan halaman-halaman MVC dapat berada disini juga maka dibisa buktikan dengan cara klik kanan pada folder Controllers kemudian pilih Add > Controller dan pada window Add Scaffold di bawah ini, pilih MVC 5 Controller – Empty.<\/p>\n
\"blog09\"<\/a><\/p>\n
Berikan nama IndexController untuk controller tersebut :<\/p>\n
\"blog10\"<\/a><\/p>\n
Setelah tombol Add diklik maka dapat dilihat file IndexController pada folder Controllers dan secara otomatis dibuatkan folder Index pada folder Views.<\/p>\n
\n
\n
   1:<\/span> using<\/span> System;<\/pre>\n
<\/p>\n
   2:<\/span> using<\/span> System.Collections.Generic;<\/pre>\n
<\/p>\n
   3:<\/span> using<\/span> System.Linq;<\/pre>\n
<\/p>\n
   4:<\/span> using<\/span> System.Web;<\/pre>\n
<\/p>\n
   5:<\/span> using<\/span> System.Web.Mvc;<\/pre>\n
<\/p>\n
   6:<\/span><\/pre>\n
<\/p>\n
   7:<\/span> namespace<\/span> WebApplication3.Controllers<\/pre>\n
<\/p>\n
   8:<\/span> {<\/pre>\n
<\/p>\n
   9:<\/span>     public<\/span> class<\/span> IndexController : Controller<\/pre>\n
<\/p>\n
  10:<\/span>     {<\/pre>\n
<\/p>\n
  11:<\/span>         \/\/ GET: Index<\/span><\/pre>\n
<\/p>\n
  12:<\/span>         public<\/span> ActionResult Index()<\/pre>\n
<\/p>\n
  13:<\/span>         {<\/pre>\n
<\/p>\n
  14:<\/span>             return<\/span> View();<\/pre>\n
<\/p>\n
  15:<\/span>         }<\/pre>\n
<\/p>\n
  16:<\/span>     }<\/pre>\n
<\/p>\n
  17:<\/span> }<\/pre>\n
<\/p>\n<\/div>\n<\/div>\n
Langkah selanjutnya akan ditambahkan file view untuk controller ini, dengan cara klik kanan paa folder Index kemudian pilih Add > MVC View Page (Razor) dengan nama Index.<\/p>\n
\"blog11\"<\/a><\/p>\n
Maka dapat dilihat file Index.cshtml.<\/p>\n
\n
\n
   1:<\/span> @{<\/pre>\n
<\/p>\n
   2:<\/span>     Layout = null;<\/pre>\n
<\/p>\n
   3:<\/span> }<\/pre>\n
<\/p>\n
   4:<\/span><\/pre>\n
<\/p>\n
   5:<\/span> <!<\/span>DOCTYPE<\/span> html<\/span>><\/span><\/pre>\n
<\/p>\n
   6:<\/span><\/pre>\n
<\/p>\n
   7:<\/span> <<\/span>html<\/span>><\/span><\/pre>\n
<\/p>\n
   8:<\/span> <<\/span>head<\/span>><\/span><\/pre>\n
<\/p>\n
   9:<\/span>     <<\/span>meta<\/span> name<\/span>=\"viewport\"<\/span> content<\/span>=\"width=device-width\"<\/span> \/><\/span><\/pre>\n
<\/p>\n
  10:<\/span>     <<\/span>title<\/span>><\/<\/span>title<\/span>><\/span><\/pre>\n
<\/p>\n
  11:<\/span> <\/<\/span>head<\/span>><\/span><\/pre>\n
<\/p>\n
  12:<\/span> <<\/span>body<\/span>><\/span><\/pre>\n
<\/p>\n
  13:<\/span>     <<\/span>div<\/span>><\/span><\/pre>\n
<\/p>\n
  14:<\/span>         Hello ASP.NET MVC<\/pre>\n
<\/p>\n
  15:<\/span>     <\/<\/span>div<\/span>><\/span><\/pre>\n
<\/p>\n
  16:<\/span> <\/<\/span>body<\/span>><\/span><\/pre>\n
<\/p>\n
  17:<\/span> <\/<\/span>html<\/span>><\/span><\/pre>\n
<\/p>\n<\/div>\n<\/div>\n
Dan hasilnya dapat dilihat dengan mengetikan alamat berikut pada address bar di web browser : http:\/\/ip_address:port\/Index<\/a><\/p>\n
Selamat mencoba.<\/p>\n","protected":false},"excerpt":{"rendered":"
Dulu ketika hanya ada ASP.NET Web Form, dunia baik-baik saja dan kemudahan dapat dilihat dengan mata dan kemudahan dapat digunakan oleh jari-jari ini :P Kemudian datanglah ASP.NET MVC. Dan dunia seperti terbelah dua #hehehe. Karena saat project dibuat, Visual Studio…<\/p>\n","protected":false},"author":1,"featured_media":1451,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[6],"tags":[68,69,96,108,123],"class_list":["post-1464","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-softwaredev","tag-asp-net","tag-mvc","tag-vs-2013","tag-web-api","tag-web-forms"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.rezafaisal.net\/wp-content\/uploads\/2014\/11\/blog07_thumb.jpg","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p1sNAL-nC","_links":{"self":[{"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/1464","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1464"}],"version-history":[{"count":1,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/1464\/revisions"}],"predecessor-version":[{"id":1465,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/1464\/revisions\/1465"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/media\/1451"}],"wp:attachment":[{"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1464"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1464"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1464"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}