All for One, One ASP.NET | M Reza Faisal

reza

full-time(software-developer,lecturer); part-time(traveller, food-tester);

All for One, One ASP.NET

Nov 13, 2014 by     No Comments    Posted under: I am Software Developer

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

blog01

Tapi itu duluuuuuuuuuu…..

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).

Untuk membuat ASP.NET web application dengan Visual Studio 2013 diberikan sebuah template project saja, seperti yang terlihat pada gambar ini.

blog02

Setelah memilih ASP.NET Web Application dan tombol OK diklik maka akan ditampilkan window opsi selanjutnya, seperti gambar di bawah ini.

blog03

Jika memilih template “Empty” seperti gambar di atas, maka dapat dilihat pada checkbox “Add folders and core reference for” dapat dicentang ketiganya.  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”.

Bagaimana jika pada template dipilih “Web Forms”  atau MVC?

blog04 blog05

blog06

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.

Nah paparan di atas memberikan sedikit gambaranan tentang One ASP.NET. 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.

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

Setelah project dibuat maka dapat dilihat struktur folder seperti berikut ini (lihat Solution Explorer).

blog07

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.

image

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

{Web Forms}

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

blog07

Berikut ini isi file HelloWebForm.aspx

   1: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HelloWebForm.aspx.cs" Inherits="WebApplication3.HelloWebForm" %>

   2:

   3: <!DOCTYPE html>

   4:

   5: <html xmlns="http://www.w3.org/1999/xhtml">

   6: <head runat="server">

   7:     <title></title>

   8: </head>

   9: <body>

  10:     <form id="form1" runat="server">

  11:     <div>

  12:         <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

  13:     </div>

  14:     </form>

  15: </body>

  16: </html>

dan berikut ini adalah isi file HelloWebForm.aspx.cs

   1: using System;

   2: using System.Collections.Generic;

   3: using System.Linq;

   4: using System.Web;

   5: using System.Web.UI;

   6: using System.Web.UI.WebControls;

   7:

   8: namespace WebApplication3

   9: {

  10:     public partial class HelloWebForm : System.Web.UI.Page

  11:     {

  12:         protected void Page_Load(object sender, EventArgs e)

  13:         {

  14:             Label1.Text = "Hello Web Form";

  15:         }

  16:     }

  17: }

Kemudian klik kanan pada file tersebut dan pilih View in browser, dan dapat dilihat halaman web form ini dapat dijalankan dengan lancar :)

{Web API}

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.

blog08

Berikut ini isi dari file HelloController.

   1: using System;

   2: using System.Collections.Generic;

   3: using System.Linq;

   4: using System.Net;

   5: using System.Net.Http;

   6: using System.Web.Http;

   7:

   8: namespace WebApplication3.Controllers

   9: {

  10:     public class HelloController : ApiController

  11:     {

  12:         // GET api/<controller>

  13:         public IEnumerable<string> Get()

  14:         {

  15:             return new string[] { "Hello", "Web", "API" };

  16:         }

  17:

  18:         // GET api/<controller>/5

  19:         public string Get(int id)

  20:         {

  21:             return "Hello Web API";

  22:         }

  23:

  24:         // POST api/<controller>

  25:         public void Post([FromBody]string value)

  26:         {

  27:         }

  28:

  29:         // PUT api/<controller>/5

  30:         public void Put(int id, [FromBody]string value)

  31:         {

  32:         }

  33:

  34:         // DELETE api/<controller>/5

  35:         public void Delete(int id)

  36:         {

  37:         }

  38:     }

  39: }

Untuk mengujinya dapat menggunakan web browser, pada address bar tuliskan alamat dengan pola seperti berikut ini : http://ip_address:port/api/Hello maka akan didapat respon berupa format JSON seperti berikut ini :

   1: ["Hello","Web","API"]

{MVC}

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.

blog09

Berikan nama IndexController untuk controller tersebut :

blog10

Setelah tombol Add diklik maka dapat dilihat file IndexController pada folder Controllers dan secara otomatis dibuatkan folder Index pada folder Views.

   1: using System;

   2: using System.Collections.Generic;

   3: using System.Linq;

   4: using System.Web;

   5: using System.Web.Mvc;

   6:

   7: namespace WebApplication3.Controllers

   8: {

   9:     public class IndexController : Controller

  10:     {

  11:         // GET: Index

  12:         public ActionResult Index()

  13:         {

  14:             return View();

  15:         }

  16:     }

  17: }

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.

blog11

Maka dapat dilihat file Index.cshtml.

   1: @{

   2:     Layout = null;

   3: }

   4:

   5: <!DOCTYPE html>

   6:

   7: <html>

   8: <head>

   9:     <meta name="viewport" content="width=device-width" />

  10:     <title></title>

  11: </head>

  12: <body>

  13:     <div>

  14:         Hello ASP.NET MVC

  15:     </div>

  16: </body>

  17: </html>

Dan hasilnya dapat dilihat dengan mengetikan alamat berikut pada address bar di web browser : http://ip_address:port/Index

Selamat mencoba.

Got anything to say? Go ahead and leave a comment!

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Fotolia

Fotolia

ShutterStock


Fotolia
© 2013 eSevens
%d bloggers like this: