NEDEN AJAX? AJAX NEDİR? ÖRNEK PROGRAM KODLARI

           Ajax'ın biz kullanıcılara sağladığı en önemli faydayı kısaca özetleyecek olursak o da şudur:ajax update panel control'ünü kullanarak sayfamızın gereğinden fazla load yapmasını önleyebliriz.
Ajax kullanımadan yapılandırılmış bir Asp.net sayfasında sayfadaki buton,link vs. ye her basılış sırasında sayfa load yapar yani yeniden yüklenir.Bu da hız dan kayıp anlamına gelir.Bana göre Ajax'ın
en büyük getirisi bu olmuştur biz programcılar için öte yandan bir çok farklı özellikleri bünyesinde bulunduran ajax control toolkit sayesinde farklı özellikteki ve de bence daha estetik görünen controlleri
de sayfamızda kullanabilme imkanı sağlıyor bize. 



2-BAZI AJAX KONTROLLERİ VE BUNLARIN KAYNAK KODLARI


a-Accordion Kontrolü:

HTML KODU:

<head runat="server">

    <title>Untitled Page</title>

    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <form id="form1" runat="server">

        <ajaxToolkit:ToolkitScriptManager ID="ScriptManager1" runat="server" />

        <div>

            <ajaxToolkit:Accordion ID="Accordion1" runat="server" FadeTransitions="True" SelectedIndex="0"   HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" AutoSize="None" TransitionDuration="250"

    FramesPerSecond="40"

    RequireOpenedPane="false"

    SuppressHeaderPostbacks="true" Width="450">

            <Panes>

                <ajaxToolkit:AccordionPane id="AccordionPane1" runat="server" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent">

                <Header> AJAX PANE</Header>

                <Content>

                   

                AJAX HAS BEEN KNOW TO ENHANCE USER INTERFACE<br />

                AJAX HAS BEEN KNOW TO ENHANCE USER INTERFACE<br />

                AJAX HAS BEEN KNOW TO ENHANCE USER INTERFACE<br />

                AJAX HAS BEEN KNOW TO ENHANCE USER INTERFACE<br />

                </Content>

                </ajaxToolkit:AccordionPane>

                <ajaxToolkit:AccordionPane id="AccordionPane2" runat="server">

                <Header>MY TEST PANE

                </Header>

                <Content>

                THIS IS JUST A TEST OF PANE CONTENT<br />

                THIS IS JUST A TEST OF PANE CONTENT<br />

                THIS IS JUST A TEST OF PANE CONTENT<br />

                </Content>

                </ajaxToolkit:AccordionPane>

                <ajaxToolkit:AccordionPane id="AccordionPane3" runat="server">

                <Header>THIS IS LAST PANE

                </Header>

                <Content>

                HOPE YOU LIKE WHAT YOU SEE<br />

                THIS IS JUST A TEST OF PANE CONTENT<br />

                HOPE YOU LIKE WHAT YOU SEE<br />

                </Content>

                </ajaxToolkit:AccordionPane>

             </Panes>

               <HeaderTemplate><b>Vendor #<%#DataBinder.Eval(Container.DataItem, "VendorID")%></b>      </HeaderTemplate>    

                <ContentTemplate><%#DataBinder.Eval(Container.DataItem, "Name")%></ContentTemplate>

            </ajaxToolkit:Accordion>

           

        </div>

    </form>




CSS KODU:

            /* Accordion */

.accordionHeader

{

    border: 1px solid #2F4F4F;

    color: white;

    background-color:Black;  /*balk renkleri buradan ayarlanır*/

            font-family: Arial, Sans-Serif;

            font-size: 12px;

            font-weight: bold;

    padding: 5px;

    margin-top: 5px;

    cursor: pointer;

}

 

#master_content .accordionHeader a

{

            color: #FFFFFF;

            background: none;

            text-decoration: none;

}

 

#master_content .accordionHeader a:hover

{

            background: none;

            text-decoration: underline;

}

 

.accordionHeaderSelected

{

    border: 1px solid #2F4F4F;

    color: white;

    background-color: #5078B3;

            font-family: Arial, Sans-Serif;

            font-size: 12px;

            font-weight: bold;

    padding: 5px;

    margin-top: 5px;

    cursor: pointer;

}

 

#master_content .accordionHeaderSelected a

{

            color: #FFFFFF;

            background: none;

            text-decoration: none;

}

 

#master_content .accordionHeaderSelected a:hover

{

            background: none;

            text-decoration: underline;

}


b-Confirm  Button Extender Kontrolü:

HTML KODU:

<form id="form1" runat="server">

        <asp:ScriptManager ID="ScriptManager1" runat="server" />

        <div>

            <asp:TextBox ID="TextBox1" runat="server" Style="z-index: 100; left: 19px; position: absolute;

                top: 49px"></asp:TextBox>

            <asp:Button ID="Button1" runat="server" Style="z-index: 101; left: 200px; position: absolute;

                top: 47px" Text="Button" Height="26px" OnClick="Button1_Click" Width="71px" />

            <asp:Label ID="Label1" runat="server" Height="17px" Style="z-index: 100; left: 21px;

                position: absolute; top: 104px" Text="Label"></asp:Label>

            &nbsp;

              

        </div>

            <cc1:ConfirmButtonExtender ID="ConfirmButtonExtender1" runat="server" ConfirmText="yollansınmı?" TargetControlID="Button1">

            </cc1:ConfirmButtonExtender>

      

    </form>

C# KODU:

  protected void Button1_Click(object sender, EventArgs e)

    {

        Label1.Text = TextBox1.Text;//button1 in confirm text ine mesaj da yazacağın yazıyı yazdırabilirsin.confirmbuttonextender ın targetcontrolid si button1 seçecen

    }

c-Drag Panel Extender Kontrolü:

HTML KODU:

<body>

    <form id="form1" runat="server">

        <asp:ScriptManager ID="ScriptManager1" runat="server" />

        <div>

       

            <asp:Panel ID="anapanel" runat="server" BackColor="Navy" Height="85px" Width="125px" ForeColor="White">

                <asp:Panel ID="başlık" runat="server" BackColor="Yellow" ForeColor="Black">

                    <br />

                    başlık panel</asp:Panel>

               

                <asp:Panel ID="gövde" runat="server" BackColor="Red" ForeColor="Yellow">

                    <br />

                    gövde panel</asp:Panel>

                ana panel</asp:Panel>

            <cc1:DragPanelExtender ID="DragPanelExtender1" runat="server" TargetControlID="anapanel" DragHandleID="başlık">

            </cc1:DragPanelExtender>

        </div>

    </form>

   

    <script type="text/javascript">

   

    function setbodyheighttocontentheight()

    {

    document.body.style.height=Math.max(document.documentElement.scrollHeight,document.body.scrollHeight)

  

   

    }

     setbodyheighttocontentheight();

    window.attachEvent('onresize',setbodyheighttocontentheight);

   

   

    </script>

</body>


ÜCRETSİZ KPSS VİDEO DERSLER, TESTLER BURADA TIKLAYINIZ


BENZER KONULARI SİTE İÇİNDE ARAYIN










  • SİTE İÇİ ARAMA
  • Kariyerdersleri.com
  • KATEGORİLER
  • HAKKIMIZDA
Mutlu olmayı yarına bırakmak, karşıya geçmek için nehrin durmasını beklemeye benzer ve bilirsin, o nehir asla durmaz.
KPSS MATEMATİK KPSS GEOMETRİ KPSS VATANDAŞLIK KPSS TÜRKÇE KPSS TARİH KPSS COĞRAFYA
İNGİLİZCE ALMANCA İTALYANCA KARİYER OYUN BİLGİSAYAR YAZILIM BİLGİSAYAR NETWORK
BİLGİSAYAR DONANIM BİLİŞİM TERİMLERİ CİLT VE CİLT BAKIMI HASTALIKLARIMIZ İNSAN VÜCUDU NEDİR