CODEWITHSUNDEEP
jqueryasp.net-mvcknockout.js
Stfvns
Stfvns

Reputation: 1041

How to pass parameter foreach from html to controller using knockoutJs

I want parsing parameter foreach from CSHTML. using foreach from knockout.js <div data-bind="foreach: viewPjsp(1)">.

Javascipt:

function ColumnInput(Id, NameColumn) {
  var self;
  self = this;
  self.Id = ko.observable(Id || null);
  self.NameColumn = ko.observable(NameColumn || null);
}

(function () {
'use strict';
function ElicensingPjspViewModel() {
    var self = this;

    self.viewPjsp = ko.observableArray([]);

    self.getViewPjsp = function (data, event) {
        var url;

        $.ajax({
            type: "GET",
            url: $.rootDir + 'PJSP/PjspEvaluationDetail?AspectId=1', --> here parameter I want to parsing
            success: function (data) {
                var result;
                console.log(data);

                result = ko.utils.arrayMap(data.permission, function (item) {
                    return new KolomInput(item.Id, item.NameColumn);
                });

                self.viewPjsp(result);
            },
            error: function (xhr) {
                alert(xhr.responseText);
            }
        });
    };
    self.getViewPjsp();
}

ko.applyBindings(new ElicensingPjspViewModel(), document.getElementById('pjsp_prinsipal'));
}());

This Javascript hasn't been used parameter. How to call viewPjsp(1) then send to URL in ajax using parameter ?AspectId=xxxx. How to pass parameter knockout from html to javascript

Upvotes: 1

Views: 635

Answers (1)

Nathan Fisher
Nathan Fisher

Reputation: 7941

When an array is used with the foreach knockout binding, it used the current iteration object as the data context for the html markup that is contained within bound foreach html element. So you can do something like the following snippet. I have added the extra functionality to allow a click on the table row to show the ID of the person. I will leave it to you to modify the example to fit your needs.

function getData(data){
  alert("The Id of the person is " + data.id);
}

ko.applyBindings({
        people: [
            { firstName: 'Bert', lastName: 'Bertington', id: 1 },
            { firstName: 'Charles', lastName: 'Charlesforth', id: 2 },
            { firstName: 'Denise', lastName: 'Dentiste', id: 3 }
        ]
    });
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<!-- example from here - https://knockoutjs.com/documentation/foreach-binding.html -->
<table class="table">
    <thead>
        <tr><th>First name</th><th>Last name</th></tr>
    </thead>
    <tbody data-bind="foreach: people">
        <tr data-bind="click: getData">
            <td data-bind="text: firstName"></td>
            <td data-bind="text: lastName"></td>
        </tr>
    </tbody>
</table>

For a better explanation look at the knockout documentation where this example comes from. Knockout "foreach" Binding

Upvotes: 1

Related Questions