可观察数组——调用webservice列出所有记录并将其绑定到一个表

本文关键字：绑定 一个 记录 webservice 调用 数组 观察 | 更新日期: 2023-09-27 18:15:10

我有一个webservice，它是一个数组函数，列出了所有的记录。但是，我想在视图模型中调用它并将其绑定到我的表。这就是我所能做到的，我现在被困住了。非常感谢您的帮助或建议。

Web服务

 [WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)] //used to output response format into JSON rather than XML
public records[] list(string appName, int userId, string filterFields)
{
    records[] thisrecord = new records[1];
    int currentRow = 0;
    try
    {
           SQLText = "SELECT id,name FROM REcordTable order by name";
    // Connect to Database
        {
            using (DbCommand cmd = vcConnect.getDataCommand(appName, conn, SQLText))  
            {
                using (DbDataReader rdr = vcConnect.getDataReader(appName, cmd))      // Read the returned resultset
                {
                    while (rdr.Read())
                    {
                        if (currentRow > 0)
                           Array.Resize(ref thisrecord, currentRow + 1);
                        thisrecord[currentRow].id = (int)rdr["id"];
                        thisrecord[currentRow].name = rdr["name"].ToString();
                        currentRow++;
                    }
                }
            }
        }
    }
    catch (Exception Ex)
    {
    }
    return thisrecord;
}
HTML 

    <div id="records">
    <button title="button">Button</button>
    <table>
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: loop">
            <tr>
                <td data-bind="text: ViewModel.thisId"></td>
                <td data-bind="text: ViewModel.thisName"></td>
            </tr>
        </tbody>
    </table>
</div>

视图模型
var ViewModel = {
    loop: ko.observableArray([]);
    //I want to be able to call the webservice(records function) and be able to bind it  to the table and list out all the records.
    }

因此，我希望能够调用webservice(记录函数)，并能够将其绑定到表并列出所有记录。

可观察数组——调用webservice列出所有记录并将其绑定到一个表

html

<tbody data-bind="foreach: { data: records, as: 'record' }">
  <tr>
    <td data-bind="text: record.id"></td>
    <td data-bind="text: record.name"></td>
  </tr>
</tbody>
javascript 

function Record( data ){
  this.id=data.id;
  this.name=ko.observable( data.name );
}
function RecordsViewModel(){
  var self=this;
  self.records=ko.observableArray();
  self.fetch=function(){
    $.ajax({
      type: 'get',
      dataType: 'json',
      url: 'url to service',
      //...
    })
    .done( function( data ){ // handle the data
      self.records( ko.utils.arrayMap( data, function( item ){
        return new Record( item );
      }));
    });
  }
}

实例化viewModel

var viewModel=new RecordsViewModel();
ko.applyBindings( viewModel );
viewModel.fetch();

您也可以使用Ajax调用该方法

like this 

$.ajax({
                        type: "GET",
                        url: "URL WITH Method Name",
                        contentType: false,
                        processData: false,
                        data: data,
                        success: function (results) {
                            var msg = new Array();
                            for (i = 0; i < results.length; i++) {
                                vm.loop.push({ id: results[i][0], name: results[i][1] });
                            }                               
                        }
                    });

然后你可以使用KO绑定

<table>
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: loop">
            <tr>
                <td data-bind="text: Id"></td>
                <td data-bind="text: Name"></td>
            </tr>
        </tbody>
    </table>
相关文章：