Question

要求：

我的要求是我必须从数据库获取国家，州和城市数据并使用表格中的knocout将其绑定到下拉列表（级联下拉列表）..然后我将firstname和lastname添加到该表单中..最后我必须提交下拉值以及firstname和lastname to action方法..但我只能提交firstname和lastname ...下拉值不绑定到action方法..我认为我在选择标签或任何地方都是错误的..朋友请帮助我在哪里弄错了......

<小时/> 下拉值是否未使用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();
    }

Answer 1

试试这个。

var EmpData= {
        FirstName: self.Employee.FirstName(),
        LastName: self.Employee.LastName(),
        country: self.Employee.country(),
        state: self.Employee.state(),
        city: self.Employee.city()
    };

使用ko.toJS发送数据

data: ko.toJS(EmpData),

敲除绑定问题和mvc4？下拉值是不是使用knockout提交给动作方法？

1 个答案: