AspNet (C#) ve Ajax ile login uygulamasi

aspnet
  • Turgay Can
  • Tarih

    08 Dec, 2012
  • Yorum

    0
  • Görüntüleme

    3285
  • İndirme

    85

AspNet (C#) ve Ajax ile login uygulamasi

Merhaba,

Bu aralar MBA programında Asp.Net C# görüyoruz. Derste merak edip güzel bir login formu google üzerinden buldum ve ajax ile bu nasıl yapılır dedim. İlk aşamada Asp.net teknolojilerinde arayüz ve serverside'ın ayrık olmasından ötürü sayfaya arayüzden aldığımız parametreleri nasıl göndereceğiz diye düşünmüştüm yada nasıl bir URL'e post edilecek gibi sorular aklımda belirmişti. Küçük bir araştırma ile Asp.Net'in bize sağladığı en güzel şeyi kolaylaştırması ve bunuda [System.Web.Services.WebMethod] ile metodun üzerinde bir tanımlama yapıyorsunuz ve arayüzden server side (sunucu tarafı) ajax metodumuzun içinde url tanılamasını "orneksayfa.aspx/MetodAd" şeklinde yapıyorsunuz.

Uygulamamıza geçecek olursak.

login.aspx

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Login Page</title>
    <link href="Styles/style.css" rel="stylesheet" type="text/css" />
<%--    <script src="<a href="http://code.jquery.com/jquery-1.8.3.js">
http://code.jquery.com/jquery-1.8.3.js</a>;"></script>--%>
    <script src="js/jquery-1.8.3.js" type="text/javascript"></script>
    <script src="js/login.js" type="text/javascript"></script>
    <script src="js/modernizr.custom.js" type="text/javascript"></script>
</head>
<body>
<section class="main">
                <form class="form-1" id="loginForm" name="loginForm">
                    <p class="field">
                        <input type="text" name="txtUsername" id="txtUsername"
 placeholder="Username  'turgay' ">                        
                        <i class="icon-user"><img src="images/username.png" /></i>
                    </p>
                        <p class="field">
                            <input type="password" name="txtPassword" id="txtPassword"
 placeholder="Password 'pass'">                            
                            <i class="icon-lock"><img src="images/key.png" /></i>
                        </p>
                        <p class="submit">
                            <button type="button" id="btnLogin" name="btnLogin"><img 
src="images/go.png" />
<i class="icon-arrow-right"></i></button>
                        </p>
                        <div id="flashLogin"></div>
                    </form>
                </section>
        </body>
    </html>

login.js

    $(function () {
        $('#btnLogin').click(function () {
            var username = $("#txtUsername").val();
            var password = $("#txtPassword").val();
            if (username.length == 0 || username == '') {
                $('#flashLogin').fadeIn(200).html("<div class='information msg'> 
Kullanici Adi alanını bos birakmayiniz! </div>");
            } else if (password.length == 0 || password == '') {
                $('#flashLogin').fadeIn(200).html("<div class='information msg'>
``Şifre alanını bos birakmayiniz! </div>");
            }
            else {
                $('#flashLogin').show();
                $('#flashLogin').fadeIn(100).html('<img src="images/ajax-loader.gif"
 align="absmiddle">&nbsp;
``<span class="loading">Giris yapiliyor...</span>');
                $.ajax({
                    type: "POST",
                    url: "login.aspx/doLogin",
                    data: "{'username': '" + username + "' , 'password': '" + password + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        $('#flashLogin').fadeOut(50).html('<img src="images/ajax-loader.gif" 
align="absmiddle">&nbsp;
<span class="loading">Giris yapiliyor...</span>');
                        var value = data.d.toString();
                        if (value.indexOf("false") != -1) {
                            $('#flashLogin').fadeIn(100).html("<div class='error msg'>
Kullanici Adi veya Sifre hatali!</div>");
                            $('#txtUsername').val('');
                            $('#txtPassword').val('');
                        } else if (value.indexOf("true") != -1) {
                            $('#flashLogin').fadeIn(200).html("<div class='success msg'>
 Basarili bir sekilde giris yaptiniz.</div>");
                            var t = window.location.toString();
                            var n = t.substr(0, t.toString().length - 10);
                            window.location.href = n + "mypage.aspx";              
                        }
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        $('#flashLogin').fadeIn(100).html("<div class='error msg'>
Beklenmedik Hata olustu!</div>");
                        $('#txtUsername').val('');
                        $('#txtPassword').val('');
                    }
                });
            }
        });
    });

login.aspx.cs

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

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

    }

    [System.Web.Services.WebMethod]
    public static string doLogin(String username, String password)
    {
        if(username.Equals("turgay") && password.Equals("pass"))
            return "true";
        else
           return "false";

    }
}

Uygulama oldukça basit ve anlaşılır olduğu için kod içerisinde detaylı açıklamalar yapmadım.

Arayüz görüntüleri, istemci (client) taraflı ve sunucu(server) taraflı uyarları aşağıdaki gibidir.
www.kodlapaylas.com login
www.kodlapaylas.com login
www.kodlapaylas.com login

0 Yorum..

Yorum yapmak için "Giriş yapın" yada "Misafir üye" olarak yorum yapabilirsiniz.

Yorum Yap