ASP.NET Haber Bandı

Asp.Net ile JQuery Haber Bandı uygulaması yapacağız  Veri tabanındaki haberleri JQuery ile sitemizde göstereceğiz. Öncelikle kullanacağımız js, resim ve css dosyalarını buradan İndir. SqlDataSource ve Entity kullanarak iki yöntemle işlemi gerçekleştireceğiz. Sonuç aşağıdaki gibi olacaktır.


MakaleDB veritabanında MakaleTablo isimli bir tablo oluşturunuz. id,MBaslik,MDetay alanlarından oluşşun. Şimdi tasarım bölümüne geçip bir Repeater ekliyoruz.

1.SqlDataSource kulllanarak şurada anlatıldığı gibi veritabanı bağlantısını yapınız. Ve şu tasarımı yapınız.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <link href="css/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="Repeater1" runat="server" DataSourceID="SqlDataSource1">
                    <ItemTemplate>
                        <li class="news-item">
                             <a href="MakaleDetay.aspx?Detay=<%#Eval("id") %>">
                                <%# Eval("Mbaslik") %>
                            </a>
                        </li>
                    </ItemTemplate>
                </asp:Repeater>
            </ul>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MakaleDbConnectionString %>" SelectCommand="SELECT * FROM [MakaleTablo]"></asp:SqlDataSource>
        </div>
        <script type="text/javascript">
            $(function () 
            {
                $('#js-news').ticker( titleText: 'Son Dakika..!');
            });
        </script>
    </form>
</body>
</html>
2.Entity ile;
Tasarımımız;
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <link href="css/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="Repeater1" runat="server" >
                    <ItemTemplate>
                        <li class="news-item">
                             <a href="MakaleDetay.aspx?Detay=<%#Eval("id") %>">
                                <%# Eval("Mbaslik") %>
                            </a>
                        </li>
                    </ItemTemplate>
                </asp:Repeater>
            </ul>
        </div>
        <script type="text/javascript">
            $(function () 
            {
                $('#js-news').ticker( titleText: 'Son Dakika..!');
            });
        </script>
    </form>
</body>
</html>
Code Bölümü ise;
    protected void Page_Load(object sender, EventArgs e)
    {
        MakaleDbEntities db = new MakaleDbEntities();
        Repeater1.DataSource = db.MakaleTablo.ToList();
        Repeater1.DataBind();
    }


Etiketler
Haber Jquery Band Entity Data Model
Mesaj Yaz