jquery - issue while submitting cascading dropdown using knockout -
i have created cascading dropdown using knockoutjs i.e. retrieved data database , bind dropdown using knockout.now stuck while submitting data database, how submit data using knockout database:
<script src="~/scripts/jquery-1.8.2.min.js"></script> <script src="~/scripts/knockout-2.2.0.js"></script> <script type="text/javascript"> $(document).ready(function () { fetchcountries(); $("#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) { viewmodel.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) { viewmodel.citycollection.push(element); }); ko.applybindings(viewmodel); } } }); }); function fetchcountries() { viewmodel = { countrycollection: ko.observablearray(), statecollection: ko.observablearray(), citycollection: ko.observablearray() }; $.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) { viewmodel.countrycollection.push(element); }); ko.applybindings(viewmodel); } } }); } var sel = document.getelementbyid('country'), myvar = sel.options[sel.selectedindex].value; var sel = document.getelementbyid('state'), myvar1 = sel.options[sel.selectedindex].value; var sel = document.getelementbyid('city'), myvar2 = sel.options[sel.selectedindex].value; alert(myvar2) function viewmodel() { var employee = {}; employee.firstname = ko.observable(), employee.lastname = ko.observable(), employee.countrycollection = myvar, employee.statecollection = myvar1, employee.citycollection = myvar2 } $('#btnsubmit').live("click", function (e) { $.ajax({ url: '/home/submit/', async: true, cache: false, type: 'post', data: ko.tojson(viewmodel), contenttype: 'application/json', success: function (result) { } }); }); }); </script> <h2>cascading dropdown using knockout</h2> firstname: <input type="text" id="txtfirstname" name="txtfirstname" data-bind="value:firstname" /> <br /> lastname: <input type="text" id="txtlastname" name="txtfirstname" data-bind="value:lastname" /> <br /> country name: <select data-bind="options: countrycollection, optionscaption: 'choose country...', optionsvalue: function (item) { return item.countryid; }, optionstext: function (item) { return item.countryname; }, value: country, valueupdate: 'change'" id="country" name="country"> </select> <br /> state name: <select data-bind="options: statecollection, optionscaption: 'choose state...', optionsvalue: function (item) { return item.stateid; }, optionstext: function (item) { return item.statename; }, value: state, valueupdate: 'change'" id="state" name="state"> </select> <br /> city name:`enter code here` <select data-bind="options: citycollection, optionscaption: 'choose city...', optionsvalue: function (item) { return item.cityid; }, optionstext: function (item) { return item.cityname; }, value: city, valueupdate: 'change'" id="city" name="city"> </select> <input type="submit" value="submit" id="btnsubmit" /> **controller class:** [httppost] public actionresult submit(object bind) { string fname = request.form["txtfirstname"]; string lname = request.form["txtlastname"]; return view(); } model class: public class citydto { public int stateid { get; set; } public int cityid { get; set; } public string cityname { get; set; } } public class countrydto { public int countryid { get; set; } public string countryname { get; set; } } public class statedto { public int stateid { get; set; } public int countryid { get; set; } public string statename { get; set; } } public static class converter { //public static countries countrydtotocountries(countrydto d) //{ // return new countries // { // countryid = d.countryid, // countryname = d.countryname // }; //} public static countrydto countriestocountrydto(tblcountry e) { return new countrydto { countryid = e.countryid, countryname = e.countryname }; } public static list<countrydto> lcountriestocountrydto(list<tblcountry> e) { list<countrydto> lstcountrydto = e.select( country => new countrydto() { countryid = country.countryid, countryname = country.countryname }).tolist(); return lstcountrydto; } public static statedto statestostatedto(tblstate e) { return new statedto { stateid = e.stateid, statename = e.statename }; } public static list<statedto> lstatestostatedto(list<tblstate> e) { list<statedto> lststatedto = e.select( state => new statedto() { stateid = state.stateid, statename = state.statename }).tolist(); return lststatedto; } public static citydto citiestocitydto(tblcity e) { return new citydto { cityid = e.cityid, cityname = e.cityname }; } public static list<citydto> lcitiestocitydto(list<tblcity> e) { list<citydto> lstcitydto = e.select( city => new citydto() { cityid = city.cityid, cityname = city.cityname }).tolist(); return lstcitydto; } } public class locationrepository : ilocationrepository { public list<countrydto> getcountries() { using (sampleentities1 dbcontext1 = new sampleentities1()) { var lstcountries = r in dbcontext1.tblcountries select r; list<countrydto> lst = new list<countrydto>(); lst = converter.lcountriestocountrydto(lstcountries.tolist()); return lst; } } public list<statedto> getstates(int countryid) { using (sampleentities1 dbcontext = new sampleentities1()) { //var lststates = r in dbcontext.states select r; //dbcontext.states.where(x => x.countryid == countryid).select(x => new { x.stateid, x.statename }).tolist(); var lststates = dbcontext.tblstates.where(b => b.countryid == countryid).tolist(); list<statedto> list = new list<statedto>(); list = converter.lstatestostatedto(lststates.tolist()); return list; } } public list<citydto> getcities(int stateid) { using (sampleentities1 dbcontext = new sampleentities1()) { //var lststates = r in dbcontext.states select r; //dbcontext.states.where(x => x.countryid == countryid).select(x => new { x.stateid, x.statename }).tolist(); var lstcities = dbcontext.tblcities.where(b => b.stateid == stateid).tolist(); list<citydto> list = new list<citydto>(); list = converter.lcitiestocitydto(lstcities.tolist()); return list; } } }
when working knockout try use ko as can. instance, instead of using jquery on change can subscribe country observable.secondly should use click binding on jquery on click. there no need of multiple applybindings also.
so view model :-
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(); self.submit = function () { $('#btnsubmit').live("click", function (e) { $.ajax({ url: '/home/submit/', async: true, cache: false, type: 'post', data: ko.tojs(self), contenttype: 'application/json', success: function (result) { } }); }); } //subscribe seleted country value self.employee.country.subscribe(function (newvalue) { var countryid = newvalue; $.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); }); } } }); }); //subscribe seleted country value self.employee.state.subscribe(function (newvalue) { var stateid = newvalue; $.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); }); } } }); }); 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(); } ko.applybindings(new viewmodel()); my view(.cshtml)
<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" />
Comments
Post a Comment