JQueryUI Model İle Mvc AJax Loader

Web uygulamalarında asenkron^ajax işlemler yapılırken kullanıcıya durum boyunca bilgi vermenin 500 farklı yolu mutlaka vardır. Lakin en temiz olanı, tüm ekranı kapatıp tam ortada bildirimi yapmakmış gibi gözüküyor. Bunun en büyük avantajı "istenmeyen tıklamalar" dan korunmak olarak izah edebilir.

Bunun için JQueryUI eleman^Widget larından Dialog'u kullanacağız. Hali hazırda MVC Proje Template içinde bulunduğu için işimiz gayet kolay olacak.

_Layout ile başlayalım;

Head içine sırası ile css ve js dosyalarını ekleyelim.

<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.18.min.js")" type="text/javascript"></script>

Dialog açıldığında kullanıcı tarafından kapatılmasını engellemek için sağ üst köşedeki "x" kapatı işaretini kaldıralım.

<style type="text/css">
.ui-dialog-titlebar-close {
    display: none;
}
</style>

Dialog için kullanılacak div tanımını yapalım.

<div id="dialog-modal" title="Bilgilendirme">
    <p>
        <img src="/Content/images/loading.gif" style="vertical-align: middle;" />
        işlem yapılıyor ...
    </p>
</div>

Div' i Dialog haline getirelim.

<script type="text/javascript">
    $(function () {
        $("#dialog-modal").dialog({
            autoOpen: false,
            modal: true,
            height: 100,
            closeOnEscape: false,
            draggable: false,
            resizable: false
        });
    });
</script>

Son olarak, çağrıda bulunacak alt sayfaların da kendi script bloklarını yazacakları Section'ı tanımlayalım.

@RenderSection("script", false)

Alt sayfalardaki script alanına iki adet fonksiyon^function ekliyoruz. Asenkron işlem başladığında ve bittiğinde Dailog açılacak ve kapanacak.

<script type="text/javascript">
    function start() {
        $("#dialog-modal").dialog('open');
    }
    function finish() {
        $("#dialog-modal").dialog('close');
    }
</script>

AjaxOptions nesne^class sini de tanımlarsak işlem tamamlanmış olacak.

@using (Ajax.BeginForm("Index", "Home", new AjaxOptions
{
    HttpMethod = "post",
    OnBegin = "start",
    OnSuccess = "finish"
}))
{

Mvc İle Asenkron İşlem Yapmak

Mvc uygulamalarında Asenkron^Asynchronous işlem yapmak için ya Jquery yada Ajax Helper kullanmak gerekir (genelde). Jquery ile ilgili kaynak bulmak kolay iken Ajax Helper için pek de kolay değil. O yüzden bugün biraz araştırma yapma gereği hissettim.

Burada karşımıza iki adet metot^method çıkıyor;

1. Ajax.ActionLink
2. Ajax.BeginForm

Yaptıkları farklı olasada çalışma prensipleri aynı diyebilirim. Çünkü burada esas oğlan AjaxOptions nesnesi :)

BeginForm için basit bir örnek yapalım ve daha sonrasında ActionLink ile detayara bakalım.

Ortak kullanım için bir nesne^class oluşturalım;

[Serializable]
public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
}

Formu post edeceğimiz Action Method;

[HttpPost]
public string Create(Product product)
{
    //olaylar olaylar
    return "Ürün eklendi.";
}

Son olarak View formu oluşturalım;

@*Asenkron çalışması için gerekli script dosyaları*@
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>
@using (Ajax.BeginForm("Create",//Controller deki metot adı
                        new AjaxOptions
                        {
                            //form method
                            HttpMethod = "post",
                            //sonuç önceki ile yer değişiyor
                            InsertionMode = InsertionMode.Replace,
                            //işlem süresince çalışacak element id
                            LoadingElementId = "loader",
                            //işlem sonucunun gösterileceği element id
                            UpdateTargetId = "result"
                        }))
{

    <fieldset>
        <legend>Ürün</legend>
        @*Asenkron işlem sırasında kullanıcıya bilgi vermek için*@
        <div id="loader" style="display: none;">İşlem yapılıyor...</div>
        <div class="editor-label">
            Ad
        </div>
        <div class="editor-field">
            <input type="text" name="Name" />
        </div>
        <div class="editor-label">
            Fiyat
        </div>
        <div class="editor-field">
            <input type="text" name="Price" />
        </div>
        <p>
            <input type="submit" value="Ekle" />
        </p>
        @*İşlem sonucunda kullanıcıya bilgi vermek için*@
        <div id="result" style="color: maroon;"></div>
    </fieldset>
}

Peki sunucu^serverdan gelecek olan veri daha karmaşık olursa ne yapacağız. Örneğin JSON formatında Product nesnesini döndürmek isteyebiliriz. İşe bu gibi durumlarda AjaxOptions nesnesinin aşağıdaki  özellikleri^Property ni kullanmak gerekir.

Çalışma sırasına göre;

1. OnBegin(xhr, context)
2. OnSuccess(result, status, xhr)
3. OnComplete(xhr, status)
4. OnFailure(xhr, status, error) (tabi hata olursa)

 Yeni bir Action Method ekleyelim;

[HttpPost]
public JsonResult GetProduct(int Id)
{
    return Json(new Product
                {
                    Id = Id,
                    Name = string.Concat("Ürün ", Id),
                    Price = Id * 12
                });
}

Çağrıda bulunmak için de Ajax.ActionLink kullanalım;

@Ajax.ActionLink("Ürün Detay",
                 "GetProduct",
                 new { Id = 1 },
                 new AjaxOptions
                 {
                     HttpMethod = "post",
                     OnComplete = "complete",
                     OnFailure = "fail",
                     OnBegin = "begin",
                     OnSuccess = "success"
                 })
<script type="text/javascript">
    function begin(xhr, content) {
        //olaylar
    }
    function success(result, status, xhr) {
        //olaylar
    }
    function complete(xhr, status) {
        //olaylar
    }
    function fail(xhr, status, error) {
        //olaylar
    }
</script>

 İşlem başarılı olduğunda sırası ile begin -> success -> complete fonksiyonları çalışır. Sonuçlar ise;

result

status

xhr

Başarısız olduğunda ise begin -> fail fonksiyonları çalışır. Sonuçlar ise;

xhr

status

error

Excel Veri Okuma

Bu aralar Excel ile haşır ve neşir oluyorum. Bu sebepten dolayı Excel dosyasından veri okuyabilmek için küçük çapta bir Kütüphane^Library yazdım.

Kütüphane, eski ve yeni Excel dosya formatları için seçenek sunmanın dışında dosya içindeki Sheet^Sayfa leri ve sayfa içlerindeki Sütun^Column ları da listeleyebiliyor.

string ConnectionBuilder()
{
    return string.Format(
        ConnectionString,
        IsOldExcel ? "Microsoft.Jet.OLEDB.4.0" : "Microsoft.ACE.OLEDB.12.0",
        ExcelFilePath,
        IsOldExcel ? "8.0" : "12.0"
        );
}

Note: Eğer "'xxxxxx' provider is not registered on the local machine." gibi bir hata alırsanız, gerekli Provider^Sağlayıcı Component^Bileşen leri yüklemeniz gerekir. Örnek

Proje dosyası.

Mvc ile Asenkron Recaptcha Kullanımı

Lafı çok uzatmadan hemen konuya gireyim. Bir Formum var aman robotlar,örümcek vs uzak dursun. Olay bu :)

Latife bir yana bu gibi durumlarda GDI+ ile ya kendin yazıp çezeceksin (son zamanlarda yaptığım mülakatlarda bir çok .Net yazılım uzmanının GDI+ bilmediğini farkettim) yada Google reCAPTCHA kullanacaksın.

Bugün yapacağımız örnek Asenkron^AJAX post edilen bir form içinde reCAPTCHA kullanmak olacak. Adım adım ilerleyelim;

1. Şu adresten kayıt olun ve uygulama geliştireceğiniz domaini kaydedin.

2. Bu adresten ise dll dosyasını indirin ve projenize referans olarak ekleyin.

3. Asenkron post işlemi yapan basit bir form oluşturun.

İşlemlerin asenkron olması için aşağıdaki iki script dosyasını ekleyin.

<script src="@Url.Content("~/scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>

Asenkron çalışabilmesi için Formu yapılandırın.

@using (Ajax.BeginForm("Write",
                    new AjaxOptions
                    { HttpMethod = "post",
                      InsertionMode = InsertionMode.Replace,
                      UpdateTargetId = "result",
                      OnSuccess = "ok"
                    })){

Talep ettiğiniz verileri toplamak için gerekli kontrolleri ekleyin.

<h2>
    Ad</h2>
<input name="txtAd" type="text" id="txtAd">
<h2>
    Email</h2>
<input name="txtMail" type="text" id="txtMail">
<h2>
    Yorum</h2>
<textarea name="txtYorum" type="text" id="txtYorum"></textarea>

domaini kayıt ettiğinizde size verilen Public^Genel ve Private^Özel Key^Anahtar' leri ekleyin.

 @{
    Recaptcha.RecaptchaControlMvc.PublicKey = "65rFtgj00--------------";
    Recaptcha.RecaptchaControlMvc.PrivateKey = "65rFtgj01------------";
}

Ardından reCaptcha kontrolünü ekleyin.

@Html.Raw(//üretilen htmli render etmek için
	Recaptcha.RecaptchaControlMvc.GenerateCaptcha(
	Html,
	"id",
	"clean"//theme -> varsayılan red
))

Formu tamamlayın.

 <p style="font-style: italic; color: Red; margin: 2px; padding: 2px;">
	<span id="result"></span>
 </p>
 <input name="" type="submit" id="btn_gonder" value="Gönder">
}

İşlem sonucunda yeniden reCaptcha üretmek için aşağıdaki js fonksiyonunu ekleyin.

<script type="text/javascript">
    function ok() {
        $("#recaptcha_response_field").val("");
        Recaptcha.reload();
    }
</script>

4. Sunucu tarafında doğrulama işlemini yapın

[Recaptcha.RecaptchaControlMvc.CaptchaValidator]
[HttpPost]
public string Write(string txtAd, string txtMail, string txtYorum, bool captchaValid)
{
    if (captchaValid)
    {
        //olaylar olaylar
        return "Yorumunuz onaylandıktan sonra yayınlanacaktır.";
    }
    else
        return "Resimdeki karakterleri (doğru) girin !";
}

Örnek proje (yakında)

Remote Server File Upload

Bazen geliştirdiğimiz web uygulamasının yönetim paneli uygulama ile aynı proje (application) içinde yer almayabilir. Yönetim paneli bir subdomain altında farklı bir uygulama olarak geliştirilmek istenebilir yada başka bir teknoloji ile yazılmış mevcut uygulamaya panel yazıyor olabilirsiniz. Bu tip durumlarda ki en kronik problem kaynak(Resim, pdf, zip vs) yönetimidir.

Bunun sebebi de dosyayı kaydedebilecek kesin olan^{Absolute Path} dosya yolunu elde edilememesidir. Server.MapPath, sadece içinde bulunduğunuz proje ile ilgili bilgiler verebilir.

Yapılması gereken Uzak Sunucu^{Remote Server} ya bağlanıp belirtilen klasöre dosyayı upload etmektir. Bunun için en uygun (bence) System.Net namespace'i altında bulunan WebClient adlı nesnesi kullanmaktır.
Aşağıda iki örnek hazırladım.

Klasik Asp.Net uygulama örneği;

//dosya içeriği
byte[] temp = FileUpload1.FileBytes;
//dosya adı
string name = FileUpload1.FileName;
//sunucu adresi
string path = "ftp://ayrilmaz.com/ress/";
WebClient wc = new WebClient();
//ftp -> kullanıcı adı ve parola
wc.Credentials = new NetworkCredential("username", "password");
wc.UploadData(
    string.Concat(path, name)
    , temp);

Asp.Net MVC uygulama örneği;

//post edilen koleksiyon içindeki file input
HttpPostedFileBase file = Request.Files["pfile"];
//dosya içeriği için byte dizisi
byte[] temp = new byte[file.ContentLength];
//diziye dosya içeriği aktarılıyor
file.InputStream.Read(temp, 0, temp.Length);
//dosya adı
string name = file.FileName;
//sunucu adresi
string path = "ftp://ayrilmaz.com/ress/";
WebClient wc = new WebClient();
//ftp -> kullanıcı adı ve parola
wc.Credentials = new NetworkCredential("username", "password");
wc.UploadData(
    string.Concat(path, name)
    , temp);

WebClient nesnesi sadece dosya yüklemek için değil network^Ağ ile ilgili pek çok dosya işlemi için de kullanılabilir.