Populate a drop-down in Vue.js and Asp.net Core from an ajax call
If you want to
call a function on page load and Bind Drop down List in Vue js then in this
example i will show you how to trigger function on page load in vue js. we will
run function on page load vue application.
we mostly
require to call method on page load in our application. so you want to call
function in Vue.js app then you can do it using created option in vue js. So i
will give full example so you can check it out.
Index.cshtml
<div id="apps">
<div class="form-group">
<label class="control-label">State</label>
<select v-model="state" class="form-control" v-on:change="getcity($event)">
<option v-for="state in States" :value="state.stateId">{{state.stateName}}</option>
</select>
</div>
<div class="form-group">
<label class="control-label">City</label>
<select v-model="city" class="form-control">
<option v-for="city in cities" :value="city.cityId">{{city.cityName}}</option>
</select>
</div>
</div>
<script>
var baserUrl= 'https://localhost:44379/';
new Vue({
el: '#apps',
data: {
state: null,
city:null,
States: [],
cities:[],
},
methods: {
getState: function () {
console.log('call on load...');
fetch(baserUrl +'Users/GetStateJsonResult').then(res
=> res.json())
.then(res => {
this.States = res;
}).catch( error => {
console.log(error)
this.errored = true
});
},
getcity: function (event) {
console.log(event.target.value)
fetch(baserUrl +'Users/GetCityJsonResult?' + new URLSearchParams({ stateid:
event.target.value })).then(res => res.json())
.then(res => {
this.cities = res;
}).catch( error => {
console.log(error)
this.errored = true
});
}
},
created: function () {
this.getState();
},
})
</script>
Controller Code
//
Declare Interface
private readonly IUsersService _usersService;
private readonly IStateService _stateService;
private readonly ICityService _cityService;
public UsersController(IUsersService usersService, IStateService stateService,
ICityService cityService) {
//initialize
Interface
_usersService = usersService;
_stateService = stateService;
_cityService = cityService;
}
public async
Task<JsonResult> GetStateJsonResult()
{
List<State> lststate = new List<State>();
lststate = await _stateService.GetAllState();
return Json(lststate);
}
public async
Task<JsonResult> GetCityJsonResult(long stateid)
{
List<City> lstcity = new List<City>();
lstcity = await _cityService.GetAllCity(stateid);
return Json(lstcity);
}
Interface
IStateservices.cs
public interface IStateService
{
Task<List<State>>
GetAllState(long
CountryId);
Task<List<State>>
GetAllState();
}
ICityServices.cs
public interface ICityService
{
Task<List<City>> GetAllCity(long StateId);
}
Service
StateServices.cs
public class StateService : IStateService
{
private readonly IStateRepository _stateRepository;
public StateService(IStateRepository stateRepository)
{
this._stateRepository = stateRepository;
}
public async
Task<List<State>> GetAllState(long countryId)
{
List<State> lstState = new List<State>();
Expression<Func<State, bool>> whereExpression = c =>
c.CountryId == countryId;
lstState = await
_stateRepository.GetMany(whereExpression);
lstState = lstState.OrderBy(c =>
c.StateName).ToList();
return lstState;
}
public async
Task<List<State>> GetAllState()
{
return await
_stateRepository.GetAll().OrderBy(x => x.StateName).ToListAsync();
}
}
CityServices.cs
public class CityService : ICityService
{
private readonly ICityRepository _cityRepository;
public CityService(ICityRepository cityRepository)
{
this._cityRepository = cityRepository;
}
public async
Task<List<City>> GetAllCity(long stateId)
{
List<City> lstcity = new List<City>();
Expression<Func<City, bool>> whereExpression = c =>
c.StateId == stateId;
lstcity = await
_cityRepository.GetMany(whereExpression);
lstcity = lstcity.OrderBy(c =>
c.CityName).ToList();
return lstcity;
}
}
Model
State.cs
public class State
{
[Key]
[DatabaseGenerated(DatabaseGeneratedOption.Identity)]
public long StateId
{ get; set; }
[Required]
[StringLength(100)]
public long
CountryId { get; set; }
[Required]
[StringLength(100)]
public string
StateName { get; set; }
}
City.cs
public class City
{
[Key]
[DatabaseGenerated(DatabaseGeneratedOption.Identity)]
public long CityId {
get; set; }
[Required]
[StringLength(100)]
public long StateId
{ get; set; }
[Required]
[StringLength(100)]
public string CityName
{ get; set; }
}
Comments
Post a Comment