jQuery dynamic menu from database in asp net

Рет қаралды 60,068

Күн бұрын

Link for all dot net and sql server video tutorial playlists
www.youtube.co...
Link for slides, code samples and text version of the video
csharp-video-tu...
Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our KZbin channel. Hope you can help.
/ @aarvikitchen5572
In this video we will discuss, how to build a jQuery menu using data from a database table.
Menu.cs class
using System.Collections.Generic;
namespace Demo
{
public class Menu
{
public int Id { get; set; }
public string MenuText { get; set; }
public int? ParentId { get; set; }
public bool Active { get; set; }
public List<Menu> List { get; set; }
}
}
MenuHandler.ashx
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
namespace Demo
{
public class MenuHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
List<Menu> listMenu = new List<Menu>();
using (SqlConnection con = new SqlConnection(cs))
{
SqlCommand cmd = new SqlCommand("spGetMenuData", con);
cmd.CommandType = CommandType.StoredProcedure;
con.Open();
SqlDataReader rdr = cmd.ExecuteReader();
while (rdr.Read())
{
Menu menu = new Menu();
menu.Id = Convert.ToInt32(rdr["Id"]);
menu.MenuText = rdr["MenuText"].ToString();
menu.ParentId = rdr["ParentId"] != DBNull.Value
? Convert.ToInt32(rdr["ParentId"]) : (int?)null;
menu.Active = Convert.ToBoolean(rdr["Active"]);
listMenu.Add(menu);
}
}
List<Menu> menuTree = GetMenuTree(listMenu, null);
JavaScriptSerializer js = new JavaScriptSerializer();
context.Response.Write(js.Serialize(menuTree));
}
public List<Menu> GetMenuTree(List<Menu> list, int? parent)
{
return list.Where(x => x.ParentId == parent).Select(x => new Menu
{
Id = x.Id,
MenuText = x.MenuText,
ParentId = x.ParentId,
Active = x.Active,
List = GetMenuTree(list, x.Id)
}).ToList();
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
HTML & jQuery code
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="WebForm1.aspx.cs" Inherits="Demo.WebForm1" %>
<!DOCTYPE html>
<html xmlns="www.w3.org/1999...">
<head runat="server">
<title></title>
<script src="jquery-1.11.2.js"></script>
<script src="jquery-ui.js"></script>
<link href="jquery-ui.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
url: 'MenuHandler.ashx',
method: 'get',
dataType: 'json',
success: function (data) {
buildMenu($('#menu'), data);
$('#menu').menu();
},
error: function (err) {
alert(err.statusText);
}
});
function buildMenu(parent, items) {
$.each(items, function () {
var li = $("<li>" + this.MenuText + "</li>");
if (!this.Active) {
li.addClass('ui-state-disabled');
}
li.appendTo(parent);
if (this.List && this.List.length > 0) {
var ul = $("<ul></ul>");
ul.appendTo(li);
buildMenu(ul, this.List);
}
});
}
});
</script>
</head>
<body style="font-family: Arial">
<form id="form1" runat="server">
<div style="width: 150px">
<ul id="menu">
</ul>
</div>
</form>
</body>
</html>

Пікірлер: 28

@pritamdas-iq1ul 6 жыл бұрын

Great boss, please keep it up, I got a lot of success by referring your videos only, in my journey from small companies to MNC, thanks a lot

@slaveofthecode 9 жыл бұрын

awesome!!..very very good..,! Very good practice and demonstration of how to use recursive methods. Thanks.

@TheRaviaug16 9 жыл бұрын

Hello Venkat Sir when we expect video tutorial for WPF? we are awaiting for that... Thank you very much for your vidoes........

@jarosawmaruszewski1678 7 жыл бұрын

A little old but still usefull. I belive nowdays, Menu class would need [Serializable] annotation. Anyway great tutorial given by skilled person.

@sigmundavila7252 9 жыл бұрын

Great tutorial sir. Thank you very much!

@mikerichardson7767 8 жыл бұрын

Thank you sir!! You are an amazing instructor. I have created a similar menu as you have instructed in video. My menu is in a Master file on the main directory. As soon as i am inside of a sub directory i not longer get any results. I have tried many different ways to resolve this but I am at a loss. My web site is a production web site and due to it being moved so it can be used by multiple facilities i need to make all the menu's dynamic. I am positive this is probably something simple that i am over looking :)

@younesselgueraoui253 8 жыл бұрын

Great tutorial Venkat Sir

@Csharp-video-tutorialsBlogspot 8 жыл бұрын

+Youness EL Gueraoui Thank you so much for the feedback. Means a lot. I am very glad you found the videos useful. I have organised all the Dot Net & SQL Server video tutorials in to playlists, which could be useful to you kzbin.infoplaylists?view=1&sort=dd If you need DVDs or to download all the videos and slides for offline viewing please visit www.pragimtech.com/kudvenkat_dvd.aspx Slides and Text Version of the videos can be found on my blog csharp-video-tutorials.blogspot.com Tips to effectively use my youtube channel. kzbin.info/www/bejne/r2ibYYCtnb5qZtU If you want to receive email alerts, when new videos are uploaded, please subscribe to my youtube channel. kzbin.info If you like these videos, please click on the THUMBS UP button below the video. May I ask you for a favor. I want these tutorials to be helpful for as many people as possible. Please share the link with your friends and family who you think would also benefit from them. Best Regards Venkat

@muhammadmoosa9653 5 жыл бұрын

Great Work sir! your tutorial give me helping hand but i have some confusion in JQuery, can you give me the jquery script or can you please tell me how can i implement jQuery in menu form. Thanks!!

@developernader 9 жыл бұрын

Thank you Eng Venkat

@mahendravimal4384 8 жыл бұрын

Dear kudvenkat, Thank you for this solution. But the menu which you have developed is vertical and i want to know how can i make this menu Horizontal. please reply as soon as possible.

@mahendravimal4384 7 жыл бұрын

Sir waiting for reply. ???

@donfeto7636 4 жыл бұрын

override the classes as he did in the previous totorial and check the css code that's make the ul li to be display inline block etc...