Al usar este sitio acepta el uso de cookies para anlisis, contenido personalizado y publicidad.
Saber ms
Developer Network
Tecnologas
Iniciar sesin
Descargas
Programas
Comunidad
Documentacin
Suscripciones a MSDN
Obtener herramientas
Ejemplos
Microsoft Developer Network > Ejemplos > Cascading DropDown in MVC4 using Knockout with Web API and Entity Framework
Descargue Visual Studio
Acceso rpido
Cascading DropDown in MVC4 using
Knockout with Web API and Entity Framework
In this article I am going to explore many things like dropdown cascading, how to use entity framework and how to use
data transfer object with entity framework and how to create web API and fetch data using web API and display using
knockout.Getting Started Create a new Project
Mis muestras
Cargar un ejemplo
Examinar solicitudes de ejemplos
Descargar
2,804
Puntos
Superior 5%
C# 2,8 MB
Clasificaciones
Descargado
ltima actualizacin
20/02/2014
1.033 veces
Licencia
Licencia de Apache, versin 2.0
Favoritos
Agregar a favoritos
Compartir
Necesita
Visual Studio 2012 , Knockout MVC ,
BasicWebApi , Microsoft Visual Studio 2012
SDK , ASP.NET Web Forms MVC 4
Traducido al
English
Tecnologas
C#, Windows 7, jQuery, Entity Framework, .NET Framework 4.5, knockout.js, MVC5, ASP.NET Web API 2
Temas
Cascading DropDown in MVC, Web API in MVC, How to use Knockout in MVC, How to user Data Transfer Object
Raj Kumar Beniwal
Se uni Apr 2013
Ver ejemplos
1
Mostrar actividad
Notificar abuso a Microsoft
Descripcin
Explorar cdigo
PyR
Introduction
In this article I am going to explore many things like dropdown cascading, how to use entity framework and how to use data
transfer object with entity framework and how to create web API and fetch data using web API and display using knockout.
Building the Sample
Getting Started
Create a new Project. Open Visual Studio 2012.
Go to File => New => Project.
Select Web in installed templates.
Select ASP.NET MVC 4 Web Application.
Enter the Name and choose the location.
Click OK.
Description
Web API The ASP.NET Web API is a framework that makes it easy to build HTTP services that reach a broad range of clients,
including browsers and mobile devices. The ASP.NET Web API is an ideal platform for building REST applications on the .NET
Framework.
Knockout Knockout is a JavaScript library that helps you to create rich, responsive displays and editor user interfaces with a
clean underlying data model. Read more herehttp://knockoutjs.com/.
Entity Framework Entity Framework EF is an objectrelational mapper that enables .NET developers to work with relational
data using domainspecific objects. It eliminates the need for most of the dataaccess code that developers usually need to
write.
Data Transfer Objects Data Transfer Objects are reusable classes that contain related data and no business logic. They may be
defined on the service side, client side, or both sides of the communication channel. Their properties i.e. getters/setters may
wrap primitive data types e.g. integers, strings, etc. or other DTOs.
This is my database schema which is used in this sample:
Image 1.
As you all know when we use entity framework it build default models classes and context classes, So we are going to use data
transfer object besides using entity framework models and context classes.
So first of all add data transfer object model classes:
C#
publicclassCountryDTO
{
publicintCountryId{get;set;}
publicstringCountryName{get;set;}
}
publicclassStateDTO
{
publicintStateId{get;set;}
publicintCountryId{get;set;}
publicstringStateName{get;set;}
}
publicclassCityDTO
{
publicintStateId{get;set;}
publicintCityId{get;set;}
publicstringCityName{get;set;}
}
Now add a convertor class:
C#
publicstaticclassConverter
{
publicstaticCountryDTOCountriesToCountryDTO(Countriese)
{
returnnewCountryDTO
{
CountryId=e.CountryId,
CountryName=e.CountryName
};
}
publicstaticList<CountryDTO>LCountriesToCountryDTO(List<Countries>e)
{
List<CountryDTO>lstCountryDTO=e.Select(
country=>newCountryDTO()
{
CountryId=country.CountryId,
CountryName=country.CountryName
}).ToList();
returnlstCountryDTO;
}
publicstaticStateDTOStatesToStateDTO(Statese)
{
returnnewStateDTO
{
StateId=e.StateId,
StateName=e.StateName
};
}
publicstaticList<StateDTO>LStatesToStateDTO(List<States>e)
{
List<StateDTO>lstStateDTO=e.Select(
state=>newStateDTO()
{
StateId=state.StateId,
StateName=state.StateName
}).ToList();
returnlstStateDTO;
}
publicstaticCityDTOCitiesToCityDTO(Citiese)
{
returnnewCityDTO
{
CityId=e.CityId,
CityName=e.CityName
};
}
publicstaticList<CityDTO>LCitiesToCityDTO(List<Cities>e)
{
List<CityDTO>lstCityDTO=e.Select(
city=>newCityDTO()
{
CityId=city.CityId,
CityName=city.CityName
}).ToList();
returnlstCityDTO;
}
}
Here is my repository class:
C#
publicclassLocationRepository:ILocationRepository
{
publicList<CountryDTO>GetCountries()
{
using(TestDBEntitiesdbcontext1=newTestDBEntities())
{
varlstCountries=fromrindbcontext1.Countriesselectr;
List<CountryDTO>lst=newList<CountryDTO>();
lst=Converter.LCountriesToCountryDTO(lstCountries.ToList());
returnlst;
}
}
publicList<StateDTO>GetStates(intcountryId)
{
using(TestDBEntitiesdbcontext=newTestDBEntities())
{
varlstStates=dbcontext.States.Where(b=>b.CountryId==countryId).ToList();
List<StateDTO>list=newList<StateDTO>();
list=Converter.LStatesToStateDTO(lstStates.ToList());
returnlist;
}
}
publicList<CityDTO>GetCities(intstateId)
{
using(TestDBEntitiesdbcontext=newTestDBEntities())
{
varlstCities=dbcontext.Cities.Where(b=>b.StateId==stateId).ToList();
List<CityDTO>list=newList<CityDTO>();
list=Converter.LCitiesToCityDTO(lstCities.ToList());
returnlist;
}
}
}
Repository interface:
C#
publicinterfaceILocationRepository
{
List<CountryDTO>GetCountries();
List<StateDTO>GetStates(intcountryId);
List<CityDTO>GetCities(intstateId);
}
Now add Web API controller class:
Image 2.
This is my controller class code:
C#
publicclassLocationController:ApiController
{
staticreadonlyILocationRepositoryrepository=newLocationRepository();
//GETapi/<controller>
publicIEnumerable<CountryDTO>GetCountries()
{
//returnnewstring[]{"value1","value2"};
returnrepository.GetCountries();
}
//GETapi/<controller>/5
[ActionName("GetStates")]
publicIEnumerable<StateDTO>GetStates(intid)
{
returnrepository.GetStates(id);
}
//GETapi/<controller>/5
[ActionName("GetCities")]
publicIEnumerable<CityDTO>GetCities(intid)
{
returnrepository.GetCities(id);
}
//POSTapi/<controller>
publicvoidPost([FromBody]stringvalue)
{
}
//PUTapi/<controller>/5
publicvoidPut(intid,[FromBody]stringvalue)
{
}
//DELETEapi/<controller>/5
publicvoidDelete(intid)
{
}
}
To stop method confliction we have added ActionName in two methods.
Now add this routing in WebApiConfig class:
C#
publicstaticvoidRegister(HttpConfigurationconfig)
{
config.Routes.MapHttpRoute(
name:"DefaultApi",
routeTemplate:"api/{controller}/{id}",
defaults:new{id=RouteParameter.Optional}
);
config.Routes.MapHttpRoute(
name:"DefaultApiWithAction",
routeTemplate:"api/{controller}/{action}/{id}",
defaults:new{id=RouteParameter.Optional}
);
}
Here we are done with model and controller part, Now time to work in view part.
HTML
@{
ViewBag.Title="CascadingDropDownusingKnockout/WebAPISample";
}
<scriptsrc="~/Scripts/jquery1.8.2.min.js"></script>
<scriptsrc="~/Scripts/knockout2.2.0.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
FetchCountries();
$("#Country").change(function(){
varcountryId=$("#Country").val();
$.ajax({
type:"GET",
url:"http://localhost:62830/api/Location/GetStates/"+countryId,
contentType:"application/json;charset=utf8",
dataType:"json",
success:function(response){
if(response!=""){
$(response).each(function(index,element){
viewModel.stateCollection.push(element);
});
ko.applyBindings(viewModel);
}
}
});
});
$("#State").change(function(){
varstateId=$("#State").val();
$.ajax({
type:"GET",
url:"http://localhost:62830/api/Location/GetCities/"+stateId,
contentType:"application/json;charset=utf8",
dataType:"json",
success:function(response){
if(response!=""){
$(response).each(function(index,element){
viewModel.cityCollection.push(element);
});
ko.applyBindings(viewModel);
}
}
});
});
});
functionFetchCountries(){
viewModel={
countryCollection:ko.observableArray(),
stateCollection:ko.observableArray(),
cityCollection:ko.observableArray()
};
$.ajax({
type:"GET",
url:"http://localhost:62830/api/Location",
contentType:"application/json;charset=utf8",
dataType:"json",
success:function(response){
if(response!=""){
$(response).each(function(index,element){
viewModel.countryCollection.push(element);
});
ko.applyBindings(viewModel);
}
}
});
}
</script>
<h2>CascadingDropDownusingKnockout/WebAPISample</h2>
CountryName:<selectdatabind="options:countryCollection,optionsCaption:'Choosecountry...',
optionsValue:function(item){returnitem.CountryId;},
optionsText:function(item){returnitem.CountryName;},value:Country,
valueUpdate:'change'"id="Country"name="Country"></select>
<br/>
StateName:<selectdatabind="options:stateCollection,optionsCaption:'Choosestate...',
optionsValue:function(item){returnitem.StateId;},
optionsText:function(item){returnitem.StateName;},value:State,
valueUpdate:'change'"id="State"name="State"></select>
<br/>
CityName:<selectdatabind="options:cityCollection,optionsCaption:'Choosecity...',
optionsValue:function(item){returnitem.CityId;},
optionsText:function(item){returnitem.CityName;},value:City,
valueUpdate:'change'"id="City"name="City"></select>
All set. Now run the application:
Image 3.
Image 4.
Image 5.
Image 6.
Source Code Files
CascadingDropDownMVCWebAPISQLData.zip
Centros de desarrollo
Recursos de aprendizaje
Comunidad
Soporte tcnico
Windows
Microsoft Virtual Academy
Foros
Autosoporte
Channel 9
Blogs
Office
MSDN Magazine
Codeplex
Visual Studio
Microsoft Azure
Programas
BizSpark para nuevas empresas
DreamSpark
Ms...
Espaa Espaol
Imagine Cup
Boletn
Privacidad y cookies
Trminos de uso
Marcas comerciales
2016 Microsoft
