eray aydoğdu

jQuery and ASP.NET MVC fanatic.

Asp.Net MVC ve Jquery Mobile ile Mobil Uygulama

Akıllı telefonlar ve tabletler gibi mobil platformların kabiliyetlerinin güçlenmesiyle uygulama geliştiriciler için her geçen gün daha önemli hale gelmeye başladı.  JQuery Mobile mobil platformlarda kolayca uygulama geliştirmemizi sağlayan bir framework. Asp.Net MVC 2 (HTML 5) ve Jquery Mobile kullanarak çok basit bir mobil uygulama yapalım.

Visual Stduio 2010 yeni bir proje oluşturduğumuz default olarak XHTML 1.0 dökümanı olarak oluşturur. Bunun yerine default template olarak HTML5 dökümanı oluşturmasını sağlayabilirsiniz. Google da biraz aramayla halledebilirsiniz. Ben şimdi manuel olarak HTML5 e çevireceğim.

Not: Uygulamayı MVC 2 de yapacağız ancak MVC 3 te de çalışacaktır. Ayrıca şuan JQuery Mobile Alpha 2 release ini kullanıyoruz. İleride bu framework oturduğunda bazı şeyler değişebilir.

Yeni bir Visual Studio 2010 projesi oluşturalım (ASP.NET MVC 2 Empty Web Application)

Views\Shared klasörüne ViewMasterPageMVCMobile.master adında bir Master Page ekleyelim.

Controllers klasörüne de HomeController ımızı açalım. Açılan Controller ‘ın içinde gelen Index Action’ına View ekleyelim. Ancak master page ini ViewMasterPageMVCMobile.master seçmeyi unutmayalım.

ViewMasterPageMVCMobile.master sayfanızı aşağıdaki kodlarla değiştirin.

<!DOCTYPE html>
<html lang="en-us" >
<head runat="server">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
 <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
 <div data-role="page">
   <div data-role="header">
    <h1><asp:ContentPlaceHolder ID="PageTitleContent" runat="server" /></h1>
   </div>
   <div data-role="content">
     <asp:ContentPlaceHolder ID="MainContent" runat="server" />
   </div>
   <div data-role="footer">
     Footer
   </div>
 </div>
</body>
</html>

Jquery, Jquery Mobile ve CSS kütüphanelerini Jquery CDN sinden çağırarak kullandım ancak isterseniz indirip projenizin içinden de çağırabilirsiniz.

Döküman dan Jquery Mobile framework ünün sayfa yapısı hakkında daha geniş bilgiye ulaşabilirsiniz.

Şimdi Index view imizi oluşturalım aşağıdaki gibi kolay bir kod bloğu ekleyelim.


<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/ViewMasterPageMVCMobile.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
MVC Mobile
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="PageTitleContent" runat="server">
Page Title Goes Here
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
This is the main content
</asp:Content>

Şimdi projeyi çalıştırabiliriz. Yalnız proje IE7 de çalışmıyor. IE8 yada IE9 da denemedim. Chrome, Firefox ve Safari de gayet güzel ekran boyutunu küçülterek deneyebilir yada mobil platformdan bağlanırsanız, Jquery Mobile ın her telefon için farklı çalışarak sorunsuz entegre olabildiğini göreceksiniz.

MVC 3 Custom Helper Yaratmak

HTML helper lar viewlerimizi karışık programatik kodlardan kurtarark temiz ve sade bir görünüm kazanmasını sağlar. System.Web.Mvc.HtmlHelper class’ında birçok HTML helper bulunmakta ancak biz kolayca kendi helper ımızı yaratacağız. MVC 1 kullanırken extension methodlar kullanarak kendi helper’larımızı oluşturabiliyorduk. Ancak şimdi Razor view engine ‘nin yeni özelliği olan @helper keyword ‘ünü kullanarak bu işlemi ne kadar kolay yapacağımızı göreceğiz.

Extension Method helpers

Asp.Net MVC ‘nin önceki sürümlerinde HtmlHelper class ına extension methodlar yazmamıza izin veriyordu. MVC 3 te de bunu yapabiliyoruz. Helper lar sadece string döndüren birer methodlardır, bu yüzden çok basitler. MVC Music Store örneğinden yola çıkalım. Uzunluğunu verdiğimiz string değeri kesen bir truncate helperı yapalım.

Extension method un static class olması gerekiyor ve genellikle proje yapısından farklı bir klasöre ayırmakta fayda var.

Kod standart extension method mantığında. İlk parametre olan this keyword u bunun bir HtmlHelper uzatması olduğunu belirtiyor. Diğerleri basit string döndürmek için. Method bir string ve uzunluk alıyor. Eğer string uzunluktan fazla ise uzunluğu kırpıp string i geri döndürüyor.

using System.Web.Mvc;
namespace MvcMusicStore.Helpers
{
public static class HtmlHelpers
{
public static string Truncate(this HtmlHelper helper, string input, int length)
{
if (input.Length <= length)
{
return input;
}
else
{
return input.Substring(0, length) + "...";
}
}
}
}

Not: Uzatmasını yaptığımız HtmlHelper System.Web.WebPages ta değil System.Web.Mvc de tanımlandığından emin olalım. Bu ifade önemli.

Yeni yarattığımız helper namespace'sini ister web.config dosyasında tanımlayarak tüm viewlerde kullanabilirsiniz, isterseniz de razor view engine in özelliği olan @using keyword ü ile sadece o sayfada tanımlayabilirsiniz.

Şimdi yazdıklarımızı deneleyim default olarak gelen index sayfasında deneyeceğiz.

@{
ViewBag.Title = "Home Page";
}
@using RazorHelpers.Helpers
<h2>@Html.Truncate(ViewBag.Message as string, 8)</h2>

Dikkat edilecek bir noktada burada ViewBag.Message ı string olarak cast etmeliyiz. Aksi takdirde sayfa render  olurken compiler hatası alabiliriz.

Alternatif olarak istersek web.config dosyasındaki pages>namespace lere eklersek @using keyword ü ile tanımlamadan kullanabiliriz.

Inline Razor Helper

Razor da inline helper yapmak için sadece @helper bloğu açmak yeterli.

@{
ViewBag.Title = "Home Page";
}
@helper TruncateString(string input, int length)
{
if (input.Length <= length) {
@input
} else {
@input.Substring(0, length)<text>...</text>
}
}
<h2>@Truncate(ViewBag.Message, 8)</h2>

Kod çok basit ancak bir kaç farklılık var,

  • Razor syntax ına göre method adıyla dönüş tipi bitişik yazılıyor.
  • this HtmlHelper gibi işlere girmemize gerek yok çünkü bir extension method değil.
  • Input u string e çevirmek zorunda değiliz Razor engine bunu ayırt edebiliyor.
  • Extension method olmadığı için diren @Truncate() olarak kullanabiliyoruz, @Html.Truncate() yazmamıza gerek yok.

İhtiyaçlarınıza göre helper lar yazarak, geliştirerek kendine ait güçlü kolay ve kullanışlı bir helper kütüphanesi oluşturabilirsiniz.

 

WordPress Son Yazıları Asp.NET MVC ‘de Göstermek

Bir önceki yazımızda Asp.net MVC ile WordPress i nasıl birlikte çalıştırmayı öğrenmiştik. Bu yazımızda da WordPress e eklenen son yazıları Asp.net MVC uygulamasına nasıl çekeceğimizi göreceğiz. Aslında bu birlikte çalışan değil tüm wordpress sitelerden nasıl çekeceğimizi gösteren bir örnek olacak. Çünkü Son Yazılar kısmını ilgili wordpress in Databaseinden değil RSS ‘inden parse ederek çekeceğiz. Dolayısıyla altyapısı wordpress ve RSS yayını yapan her siteden çekebiliriz. Çok fazla uzatmadan kodlara geçelim.

Projemize;

using System.Xml;
using System.ServiceModel.Syndication;

namespacelerini çağıralım.

BlogBox.ascx adında bir ViewUserController oluşturalım ve ardından aşağıdaki Action kodlarını yazalım.

public ViewResult BlogBox()
{
var reader = XmlReader.Create(“http://erayaydogdu.com/feed“);
var feed = SyndicationFeed.Load<SyndicationFeed>(reader);
return View(feed);
}

XML i oluşturup SyndicationFeed.Load() methoduyla feed değişkenine atayıp feed i View in Modeline gönderiyoruz.

Şimdi View i oluşturalım.

<%@ Control Language=”C#” Inherits=”System.Web.Mvc.ViewUserControl<System.ServiceModel.Syndication.SyndicationFeed>” %>
<span>Blog’tan</span>
<ul>
<%foreach (var item in Model.Items.Take(5))
{%>
<li>
<a href=”<%=item.Links.First().Uri.AbsoluteUri%>><%=item.Title.Text %></a>
</li>
<%} %>
</ul>

View de ilk 5 Tanesini <li> lere yazdırdık. Property lerini inceleyerek daha detaylı veriler elde edebiliriz. Biraz araştırarak kendine göre geliştirebilirsiniz.

Asp.Net MVC ile WordPress Birlikte Çalıştırma

Asp.net mvc uygulamasının içerisinde wordpress blogunu entegre ederek çalıştırabiliriz. Dikkat etmemiz gereken bir kaç detay dışında son dönemlerde microsoft’un php’ye gösterdiği ilgilinin artmasıyla windows server lar üzerinde bunu yapmak oldukça kolay.

Aslında Asp.Net ve PHP iis6 ve iis7 üzerinde de birlikte çalışabiliyor. Ben iis6 üzerinde yaşadığım sorunu anlatarak iis7 de neler yapmamız gerektiğini ve en verimli çalışma performansını iis7 de iken aldığım için sizede iis7 üzerinde yayınlamınızı şiddetle öneririm.

IIS6 da php çalıştırabiliyoruz ancak bildiğimiz gibi windows server larda .htaccess dosyası yok ve ihtiyacımız olan google dostu url ler üretebilmemiz için birkaç ayar yapmamız gerekiyor. Dolayısıyla bu ayarları yapamadığımız için iis6 da yayın yapan wordpress uygulamasının url’sinde geçen /index.php den bir türlü kurtulamıyoruz. WordPress yapısını çok seven google için olsun veya çok esnek olan wordpress yapısında sınırlandığımız için ben hiç hoşlanmadım. Performans açısından da bazı sıkıntılar çıkartabiliyor. O yüzden iis6’da macera aramaya gerek görmeyelim derim.

Şimdi bu iki projeyi nasıl birleştireceğimize gelelim.

Hali hazırda bulunan mvc uygulamasının içerisinde blog diye bir klasör açalım.(menü’ye Blog diye bir kategori ekleyeceğimizi varsayıyorum. Eğer farklı bir isim vermek isterseniz elbette yapabilirisiniz.)

Gördüğünüz gibi normal projemin içerisinde blog adında bir klasör açtım ve içerisine wordpress dosyalarımızı attık. Burada WordPress in kurulumunu anlatmayacağım eğer istek olursa onuda farklı bir yazıda anlatabilirim. Ayarlarını yapıldığını varsayalım şimdilik ve bir sonraki adıma geçelim.

Bizim asp.net mvc uygulamasını çalıştırdığımızda içerisinde wordpress uygulamasının da çalışmasını istediğimizden oluşturduğumuz klasör ile aynı isimde menümüze bir bir kategori ekliyoruz.

Oluşturduğumuz menüye blog adında bir kategori ekledik ancak url’sini “/blog” olarak vermeliyiz.

Daha sonra Global.asax dosyasını açıyoruz ve RegisterRoutes methodunun en başına aşağıdaki kodları ekliyoruz.

routes.IgnoreRoute(“blog”);
routes.IgnoreRoute(“blog/*”);

Bu kodlar MVC projemize gelen “blog” isteğini contoller olarak algılamasın diye reddettiğimiz istekler.Yani siteadi.com/blog diye bir istek geldiğinde MVC yapısı gereği bunu ilgili route’a yönlendirmesi yerine bunu yoksaymasını belirtiyoruz. Böylece blog klasörünü MVC RouteCollection dan çıkardığımız için blog klsöründeki Worpress PHP kodları çalışmaya başlıyor. Denemek için blog klasörüne herhangi bir html dosyası atabilirsiniz. İçerisinde Merhaba yazan bir index.html atıp test edebilirsiniz.

Bu işlemler sonucunda Her iki dilde geliştirilmiş olan projeleri aynı proje içerinde entegre olarak çalıştırabilirsiniz. Bir sonraki yazımda Asp.Net MVC uygulamasında bir wordpress sitesinin en son post larını rss reader ile nasıl çekebileceğimize değineceğiz.