Asp.Net JQuery Haber Bandı

by admin · Kasım 25, 2013

Asp.Net ile JQuery Haber Bandı uygulaması yapacağız http://www.jquerynewsticker.com adresindeki uygulamayı web sitemize nasıl uygulayacağız dinamik veri tabanından haberleri JQuery Haber Bandı uygulamasını sitemize uygulayacağız. İlk olarak http://www.jquerynewsticker.com adresinden gerekli olan dosyaları indirip projemize dahil ediyoruz.

Şimdi tasarım bölümüne geçip bir Repeater ekliyoruz ve görüntülenecek haberleri listeleyecek


                <%# Eval("baslik") %>

komutlarını ekliyoruz…

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>www.aspnetornekleri.com Haber Bandı Uygulaması</title>
    <link href="styles/style.css?v=2011-04-25" rel="stylesheet" type="text/css" />
	<link href="styles/ticker-style.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> 
	<script src="js/jquery.ticker.js" type="text/javascript"></script>
	<script src="js/site.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <ul id="js-news" class="js-hidden">
    <asp:Repeater ID="haberlistesi" runat="server">
        <ItemTemplate>
            <li class="news-item"><a href="#">
                <%# Eval("baslik") %></a></li>            
        </ItemTemplate>
    </asp:Repeater>
</ul>
<script type="text/javascript">
    $(function () {
        $('#js-news').ticker( titleText: 'Son Dakika..!');
    });
</script>
    </div>
    </form>
</body>
</html>

Sayfa tasarımını oluşturduk şimdi veritabanı bağlantısını yaparak JQuery Haber Bandı uygulamasını tamamlıyoruz.

protected void Page_Load(object sender, EventArgs e)
        {
            if (!this.IsPostBack)
            {
                this.icerikdoldur();
            }
        }
        private void icerikdoldur()
        {
            OleDbConnection baglanti = new OleDbConnection("Provider=Microsoft.ACE.OLEDB.12.0; DATA Source=" + Server.MapPath("App_Data/haber.accdb"));
            baglanti.Open();
            //www.aspnetornekleri.com
            OleDbCommand komut = new OleDbCommand("Select baslik,aciklama from haberler", baglanti);
            haberlistesi.DataSource = komut.ExecuteReader();
            haberlistesi.DataBind();
            baglanti.Close();
        }