Angular anchorscroll with database data
Link for all dot net and sql server video tutorial playlists
https://www.youtube.com/user/kudvenka...
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 YouTube channel. Hope you can help.
/ @aarvikitchen5572
Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspo...
In Part 21 of AngularJS tutorial we discussed using anchorscroll service with hardcoded data. In this video we will discuss using angular anchorscroll service with database data.
So here is what we want to do. Retrieve the countries and cities data from respective tables in the SQL server database and display it on the web page. When we click on a country button, the page should automatically scroll to the respective country and it's cities.
WebService (ASMX)
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using System.Web.Services;
namespace Demo
{
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]
public class CountryService : System.Web.Services.WebService
{
[WebMethod]
public void GetData()
{
List[Country] listCountries = new List[Country]();
string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
using (SqlConnection con = new SqlConnection(cs))
{
SqlCommand cmd = new SqlCommand("Select * from tblCountry;Select * from tblCity", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
DataView dataView = new DataView(ds.Tables[1]);
foreach(DataRow countryDataRow in ds.Tables[0].Rows)
{
Country country = new Country();
country.Id = Convert.ToInt32(countryDataRow["Id"]);
country.Name = countryDataRow["Name"].ToString();
dataView.RowFilter = "CountryId = '" + country.Id + "'";
List[City] listCities = new List[City]();
foreach(DataRowView cityDataRowView in dataView)
{
DataRow cityDataRow = cityDataRowView.Row;
City city = new City();
city.Id = Convert.ToInt32(cityDataRow["Id"]);
city.Name = cityDataRow["Name"].ToString();
city.CountryId = Convert.ToInt32(cityDataRow["CountryId"]);
listCities.Add(city);
}
country.Cities = listCities;
listCountries.Add(country);
}
}
JavaScriptSerializer js = new JavaScriptSerializer();
Context.Response.Write(js.Serialize(listCountries));
}
}
}
Angular Code :
var demoApp = angular.module("demoApp", [])
.controller("countryController", function ($scope, $location, $anchorScroll, $http) {
$http.get("CountryService.asmx/GetData")
.then(function (response) {
$scope.countries = response.data;
});
$scope.scrollTo = function (countryName) {
$location.hash(countryName);
$anchorScroll();
}
});
HTML
[!DOCTYPE html]
[html xmlns="http://www.w3.org/1999/xhtml" ng-app="demoApp"]
[head]
[title][/title]
[script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"][/script]
[script src="Scripts/Script.js"][/script]
[link href="Styles.css" rel="stylesheet" /]
[/head]
[body ng-controller="countryController"]
[span ng-repeat="country in countries"]
[button ng-click="scrollTo(country.Name)"]{{country.Name}}[/button]
[/span]
[br /][br /]
[div class="containerDiv"]
[fieldset ng-repeat="country in countries" id="{{country.Name}}"]
[legend]{{country.Name}}[/legend]
[ul]
[li ng-repeat="city in country.Cities"]
{{city.Name}}
[/li]
[/ul]
[/fieldset]
[/div]
[/body]
[/html]
En esta página del sitio puede ver el video en línea Angular anchorscroll with database data de Duración hora minuto segunda en buena calidad , que subió el usuario kudvenkat 04 febrero 2016, comparta el enlace con amigos y conocidos, en youtube este video ya ha sido visto 138,097 veces y le gustó 386 a los espectadores. Disfruta viendo!
