10 Aralık 2013 Salı

Ajax'ın POST methodu ile Web Method Çağırma Iletişim Formu Yollama

Merhabalar fırsat bulmak biraz güç olsa da  ihtiyaç üzerine uygulamış olduğum olayları not edeyim dedim.;


  1.  Girilen karakterin sayı olup olmadığının kontrolü telefonControl() fonksiyonu bunu sağlayacaktır.Benim TextBox'ım Asp.net kontrolü olduğu için Attribute olarak  ( clientidmode="Static" ) eklenmelidir.Jquery'nin kontrolü görebilmesi için eklenmesi gerekir.Telefonda sayısal değer girileceği için sadece sayı girilmesini sağlamış oldum.


  2. $(document).ready(function () {
                $('#telefontxt').telefonControl();
            });
     jQuery.fn.telefonControl = function () {
                return this.each(function () {
                    $(this).keydown(function (e) {
                        var key = e.charCode || e.keyCode || 0;
                        return (
                            key == 8 ||
                            key == 9 ||
                            key == 46 ||
                            (key >= 37 && key <= 40) ||
                            (key >= 48 && key <= 57) ||
                            (key >= 96 && key <= 105));
                    });
                });
            };
    
  3. Email format kontrolü ePostaKont() fonksiyonu parametre bekliyor kontrolü gerçekleştirmek için ve kontrol() fonksiyonunun içerisinde ePostaKont() fonksiyonuna parametre olarak textbox'ın değeri yollanıyor.true ise işleme devam ediyor degil ise textbox'ın hemen yanına "<br/><span class="error">Email formatı doğru değildir.</span>" ekleyecektir.
  4.  function ePostaKont(eposta) {
                var duzenli = new RegExp(/^[a-z]{1}[\d\w\.-]+@[\d\w-]{3,}\.[\w]{2,3}(\.\w{2})?$/);
    
                return duzenli.test(eposta);
            }
    
    function kontrol() {
    
                if (ePostaKont($('#emailtxt').val())) {
                }
                else {
                    $('#emailtxt').after('
    Email formatı doğru değildir.');
    
                }
            }
  5. Fonkiyonumuz button click() olayında işleme tabi tutmuştum. Fonksiyonumuz .error span'ını gizliyor ve kontrol için hasError değerini tanımlıyoruz.textbox'ın değerlerini değişkenlere atıyoruz.Boş olup olmadığının kontrolü ve format kontrolü yapılıyor.$.ajax  içerisinde url methodumuzun bulunduğu sayfayı ve methodun ismini geçiyoruz. data'da ise parametrelerini geçiyoruz, datatype türünü belirtiyoruz. beforeSend(gönderme işlemi gerçekleşirken yaptırılacak işlemler.) içerisinde ise loading resmini gösteriyoruz.complete(İşlem sonunda yapılacak işlemler) içerisinde ise loading resmini gizliyoruz. success(işlem başarılı döner ise yapılacak işlemler) burada textboxların içerisini boşaltıp sonuc id isimli  span'ın içerisine fonksiyon dönüş değerini data.d ile ulaşarak göstermiş olduk ve rengini de ben #f00 (kırmızı yaptım).
  6. function cagir() {
                $(".error").hide();
                var hasError = false;
    
                var isimvalue = $("#isimtxt").val();
    var email= $("#emailtxt").val();
                var telef = $('#telefontxt').val();
    var konu= $('#konutxt').val();
                if (ePostaKont($('#emailtxt').val()) == false) {
                    $('#emailtxt').after('
    Email formatı doğru değildir.');
                    hasError = true;
                }
                if (isimvalue == '') {
                    $("#isimtxt").after('İsim alanı boş bırakılamaz.');
                    hasError = true;
                }
     if (email== '') {
                    $('#emailtxt').after('Telefon alanı boş bırakılamaz.');
                    hasError = true;
                }
    
                if (telef == '') {
                    $('#telefontxt').after('Telefon alanı boş bırakılamaz.');
                    hasError = true;
                }
    if (konu== '') {
                    $('#konutxt').after('Telefon alanı boş bırakılamaz.');
                    hasError = true;
                }
                if (hasError == true) { return false; }
    
                var isim = $('#isimtxt').val();
                var email = $('#emailtxt').val();
                var konu = $('#konutxt').val();
                var telefon = $('#telefontxt').val();
    
                $.ajax({
                    type: "POST",
                    url: "index.aspx/SiziArayalim",
                    data: "{isim:'" + isim + "',email:'" + email + "',konu:'" + konu + "',telefon:'" + telefon + "'}",
                    contentType: "application/json;charset=utf-8;",
                    beforeSend: function () {
                        $('#Resim').show();
                    },
                    dataType: "json",
                    success: function (data) {
                        $('#isimtxt').val("");
                        $('#emailtxt').val("");
                        $('#konutxt').val("");
                        $('#telefontxt').val("");
                        $('#Sonuc').html(data.d).css('color', '#f00');
                    },
                    error: function () {
                    },
                    complete: function () {
                        $('#Resim').hide();
                    },
                });
            }
    
  7. .net tarafına istek yapıldı ve parametreler ile birlikte gelen isteğe işlemler uygulanarak string türünde sonuc değeri döndürüldü.
  8.   
     using System.Web.Services; (namespace eklenmesi gerekiyor.)
     [WebMethod(EnableSession = true)]
        public static string SiziArayalim(string isim, string email, string konu, string telefon)
        {
         //İşlemler
           if (mailsonuc == "OK")
            {
                sonuc = "Mailiniz Başarıyla Gönderildi.";
    
            }
            else
            {
                sonuc = "Mail Gönderilirken Bir Hata Oluştu," +
                 "Mailiniz Gönderilemedi!";
            }
    
    
    
    
            return sonuc;
    
        }
    
Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

0 yorum

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
© 2013 Saygınlık Bilgelikte Gizlidir
Designed by Blog Thiet Ke
Posts RSSComments RSS
Yukarı