PDA

View Full Version : آموزش: وصل کردن منوی jquery به دیتابیس


Himalaya
جمعه 27 فروردین 1389, 20:29 عصر
سلام... اگه تکراریه شرمنده :گیج: اگه هم تکراری نیست که امیدوارم به دردتون بخوره
اول یه دیتابیس میخوایم...

اسم دیتابیس رو میزاریم menu ... یه جدول توش درست میکنیم به اسم tblmenu
چهارتا ستون تو این جدول داریم



CategoryID------int کلید اصلی
ParentID------ int
name------nvarchar(50)
url------ nvarchar(200)

جدولمون رو به این صورت پر میکنیم... البته به کلمه end توجه نکنید... واسه بهم نخوردن متن نوشتمش :لبخند:
CategoryID----- ParentID------ name------------------------------------- url
--------------------------------------------------------------------------------------
end-------------1-----------------null--------Beverages---------------------------------NULL
end ------------2-----------------null---------------Fruit---------------------------------NULL
end ------------3---------------------1---------------Milk--------------http://www.milk.com
end ------------4--------------------1--------------Juice---------------------------------NULL
end ------------5--------------------4-------Apple Juice-----http://www.Apple_Juice.com
end ------------6--------------------4-----Orange Juice---http://www.Orange_Juice.com
end ------------7--------------------2------------Apples-----------http://www.Apples.com
end ------------8--------------------2-------------Pears------------http://www.Pears.com
خوب این قسمت که همه چیش معلومه. فقط ParentID نشون میده که هر گزینه sub item کدوم گزینه هستش.
فایلی رو که گزاشتم دانلود کنید...اون یه منوی خالیه :بامزه:
خوب ناراحتی نداره که ... چون تو ادامه پرش میکنیم
یه تابع بنویسید به این صورت


string menuMaker(string parentId)
{
string menu;
DataTable dt = newDataTable();
//DataRow dr;
SqlConnection cn = newSqlConnection("Password=123159;Persist Security Info=True;User ID=sa;Initial Catalog=menu;Data Source=amir-pc");
SqlCommand select = newSqlCommand("select * from tblMenu", cn);
SqlDataAdapter da = newSqlDataAdapter();
da.SelectCommand = select;
if (!string.IsNullOrEmpty(parentId))
select.CommandText = " select * from tblMenu where parentid = " + parentId;
else
select.CommandText = " select * from tblMenu where parentid is null";
da.Fill(dt);
menu = string.Empty;
foreach (DataRow dr in dt.Rows)
{
if (!string.IsNullOrEmpty(dr["url"].ToString()))
menu += "\n<li><a href=\"" + dr["url"] + "\" target=\"_blank\">" + dr["name"] + "</a>" + menuMaker(dr["CategoryId"].ToString()) + "</li>";
else
menu += "\n<li>" + dr["name"] + menuMaker(dr["CategoryId"].ToString()) + "</li>";
//menu += menuMaker(dr["CategoryId"].ToString());
}
if (!string.IsNullOrEmpty(menu))
{
menu = "\n<ul>" + menu + "\n</ul>";
}
return menu;
}

و بعد تو لود فرم کد زیر رو قرار بدید


Literal1.Text = " <ul class=\"jd_menu jd_menu_slate\">" + menuMaker(null).Substring(5);

راستی تو قسمت SqlConnection باید کانکشن مربوط به خودتون رو بنویسید
امیدوارم چیزیشو جا ننداخته باشم. فعلا بای
aminghaderi
جمعه 27 فروردین 1389, 20:50 عصر
قسمت دیزاین توضیح نداره؟!
Himalaya
جمعه 27 فروردین 1389, 21:39 عصر
قسمت دیزاین توضیح نداره؟!

فایلهای جاوا اسکریپت و استایل و کد جاوا رو که به صفحه اضافه کردید فقط یه کنترل literal رو صفحه میندازید همین


<body>
<form id="form1" runat="server">
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
</form>
</body>

دیزاین توضیح خاصی نداره
mehdi.mousavi
شنبه 28 فروردین 1389, 10:25 صبح
سلام.
لطفا یک Demo ی زنده ای، یک Snapshot ای چیزی قرار بدید تا بشه سریعتر به مفید/غیر مفید بودن Script پی برد (اگر هدفتون نوشتن jQuery plugin بوده). چون خیلی ها (از جمله خود من) اول ترجیح میدن بصورت زنده یک plugin رو تجربه کنن، اگر خوششون اومد، اونوقت وارد جزییاتش بشن.

اگر هم هدفتون درست کردن یک Server Control بوده، چیزی که من از کدهای قرار داده شده در پست قبلی دیدم، هیچ شباهتی به یک Server Control استاندارد نداره.

اگر هم هدف چیز دیگه ای بوده، ابتدا یک پاراگراف در موردش توضیح بدید، بعد اقدام به ارائه توضیحات در مورد چگونگی ساخت DB Schema و ... کنید.

موفق باشید.

پاورقی: باور کنید همه فرصت ندارن که بشینن دونه به دونه فایلهایی که اینجا Upload میشه رو بررسی کنن و نظر بدن.
Himalaya
شنبه 28 فروردین 1389, 13:17 عصر
سلام.
لطفا یک Demo ی زنده ای، یک Snapshot ای چیزی قرار بدید تا بشه سریعتر به مفید/غیر مفید بودن Script پی برد (اگر هدفتون نوشتن jQuery plugin بوده). چون خیلی ها (از جمله خود من) اول ترجیح میدن بصورت زنده یک plugin رو تجربه کنن، اگر خوششون اومد، اونوقت وارد جزییاتش بشن.

اگر هم هدفتون درست کردن یک Server Control بوده، چیزی که من از کدهای قرار داده شده در پست قبلی دیدم، هیچ شباهتی به یک Server Control استاندارد نداره.

اگر هم هدف چیز دیگه ای بوده، ابتدا یک پاراگراف در موردش توضیح بدید، بعد اقدام به ارائه توضیحات در مورد چگونگی ساخت DB Schema و ... کنید.

موفق باشید.

پاورقی: باور کنید همه فرصت ندارن که بشینن دونه به دونه فایلهایی که اینجا Upload میشه رو بررسی کنن و نظر بدن


سلام
والا از خدا که پنهان نیست از شما استاد بزرگوار چه پنهان چون من خودم چندت روز دنبال این بودم گفتم حالا که به نتیجه رسیده بزارم اینجا هر کی خواست استفاده کنه... در مورد کدها هم نمیدونم بیشتر از اونی که گفتم چی باید بگم.
هدفم هم نه درست کردن jQuery plugin بوده نه Server Control ... فقط و فقط میخواستم منوی jquery رو به دیتا بیس وصل کنم... شرمنده شما هم شدیم واسه این که کدامون استاندارد نبوده... از ما بی سوادا بیشتر از این بر نمیاد
اون منو که گذاشتم واسه دانلود (همون خالیه) منویی هستش که من خودم از یه سایت گرفتم.
چه میدونم اگه خیلی علاقه دارید بدونید در مورد اون منو خوب کداشو نگاه کنی.. قسمت کدهای #c رو خودم نوشتم که اونم گزاشتم اینجا با دیتابیس...
انتظار ندارید که یه جشن هم بگیرم سور بدم بهتون. هر که طاووس خواهد جور قسطنطنیه کشد... بسم الله این کدا اینم شما...
راستی من دنبال نظر دادن کسی نبودم... خواستید استفاده کنید. نخواستید نه
mohsen507
شنبه 28 فروردین 1389, 13:17 عصر
سلام براي دوستاني كه ميخواهند demo منو رو ببينند:چشمک:

اينجا (http://jdsharp.us/jQuery/plugins/jdMenu/1.3.beta2/jdMenu-demo.html)
mehdi.mousavi
شنبه 28 فروردین 1389, 14:09 عصر
سلام والا از خدا که پنهان نیست از شما استاد بزرگوار چه پنهان چون من خودم چندت روز دنبال این بودم گفتم حالا که به نتیجه رسیده بزارم اینجا هر کی خواست استفاده کنه... در مورد کدها هم نمیدونم بیشتر از اونی که گفتم چی باید بگم. هدفم هم نه درست کردن jQuery plugin بوده نه Server Control ... فقط و فقط میخواستم منوی jquery رو به دیتا بیس وصل کنم... شرمنده شما هم شدیم واسه این که کدامون استاندارد نبوده... از ما بی سوادا بیشتر از این بر نمیاد اون منو که گذاشتم واسه دانلود (همون خالیه) منویی هستش که من خودم از یه سایت گرفتم. چه میدونم اگه خیلی علاقه دارید بدونید در مورد اون منو خوب کداشو نگاه کنی.. قسمت کدهای C#‎ رو خودم نوشتم که اونم گزاشتم اینجا با دیتابیس... انتظار ندارید که یه جشن هم بگیرم سور بدم بهتون. هر که طاووس خواهد جور قسطنطنیه کشد... بسم الله این کدا اینم شما... راستی من دنبال نظر دادن کسی نبودم... خواستید استفاده کنید. نخواستید نه

سلام.
واقعا نیتم ناراحت کردن شما نبود. اما حقیقتا ناراحت میشم چنین پستهایی می بینم. عنوان پست رو نگاه کنید، زده اید: "وصل کردن منو JQuery به دیتابیس". برای jQuery، انواع و اقسام plugin ها نوشته شده. N تا از این plugin ها، برای کار با منو هستش. وقتی شما میگید "منوی jQuery"، واقعا انتظار دارید چی به ذهن آدم بیاد؟

در واقع، شما باید عنوان تاپیک رو "استفاده از jdMenu در ASP.NET" یا چنین چیزی می ذاشتید. بعد، توی پاراگراف اول، jdMenu رو معرفی می کردید، می گفتید سایتش اینه (http://jdsharp.us/jQuery/plugins/jdMenu/) و قراره من توی این پروژه ای که ضمیمه کردم، نحوه load کردن آیتمهای این منو رو، با استفاده از ASP.NET نشون بدم.

اما شما، فرض رو به این گذاشتید که همه میان فایل رو Download میکنن و سپس میشینن کد رو بررسی میکنن، ببینن اینکار چطوری انجام میشه. در هر حال، امیدوارم از پستی که دادم دلخور نشده باشید.

اما حالا بریم سراغ بحث فنی، در حقیقت، شما باید Server Control ای برای Wrap کردن این jQuery Plugin بنویسید. این Server Control باید Collection ای از Item ها داشته باشه، که کاربر بتونه بصورت دلخواه، Item های منو رو به Collection مورد نظر اضافه کنه، حذف کنه، یا تغییر بده. درست همونطوریکه شما از TreeView، TextBox یا بقیه Server Control های دیگه توی ASP.NET استفاده می کنید.

توی جدیدترین مقاله ای که در حال نوشتنش هستم چگونگی طراحی یک jQuery Plugin و نوشتن Wrapper ای برای اون توی ASP.NET رو مو به مو با جزییات توضیح دادم. احتمالا تا چند روز دیگه این مقاله تموم بشه و اونو برای دوستان Upload کنم تا با روش صحیح انجام دادن چنین کاری آشنا بشن.

موفق باشید.

پاورقی: بازم متاسفم که ناراحت شدید.
Ahmadgolagha
پنج شنبه 27 آبان 1389, 15:18 عصر
string menuMaker(string parentId)
{
string menu;
DataTable dt = newDataTable();
//DataRow dr;
SqlConnection cn = newSqlConnection("Password=123159;Persist Security Info=True;User ID=sa;Initial Catalog=menu;Data Source=amir-pc");
SqlCommand select = newSqlCommand("select * from tblMenu", cn);
SqlDataAdapter da = newSqlDataAdapter();
da.SelectCommand = select;
if (!string.IsNullOrEmpty(parentId))
select.CommandText = " select * from tblMenu where parentid = " + parentId;
else
select.CommandText = " select * from tblMenu where parentid is null";
da.Fill(dt);
menu = string.Empty;
foreach (DataRow dr in dt.Rows)
{
if (!string.IsNullOrEmpty(dr["url"].ToString()))
menu += "\n<li><a href=\"" + dr["url"] + "\" target=\"_blank\">" + dr["name"] + "</a>" + menuMaker(dr["CategoryId"].ToString()) + "</li>";
else
menu += "\n<li>" + dr["name"] + menuMaker(dr["CategoryId"].ToString()) + "</li>";
//menu += menuMaker(dr["CategoryId"].ToString());
}
if (!string.IsNullOrEmpty(menu))
{
menu = "\n<ul>" + menu + "\n</ul>";
}
return menu;
}

و بعد تو لود فرم کد زیر رو قرار بدید


Literal1.Text = " <ul class=\"jd_menu jd_menu_slate\">" + menuMaker(null).Substring(5);

راستی تو قسمت SqlConnection باید کانکشن مربوط به خودتون رو بنویسید
امیدوارم چیزیشو جا ننداخته باشم. فعلا بای


من این مطلب رو بسیار جالب و مهم دیدم ولی یه بحث غیرفنی باعث شده به بیراه بره، من از karaji333 تشکر می کنم

اینجا یه تابع بازگشتی نوشته شده که درست کار می کنه ولی فکر کنم یه مشکلی که داره خیلی به دیتابیس وصل میشه ، چه طور میشه این تابع را اصلاح کرد که فقط داده ها را یکبار از دیتابیس بخونه و select های بعدی از یه دیتاتیبلی بخون

فایل این دوستمون را هم ضمیمه کردم
Himalaya
جمعه 28 آبان 1389, 01:34 صبح
اینجا یه تابع بازگشتی نوشته شده که درست کار می کنه ولی فکر کنم یه مشکلی که داره خیلی به دیتابیس وصل میشه ، چه طور میشه این تابع را اصلاح کرد که فقط داده ها را یکبار از دیتابیس بخونه و select های بعدی از یه دیتاتیبلی بخون
اون برنامه واسه زمان جاهلیت بود :چشمک:...تو دیتابیس ParentID هایی که با null ست شدن رو به 0 (صفر) تغییر بدید و کدهارو هم به این صورت اصلاح کنید



using System.Collections.Generic;




DataTable dt;
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
dt = new DataTable();
SqlConnection cn = new SqlConnection(ConfigurationManager.ConnectionStrin gs["ConDB"].ConnectionString);
SqlCommand select = new SqlCommand("select * from tblMenu", cn);
SqlDataAdapter da = new SqlDataAdapter();
da.SelectCommand = select;
da.Fill(dt);
Literal1.Text = " <ul class=\"jd_menu_vertical jd_menu_slate\">" + menuMaker(0).Substring(5);
}
}

string menuMaker(int parentId)
{
string menu = string.Empty;
IEnumerable<DataRow> query = dt.AsEnumerable().Where(col => col.Field<int>("ParentID") == parentId);
foreach (var item in query)
{
if (!string.IsNullOrEmpty(item.Field<string>("url")))
menu += "\n<li><a href=\"" + item.Field<string>("url") + "\" target=\"_blank\">" + item.Field<string>("name") + "</a>" + menuMaker(item.Field<int>("CategoryId")) + "</li>";
else
menu += "\n<li>" + item.Field<string>("name") + menuMaker(item.Field<int>("CategoryId")) + "</li>";
}
if (!string.IsNullOrEmpty(menu))
{
menu = "\n<ul>" + menu + "\n</ul>";
}
return menu;
}
mahdi.violin
چهارشنبه 11 خرداد 1390, 01:12 صبح
آقا دستت درد نکنه . خیلی خوب بود ، دم شما را خیلی خیلی گرم
mahdi.violin
چهارشنبه 11 خرداد 1390, 01:18 صبح
آقا دستت درد نکنه . خیلی خوب بود ، دم شما را خیلی خیلی گرم
jaykob
چهارشنبه 11 خرداد 1390, 17:16 عصر
اون برنامه واسه زمان جاهلیت بود :چشمک:...تو دیتابیس ParentID هایی که با null ست شدن رو به 0 (صفر) تغییر بدید و کدهارو هم به این صورت اصلاح کنید



using System.Collections.Generic;




DataTable dt;
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
dt = new DataTable();
SqlConnection cn = new SqlConnection(ConfigurationManager.ConnectionStrin gs["ConDB"].ConnectionString);
SqlCommand select = new SqlCommand("select * from tblMenu", cn);
SqlDataAdapter da = new SqlDataAdapter();
da.SelectCommand = select;
da.Fill(dt);
Literal1.Text = " <ul class=\"jd_menu_vertical jd_menu_slate\">" + menuMaker(0).Substring(5);
}
}

string menuMaker(int parentId)
{
string menu = string.Empty;
IEnumerable<DataRow> query = dt.AsEnumerable().Where(col => col.Field<int>("ParentID") == parentId);
foreach (var item in query)
{
if (!string.IsNullOrEmpty(item.Field<string>("url")))
menu += "\n<li><a href=\"" + item.Field<string>("url") + "\" target=\"_blank\">" + item.Field<string>("name") + "</a>" + menuMaker(item.Field<int>("CategoryId")) + "</li>";
else
menu += "\n<li>" + item.Field<string>("name") + menuMaker(item.Field<int>("CategoryId")) + "</li>";
}
if (!string.IsNullOrEmpty(menu))
{
menu = "\n<ul>" + menu + "\n</ul>";
}
return menu;
}


سلام باتشکر

اگر امکان داره همین کد رو با LINQ هم قرار بدید ممنون می شم
Himalaya
چهارشنبه 11 خرداد 1390, 22:27 عصر
سلام. هر چی خواستم یه سمپل آپ کنم نشد که نشد. کداشو میزارم
روال کار مثل قبله فقط آیتم ها توسط Linq To Sql از بانک خونده میشن. چیز خاصی نداره


System.Linq.IQueryable<Test.MenuItem> items;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
items = from c in (new MenuDataContext()).MenuItems
select c;
Literal1.Text = " <ul class=\"jd_menu_vertical jd_menu_slate\">" + menuMaker(0).Substring(5);
}
}
string menuMaker(int parentId)
{
string menu = string.Empty;
System.Linq.IQueryable<Test.MenuItem> query = items.Where(col => col.ParentID == parentId);
foreach (Test.MenuItem item in query)
{
if (!string.IsNullOrEmpty(item.Url))
menu += "\n<li><a href=\"" + item.Url + "\" target=\"_blank\">" + item.Name + "</a>" + menuMaker(item.CategoryID) + "</li>";
else
menu += "\n<li>" + item.Name + menuMaker(item.CategoryID) + "</li>";
}
if (!string.IsNullOrEmpty(menu))
{
menu = "\n<ul>" + menu + "\n</ul>";
}
return menu;
}


اینم واسه بانک


USE [Menu]
GO
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[MenuItem](
[CategoryID] [int] NOT NULL,
[ParentID] [int] NOT NULL,
[Name] [nvarchar](100) NOT NULL,
[Url] [nvarchar](150) NULL,
CONSTRAINT [PK_MenuItem] PRIMARY KEY CLUSTERED
(
[CategoryID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
ALTER TABLE [dbo].[MenuItem] ADD CONSTRAINT [DF_MenuItem_ParentID] DEFAULT ((0)) FOR [ParentID]
GO
hamidjalali
شنبه 14 خرداد 1390, 01:48 صبح
خیلی خوب بود

دوست عزیز میشه بگید چطوری باید کاری کنم که منوهای باز شنوده از سمت چب باز بشند و همچنین رنگ بندی رو چطوری تغییر بدم؟ مثلا اگه خواستم از خاکستری به رنگ سبز تغییر بدم باید کجاش دستکاری کنم؟

من از این JQuery هیچی سر در نمیارم