ASP.NET JQUERY AJAX ile switch buton (aktif pasif) kullanımı

makale.baslik

ASP.NET JQUERY AJAX ile switch buton (aktif pasif) kullanımı

Bu makale ile ASP.NET uygulamalarında AJAX kullanarak switch buton yapımını göreceksiniz.

Projelerinizde özellikle admin sayfasında on/off buton özelliği ekleyerek daha işlevsel siteler yapabilirsiniz. AJAX kullanarak sitelerinizin daha performansı çalışmasını sağlayabilirsiniz.

Örnek yapıda sayfamızdaki checkbox’ları CSS ile switch buton görünümü vererek kullanacağız.

Öncelikle verileri sıraladığımız tablomuzu hazırlıyoruz verileri gösterirken checkbox lara id leri veriyoruz.

İşlem sonucunu göstermek için tablodan sonra id’si sonuc olan h2 tagı ekledim.

Default.aspx kodları şu şekilde:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link href="assets/bootstrap.min.css" rel="stylesheet" />
    <script src="assets/jquery.min.js"></script>
    <link href="assets/switch.css" rel="stylesheet" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div class="col-md-4">
            <table class="table">

                <tbody>
                    <tr>
                        <th>No</th>
                        <th>Başlık</th>
                        <th>İçerik</th>
                        <th>Durum</th>

                    </tr>

                    <tr>
                        <td>1</td>
                        <td>Başlık1</td>
                        <td>Lorem ipsum dolor sit amet</td>
                        <td>
                            <label class="switch">
                                <input type="checkbox" id='1' class="aktifPasif" />
                                <span class="slider round"></span>
                            </label>
                        </td>

                    </tr>


                    <tr>
                        <td>2</td>
                        <td>Başlık2</td>
                        <td>Lorem ipsum dolor sit amet</td>
                        <td>
                            <label class="switch">
                                <input type="checkbox" id='2' class="aktifPasif" />
                                <span class="slider round"></span>
                            </label>
                        </td>

                    </tr>


                    <tr>
                        <td>3</td>
                        <td>Başlık3</td>
                        <td>Lorem ipsum dolor sit amet</td>
                        <td>
                            <label class="switch">
                                <input type="checkbox" id='3' class="aktifPasif" />
                                <span class="slider round"></span>
                            </label>
                        </td>

                    </tr>


                    <tr>
                        <td>4</td>
                        <td>Başlık4</td>
                        <td>Lorem ipsum dolor sit amet</td>
                        <td>
                            <label class="switch">
                                <input type="checkbox" id='4' class="aktifPasif" />
                                <span class="slider round"></span>
                            </label>
                        </td>

                    </tr>


                    <tr>
                        <td>5</td>
                        <td>Başlık5</td>
                        <td>Lorem ipsum dolor sit amet</td>
                        <td>
                            <label class="switch">
                                <input type="checkbox" id='5' class="aktifPasif" />
                                <span class="slider round"></span>
                            </label>
                        </td>

                    </tr>


                </tbody>
            </table>
            <h2 id="sonuc"></h2>
        </div>
    </form>
    <script src="assets/custom.js"></script>
</body>
</html>

 

Daha sonra Jquery kodlarımızı yazdığımız açılamalarda içinde olan custom.js dosyasının kodları şu şekilde olacak:


$(document).ready(function () {
    $('.aktifPasif').click(function (event) {
        var id = $(this).attr("id");  //id değerini alıyoruz

        var durum = ($(this).is(':checked')) ? '1' : '0';
        //checkbox a göre aktif mi pasif mi bilgisini alıyoruz.

        $.ajax({
            type: 'POST',
            url: 'aktifPasif.aspx/AktifPasif',  //işlem yaptığımız sayfayı belirtiyoruz
            data: '{ id:' + id + ',durum:' + durum + '}', //datamızı yolluyoruz
            contentType: 'application/json; charset=utf-8', 
            dataType: 'json',
            success: function (result) {
                $('#sonuc').text(result.d);
                //gelen sonucu h2 tagında gösteriyoruz
            },
            error: function () {
                alert('Hata');
            }
        });

    });
});

 

Jquery ile gönderdiğimiz verileri işlediğimiz ve geriye değer döndürdüğümüz aktifPasif.aspx sayfanın kodları da şu şekilde olacak.


using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class admin_Default4 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    [System.Web.Services.WebMethod]
    public static string AktifPasif(string id, char durum)
    {
        //değerleri alıp kullanıp geriye değer döndürüyoruz.

        string sonuc="";

        if (durum == '0')
        {
            sonuc = id + " numaralı kayıt kapandı";
        }
        else if (durum == '1')
        {
            sonuc = id + " numaralı kayıt açıldı";
        }

        return sonuc;
    }
}

Sizde bu uygulamayı kullanıp sayfalarınızda AJAX ile çok işlevsel uygulamalar geliştirebilirsiniz.

Uygulama dosyalarını  indirmek için: aktifPasif.zip

 
Paylaş:

Yorumlar

    Bu yazı için hiç yorum yok. İlk yorumu yapmak ister misiniz?

Kategoriler

En çok okunan yazılar.

 Etiketler