Невозможно привязать значения к таблице html, используя foreach, используя knockout js

0

Привет, я работаю для привязки списка значений с помощью konckout js в контроллере api, вот мой код. В нокаут iam, получая список значений, но в представлении значение страницы не получает binded. В контроллере это мой код

 public Qualification Get()
            {
                Qualification qualmodel = new  Qualification();
                Qualify qul = new Qualify();
                qualmodel.leadqualificlist = new List<Qualify>();
                LeadQualificationCriteria leadqual = new LeadQualificationCriteria();
                iWISEDataContainer leadqualif = new iWISEDataContainer();
                foreach (var test in leadqualif.LeadQualificationCriterias)
                {

                    qul.LeadQualifition = test.LeadQualificationFactor;
                    qul.Negativescore = test.NegativeScoreText;
                    qul.Neutralscore = test.PositiveScoreText;
                    qul.Positivescore = test.PositiveScoreText;

                    qualmodel.leadqualificlist.Add(qul);

                }

              return qualmodel;

            }

и мой код нокаута:

function LeadQualificationModel() {
    debugger;
    var self = this;
    self.LeadQualifition = ko.observable("");
    self.Negativescore = ko.observable("");
    self.Neutralscore = ko.observable("");
    self.Positivescore = ko.observable("");
    self.Scoreschk = ko.observable("");
    self.Commenttext = ko.observable("");
    self.leadqualificlist = ko.observableArray();

    var baseUri = '/api/Qualification'; 
        $.ajax({
            url: '/api/Qualification',
            type: 'GET',
            contentType: 'application/json; charset=utf-8',
            data: {},
            success: function (data1) {

                self.leadqualificlist(data1.leadqualificlist); //Here iam getting list of values
                debugger;
                //Put the response in ObservableArray                    
            },
            error: function (error) {
                alert(error.status + "<--and--> " + error.statusText);
            }
        });    
  $(document).ready(function () {
    debugger;
    ko.applyBindings(new LeadQualificationModel());
})

и мой html-дизайн

<div style="width: 1100px; height: 700px;" class="container">
        <div style="width: 1100px; height: 110px; background-color: burlywood">
            <table>
                <tr>
                    <td style="width: 400px; height: 110px; background-color: burlywood;" align="left">
                        <h3>Qualification Factor</h3>
                    </td>
                    <td style="width: 400px; height: 110px; background-color: burlywood" align="center">
                        <h3>Score</h3>
                    </td>
                    <td style="width: 400px; height: 110px; background-color: burlywood" align="center">
                        <h3>Comment</h3>
                    </td>
                </tr>
            </table>
        </div>
        <div style="width: 1100px; height: 580px; border: 1px solid; overflow-x: scroll; overflow-y: scroll;" >    
            <table>              
                <tbody data-bind="foreach: leadqualificlist">                     
                    <tr>
                        <td style="width: 250px; height: 130px;">                          
                            <h4 data-bind="text: LeadQualifition"></h4>                           
                        </td>
                        <td style="width: 580px; height: 80px;">
                            <table>
                                <tr>
                                    <td style="width: 210px; height: 50px;" align="center">
                                        <h4>Negative</h4>
                                    </td>
                                    <td style="width: 210px; height: 50px;" align="center">
                                        <h4>Neutral</h4>
                                    </td>
                                    <td style="width: 210px; height: 50px;" align="center">
                                        <h4>Positive</h4>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="width: 210px; height: 50px;" align="center">

                                        <h4 data-bind="text: Negativescore">
                                            <br />
                                            0-1-2-3</h4>
                                    </td>
                                    <td style="width: 210px; height: 50px;" align="center">
                                        <h4 data-bind="text: Neutralscore">
                                            <br />
                                            4-5-6</h4>
                                    </td>
                                    <td style="width: 210px; height: 50px;" align="center">
                                        <h4 data-bind="text: Positivescore">
                                            <br />

                                            7-8-9</h4>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="width: 210px; height: 50px;" align="center">
                                        <input type="radio" style="width: 20px; height: 20px;" data-bind="checked:$root.Scoreschk" />
                                        <input type="radio" style="width: 20px; height: 20px;" data-bind="checked:$root.Scoreschk" />
                                        <input type="radio" style="width: 20px; height: 20px;" data-bind="checked:$root.Scoreschk" />
                                        <input type="radio" style="width: 20px; height: 20px;" data-bind="checked:$root.Scoreschk" />
                                    </td>
                                    <td style="width: 210px; height: 50px;" align="center">
                                        <input type="radio" style="width: 20px; height: 20px;" data-bind="checked:$root.Scoreschk" />
                                        <input type="radio" style="width: 20px; height: 20px;" data-bind="checked:$root.Scoreschk" />
                                        <input type="radio" style="width: 20px; height: 20px;" data-bind="checked:$root.Scoreschk" />

                                    </td>
                                    <td style="width: 210px; height: 50px;" align="center">
                                        <input type="radio" style="width: 20px; height: 20px;" data-bind="checked: $root.Scoreschk" />
                                        <input type="radio" style="width: 20px; height: 20px;" data-bind="checked: $root.Scoreschk" />
                                        <input type="radio" style="width: 20px; height: 20px;" data-bind="checked: $root.Scoreschk" />

                                    </td>
                                </tr>


                            </table>
                        </td>
                        <td>
                            <textarea style="width: 300px; height: 110px;" data-bind="value:$data.Commenttext">Text Box
                            </textarea>

                        </td>
                    </tr>                                 
                </tbody>  
            </table>

            <table style="width: 100%">
                <tr>
                    <td></td>
                    <td></td>
                    <td align="center">

                        @* <button data-bind="click :$root.create"  style="background-color:burlywood">Save</button>*@
                        <input type="submit" title="Save" value="Submit" data-bind="click:$root.create" style="background-color: burlywood" />
                        <input type="submit" title="Save" value="Next Stage" style="background-color: burlywood" />
                    </td>
                </tr>

            </table>
        </div>
    </div>
</body>
</html>

СМОТРЕТЬ МОДЕЛИ:

  public class Qualification 
        {
            public int Qualificationid { get; set; }
            public string LeadQualifition { get; set; }
            public string Negativescore { get; set; }
            public string Neutralscore { get; set; }
            public string Positivescore { get; set; }
            public int Scoreschk { get; set; }
            public string Commenttext { get; set; }

            public List<Qualify> leadqualificlist { get; set; }

        }

ДРУГОЙ:

public class Qualify
    {
        public string LeadQualifition { get; set; }
        public string Negativescore { get; set; }
        public string Neutralscore { get; set; }
        public string Positivescore { get; set; }
    }

EDIT: я получаю счет как 13. мои значения индекса Zeroth:

LeadQualifition = "Winning products and services"
Negativescore = "Competitors very strong in this area"
Neutralscore = "Strong  differentiators"
Positivescore = "Strong differentiators"

Вероятно, у меня есть данные для 13 строк.

Попросите кого-нибудь предложить привязать значения на странице просмотра. С Уважением,

  • 0
    ты можешь написать скрипку
  • 0
    список данных, получаемых из базы данных, поэтому я не могу использовать скрипку
Показать ещё 5 комментариев
Теги:
asp.net-mvc
knockout.js

2 ответа

0

я думаю, что у вас нужно выталкивать данные в наблюдаемом массиве, например

for(  i=0; i<=data1.length;i++)

  self.leadqualificlist.Push(data1[i]) /// plz modify as per your data

}
  • 0
    TY для ответа. Вышеупомянутое для цикла даже не входит. любые предложения приятель
  • 0
    Вы можете отправить мне формат данных ???
Показать ещё 8 комментариев
0

Я делаю это, используя следующее:

Локальная функция, определенная в модели представления для поддержки типа членства в массиве, например

var Device = function (data) {
    this.id= ko.protectedObservable(data.id);
    this.name= ko.protectedObservable(data.name);
};

Если ответ ajax успешный, я сопоставляю результат, например, в следующем примере devices - это наблюдаемый массив.

success: function (data) {
    var mappedDevices = $.map(data.devices, function (item) { return new Device(item); });

    self.devices(mappedDevices);
    // Update the gui
    self.devicesLoaded(true);
    $('#devices-table').trigger('update');
}

Если пример, предоставленный Vivek, не работает, используйте инструменты браузера dev для проверки того, что ответ действительно содержит данные в массиве leadqualificlist.

Вот пример jsfiddle.

  • 0
    хорошо, приятель, я новичок в нокауте, я не уверен, что ты делаешь. было бы более красноречивым. я редактирую свой пост, пожалуйста, найдите сущности viewmodel
  • 0
    Я обновил свой ответ с примером.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню