Requirement:
My requirement is i have to get countries ,states and cities data from databse and bind it to dropdown (cascading drop down) using knocout in form.. and i add firstname and lastname to that form.. finally i have to submit the dropdown values along with firstname and lastname to action method.. But i am able to submit only firstname and lastname ... dropdown values are not binding to action method.. i think i am mistake in select tags or anywhere.. friends please help me where i done mistaken...
dropdown values are not submitting to action method using knockout?
$(document).ready(function () {
function viewmodel() {
var self = this;
self.Employee = {};
self.Employee.FirstName = ko.observable();
self.Employee.LastName = ko.observable();
self.Employee.country = ko.observable();;
self.Employee.state = ko.observable();;
self.Employee.city = ko.observable();;
//Countries
self.fn = function () {};
self.fn.countryCollection= ko.observableArray();
self.fn.stateCollection= ko.observableArray();
self.fn.cityCollection = ko.observableArray();
$("#Country").change(function () {
var countryId = $("#Country").val();
$.ajax({
type: "GET",
url: "http://localhost:62830/api/Location/GetStates/" + countryId,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
if (response != "") {
$(response).each(function (index, element) {
self.fn.stateCollection.push(element);
});
//ko.applyBindings(viewmodel);
}
}
});
});
$("#State").change(function () {
var stateId = $("#State").val();
$.ajax({
type: "GET",
url: "http://localhost:62830/api/Location/GetCities/" + stateId,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
if (response != "") {
$(response).each(function (index, element) {
self.fn.cityCollection.push(element);
});
//ko.applyBindings(viewmodel);
}
}
});
});
function FetchCountries() {
$.ajax({
type: "GET",
url: "http://localhost:62830/api/Location",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
if (response != "") {
$(response).each(function (index, element) {
self.fn.countryCollection.push(element);
});
}
}
});
}
FetchCountries();
var EmpData = {
FirstName: self.Employee.FirstName,
LastName: self.Employee.LastName,
country: self.Employee.country,
state: self.Employee.state,
city: self.Employee.city
};
alert(EmpData)
self.submit = function () {
$('#btnSubmit').live("click", function (e) {
$.ajax({
url: "http://localhost:62830/Home/Submit/",
async: true,
cache: false,
type: 'POST',
data: ko.toJSON(EmpData),
contentType: "application/json; charset=utf-8",
success: function (result) {
}
});
});
}
}
ko.applyBindings(new viewmodel());
});
</script>
<h2>Cascading DropDown using Knockout</h2>
FirstName:
<input type="text" id="txtFirstName" name="txtFirstName" data-
bind="value:Employee.FirstName" />
<br />
LastName:
<input type="text" id="txtLastName" name="txtFirstName" data-
bind="value:Employee.LastName" />
<br />
Country Name:
<select data-bind="options: fn.countryCollection, optionsCaption: 'Choose
country...',
optionsValue: function (item) { return item.CountryId; },
optionsText: function (item) { return item.CountryName; }, value: Employee.country,
valueUpdate: 'change'"
id="Country" name="Country">
</select>
<br />
State Name:
<select data-bind="options: fn.stateCollection, optionsCaption: 'Choose state...',
optionsValue: function (item) { return item.StateId; },
optionsText: function (item) { return item.StateName; }, value: Employee.state,
valueUpdate: 'change'"
id="State" name="State">
</select>
<br />
City Name:
<select data-bind="options: fn.cityCollection, optionsCaption: 'Choose city...',
optionsValue: function (item) { return item.CityId; },
optionsText: function (item) { return item.CityName; }, value: Employee.city,
valueUpdate: 'change'"
id="City" name="City">
</select>
<input type="button" data-bind="click: submit" value="Submit" id="btnSubmit" />
controller class
public ActionResult Submit(Employee dt)
{
string fname = dt.FirstName;
string lname = dt.LastName;
string cntry = dt.country;
string state = dt.state;
string city = dt.city;
return View();
}
