如何使用knockout js绑定datalist中的json数据

时间:2016-10-31 21:20:39

标签: javascript jquery asp.net json ajax

这是我的网络服务代码:

 public class SympsService : System.Web.Services.WebService
{

    [WebMethod]
    public symps GetSymptoms(string organ_name)
    {
      symps Symptoms  = new symps();
        string CS = ConfigurationManager.ConnectionStrings["EhealtsCS"].ConnectionString;
        using (SqlConnection con = new SqlConnection(CS))
        {
            SqlCommand cmd = new SqlCommand("sendSymptoms", con);
            cmd.CommandType = CommandType.StoredProcedure;

            SqlParameter parameter = new SqlParameter();
            parameter.ParameterName = "@organ";
            parameter.Value = organ_name;
            cmd.Parameters.Add(parameter);
            con.Open();
            SqlDataReader rdr = cmd.ExecuteReader();
            if (rdr.Read())
            {
                Symptoms.Sympt = rdr["SymptomsName"].ToString();
            }
              return Symptoms;
        }    
    }
}

它将json数据返回给jquery ajax.this是我的ajax代码:

$.ajax({
                url: 'SympsService.asmx/GetSymptoms',
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({ organ_name: 'toes' }),
                method: 'post',
                dataType: 'json',
                success: function (data) {

                    $('#Text1').val(data.d.sympt);
                },
                error: function (err) {
                    alert(err);
                }
            });

现在我在文本框中显示数据,但我想使用knockout js或类似的东西在datalist上显示它可以动态显示每个数据。我可以这样做。任何领导也很感激。有没有更好的方法来做到这一点?提前谢谢。

1 个答案:

答案 0 :(得分:0)

实际上,每个前端框架都可以解决这个问题。如果你想使用knockout.js,你可以写一些像(未经测试的):

var DataGridModel = function() {
  this.rows = ko.observableArray();
}

var dataGrid = new DataGridModel();
ko.applyBindings(dataGrid);

$.ajax({
  ...
  success: function(data) {
    dataGrid([]);
    // Assume data is key-value store like {key1:'value1',key2:'value2'}
    for (var key in data) {
      if (data.hasOwnProperty(key)) {
        dataGrid.push({key:key,value:data[key]});
      }
    }
  }
});

您还必须编写如下的HTML代码:

<table>
  <tbody data-bind="foreach:rows">
    <tr>
      <td data-bind="text:key"></td>
      <td data-bind="text:value"></td>
    </tr>
  </tbody>
</table>