Başlangıç

Visual Studio 2013 Asp.NET ile css açılır menü yapma (html5, mysql veritabanı ve datarepeater kullanarak)

Yorum bırakın


Önce Mysql kullanabilmek için gerekli eklemeleri yapın.

Nasıl olduğunu okumak için tıklayın.

Daha sonra ilgili veritabanını mysql ile oluşturun. Ayarları yaptınız ise sql dosyası örneği aşağıdaki rar dosyasında vardır.

Nasıl ayarlandığını okumak için tıklayın.

2015-08-21 01-09-24 Ekran görüntüsü

İstediğiniz bir css menüyü internetten indirin veya ekteki rar dosyasını kullanın.

rar dosyasını indirmek için tıklayın.

simdi içerisindeki css dosyasını şekildeki gibi çalışma ortamınıza alın.

2015-08-21 01-25-26 Ekran görüntüsü

default.aspx dosyasının içeriği;

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

<!DOCTYPE html>

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head runat=”server”>
<title></title>
<link href=”stil.css” rel=”stylesheet” />
</head>
<body>
<form id=”form1″ runat=”server”>

<asp:Repeater ID=”Repeater1″ runat=”server” OnItemDataBound=”Repeater1_ItemDataBound”>
<HeaderTemplate><ul id=”menu”></HeaderTemplate>
<ItemTemplate>
<li><a href=”<%# Eval(“link”) %>”><%# Eval(“ad”) %></a>
<asp:Repeater ID=”Repeater2″ runat=”server”>
<HeaderTemplate><ul></HeaderTemplate>
<ItemTemplate><li><a href=”<%# Eval(“link”) %>”><%# Eval(“ad”) %></a></li></ItemTemplate>
<FooterTemplate></ul></FooterTemplate>
</asp:Repeater>
</li>
</ItemTemplate>
<FooterTemplate></ul></FooterTemplate>
</asp:Repeater>

</form>
</body>
</html>

default.aspx.cs dosyasının içeriği;

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

public partial class _Default : System.Web.UI.Page
{
MySqlConnection baglanti = new MySqlConnection();
MySqlCommand sqlkomut = new MySqlCommand();
MySqlConnection baglanti2 = new MySqlConnection();
MySqlCommand sqlkomut2 = new MySqlCommand();
protected void Page_Load(object sender, EventArgs e)
{
baglanti.ConnectionString = “Server=localhost;User Id=root; Password=xxkendisifrenizxx; Database=deneme_db; Pooling=false”;
baglanti.Open();
sqlkomut.Connection = baglanti;
sqlkomut.CommandText = “select * from kategori”;
MySqlDataAdapter adaptergonder = new MySqlDataAdapter(sqlkomut);
DataTable ds = new DataTable();
adaptergonder.Fill(ds);
Repeater1.DataSource = ds;
Repeater1.DataBind();
baglanti.Close();

}
protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
//try
//{
Repeater rp = (Repeater)e.Item.FindControl(“Repeater2”);
string sqlstring2 = “SELECT * FROM altkategori WHERE kategoriid='” + DataBinder.Eval(e.Item.DataItem, “id”).ToString()+”‘”;
baglanti2.ConnectionString =
“Server=localhost;User Id=root; Password=xxkendisifrenizxx; Database=deneme_db; Pooling=false”;
baglanti2.Open();
sqlkomut2.Connection = baglanti2;
sqlkomut2.CommandText = sqlstring2;
//Response.Write(sqlstring2);
MySqlDataAdapter adaptergonder2 = new MySqlDataAdapter(sqlkomut2);
DataTable dt = new DataTable();
adaptergonder2.Fill(dt);
if (dt.Rows.Count == 0)
{
rp.DataSource = null;
rp.DataBind();

}
else if (dt.Rows.Count > 0)
{
rp.DataSource = dt;
rp.DataBind();
}
baglanti2.Close();
/*}
catch
{
;
}
finally
{
;
}*/
}
}
}

Kodlamada değişik html5 ve css menülerle birlikte isterseniz jquery menuleri, sliderları da kullanabilirsiniz. Ama menü kodları karıştıkça kodlamalarda da değişiklikler yapmak gerekir.

2015-08-21 01-11-52 Ekran görüntüsü

şekildeki gibi bir menü  karşınıza gelir. Kullanılan css menu http://mintik.com adresinden rastgele alınmıştır. örnek olarak verilmiştir.

Reklamlar

Asp.Net MVC 3 Visual Studio 2010 ile MVC projesi oluşturmayı ve Asp.Net MVC 3’ün nasıl çalıştığını anlama-2

1 Yorum


Bir önceki girişten sonra önce Asp.Net MVC 3 için gerekli kurulumları bu linkten  indirebilirsiniz. İndirip kurma işleminden sonra Visual Studio 2010 ile MVC projesi oluşturmayı ve Asp.Net MVC 3’ün nasıl çalıştığını anlamaya çalışalım.

mvc_1

Öncelikle File->New Project ile yeni bir Asp.Net MVC 3 Web Aplication projesi oluşturuyoruz.

mvc_3

Aspx veya yeni çıkan Razor kod yapısı ileride detaylarına gireriz. Şuan Aspx seçiyoruz.

mvc_4

  • Content : Tasarımsal dosyaların bulunduğu klasördür. Themes, images vb tasarımsal dosyaları bu klasöre yerleştiriyoruz.
  • Controllers : Controller sınıflarının bulunduğu klasördür.
  • Models : Model sınıflarımızın bulunduğu klasördür.
  • Scripts : Javascript dosyalarımızın bulunduğu klasördür.
  • Views : Ekranlarımızın bulunduğu klasördür.
  • Global.asax : Uygulamanın methodlarının yakalanmasını sağlayan dosyamızdır.
Asp.Net MVC projemizin çalışma mantığı şu şekildedir :
  1. Proje çalıştırıldığında ilk önce Global.asax dosyamız çalışır ve yapılması gereken işlemler varsa onları gerçekleştirir ve yönlendirmeyi gerçekleştirir. Yönlendirme kodu başlangıçta aşağıdaki şekildedir.

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute(“{resource}.axd/{*pathInfo}”);

    routes.MapRoute(
        “Default”, // Route name
        “{controller}/{action}/{id}”, // URL with parameters
        new { controller = “Home”, action = “Index”, id = UrlParameter.Optional } // Parameter defaults
    );

}

 Projemizi çalıştırdığımızda Home/Index sayfamız açılacaktır. Action’ı About ile değiştirdiğimzde Home/About sayfamız açılacaktır.
  1. Global.asx’tan sonra hangi controller’a yönlendirme varsa o Controller’a yönlenmektedir. HomeController.cs’de Index() methoduna breakpoint yerleştirip inceleyelim.
  public ActionResult Index(){
ViewBag.Message = “Hoşgeldiniz ASP.NET MVC!”;return View();
}

Projemizi çalıştırdık. Global asax’tan HomeController’daki Index() methoduna yönlendirme yaptı. HomeController.cs’deki Index() methodumuza geldik ve burada return View() methodu ile karşılaştırdık. Bu method, Home klasörünün altındaki Index.aspx’i çalıştırmaktadır.
Burada dikkat etmemiz gereken önemli bir nokta, Index() methodunun geri döndürdüğü ActionResult türüdür. ActionResult, bu methodun bir Action döndürdüğünü belirtmektedir.
  1. Index.aspx dosyamızın içeriğini inceleyelim.

<%@ Page Language=”C#” MasterPageFile=”~/Views/Shared/Site.Master” Inherits=”System.Web.Mvc.ViewPage” %>

<asp:Content ID=”Content1″ ContentPlaceHolderID=”TitleContent” runat=”server”>
    Home Page
</asp:Content>

<asp:Content ID=”Content2″ ContentPlaceHolderID=”MainContent” runat=”server”>
    <h2><%: ViewBag.Message %></h2>
    <p>
        To learn more about ASP.NET MVC visit <a href=”http://asp.net/mvc” title=”ASP.NET MVC Website”>http://asp.net/mvc</a&gt;.
    </p>
</asp:Content>

Asp dosyalarımızı satır satır inceleyelim.
  • <%@ Page Language=”C#” MasterPageFile=”~/Views/Shared/Site.Master” Inherits=”System.Web.Mvc.ViewPage” %>
Bu satırda sayfamızın temel bilgilerini (MasterPage, language..) belirliyoruz.
  • <asp:Content ID=”Content1″ ContentPlaceHolderID=”TitleContent” runat=”server”>
  •     Home Page
  • </asp:Content>
Bu satırda, masterpage’de belirlediğimiz TitleContent’in içeriği doldurulmaktadır.
  • <asp:Content ID=”Content2″ ContentPlaceHolderID=”MainContent” runat=”server”>
  • </asp:Content>
Bu taglar arasında Masterpage’de belirlediğimiz MainContent’in içeriği doldurulmaktadır.
Bu örnekte en dikkat etmemiz gereken nokta şurasıdır:
  • <%: ViewBag.Message %>
HomeController.cs içindeki Index() methodunda ViewBag.Message propertysine “Hoşgeldiniz ASP.NET MVC!” değerini atamıştık. Burada ise bu değeri okuma işlemini gerçekleştiriyoruz.
Şimdi projemizi çalıştırıp inceleyelim.
mvc5
İlk Asp.Net MVC uygulamamızı bu şekilde çalıştırdık.
Kaynak:

Bana Silverlight Anlat

meslek lisesi ders notları

Eren ÇOLAK

Yazılım Mühendisi Olmak Yolunda İlerliyor...