jQuery selectmenu from database

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 selectmenu using data from database.
SQL Script
Create table tblCountries
(
Id int primary key identity,
Name nvarchar(50)
)
Go
Insert into tblCountries values ('USA')
Insert into tblCountries values ('India')
Insert into tblCountries values ('UK')
Go
Create table tblCities
(
Id int primary key identity,
Name nvarchar(50),
CountryId int foreign key references tblCountries(ID)
)
Go
Insert into tblCities values ('New York', 1)
Insert into tblCities values ('Los Angeles', 1)
Insert into tblCities values ('Chicago', 1)
Insert into tblCities values ('Bangalore', 2)
Insert into tblCities values ('Chennai', 2)
Insert into tblCities values ('London', 3)
Insert into tblCities values ('Manchester', 3)
Insert into tblCities values ('Glasgow', 3)
Go
Stored procedure to retrieve selectmenu data
Create Proc spGetSelectMenuData
as
Begin
Select Id, Name from tblCountries;
Select Id, Name, CountryId from tblCities;
End
City.cs
namespace Demo
{
public class City
{
public int Id { get; set; }
public string Name { get; set; }
public int CountryId { get; set; }
}
}
Country.cs
using System.Collections.Generic;
namespace Demo
{
public class Country
{
public int Id { get; set; }
public string Name { get; set; }
public List<City> Cities { get; set; }
}
}
jQuery
$(document).ready(function () {
$('#selectMenu').selectmenu({
width: 200,
select: function (event, ui) {
alert('Label = ' + ui.item.label + ' '
+ 'Value = ' + ui.item.value);
}
});
});
HTML
<select id="selectMenu">
<asp:Repeater ID="repeaterCountries" runat="server">
<ItemTemplate>
<optgroup label="<%#Eval("Name") %>">
<asp:Repeater ID="repeaterCities" runat="server"
DataSource='<%# Eval("Cities")%>'>
<ItemTemplate>
<option value="<%#Eval("Id") %>">
<%#Eval("Name") %>
</option>
</ItemTemplate>
</asp:Repeater>
</optgroup>
</ItemTemplate>
</asp:Repeater>
</select>
code-behind
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
namespace Demo
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
repeaterCountries.DataSource = GetSelectMenuData();
repeaterCountries.DataBind();
}
public List<Country> GetSelectMenuData()
{
string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
SqlConnection con = new SqlConnection(cs);
SqlDataAdapter da = new SqlDataAdapter("spGetSelectMenuData", con);
da.SelectCommand.CommandType = CommandType.StoredProcedure;
DataSet ds = new DataSet();
da.Fill(ds);
List<Country> listCountries = new List<Country>();
foreach (DataRow countryRow in ds.Tables[0].Rows)
{
Country country = new Country();
country.Id = Convert.ToInt32(countryRow["Id"]);
country.Name = countryRow["Name"].ToString();
DataRow[] cityRows = ds.Tables[1].Select("CountryId="
+ country.Id.ToString());
List<City> listCities = new List<City>();
foreach (DataRow cityRow in cityRows)
{
City city = new City();
city.Id = Convert.ToInt32(cityRow["Id"]);
city.Name = cityRow["Name"].ToString();
city.CountryId = Convert.ToInt32(cityRow["CountryId"]);
listCities.Add(city);
}
country.Cities = listCities;
listCountries.Add(country);
}
return listCountries;
}
}
}

[@Vignesh0206]

All your tutorials are highly helpful.. Long live sir..

[@pacoriosports9182]

Hi Kudvenkat, Thanks a lot because I am working in a similar project. Are you able to do the same video but with Access database in place of the sql server please? I only have ms access in my pc. Thanks a lot.

[@arnabknd4]

SIr , your videos are just awesome , I've a request . Can you make e playlist on Angular.js ? That would be very helpful . Thank you

[@Csharp-video-tutorialsBlogspot]

Arnab Kundu Thank you very much for taking time to give feedback. This means a lot. I am very glad you found the videos useful. At the moment, we don't have videos on Angular.js. I will record and upload as soon as I can. Thank you very much for your patience. I have organised all the Dot Net & SQL Server videos in to playlists, which could be useful to you kzbin.infoplaylists?view=1&sort=dd 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.

[@arnabknd4]

kudvenkat thank you sir for your reply . I've found this is the only course so useful that I don't need any other references . Keep it up . you've just made a big fan following for your awesomeness .

[@nagireddy1705]

Hi venkat, thanks for helping by providing all the videos. these videos are very useful most of people who want to lean new technologies and who want to brush up their technologies. I request you provide some videos on Nodejs. there may some videos on youtube but those are not in organized way. if provide videos on Nodejs it would helpful a lot for us. Thanks Nagi

[@Gojam12]

pragim how do I locate the appropriate sql management studio every version there is to download won't install as it says it is not compatible with my system thank you for your help

[@ACheng369]

sir, i am a super fan of you too, i am so appreciate too if u can upload angulair.js, :D thanks a lot xD