如何将数据绑定到Jquery Mobile listview_Jquery_Asp.net_Ajax_Jquery Mobile_Data Binding

如何将数据绑定到Jquery Mobile listview

jquery asp.net ajax jquery-mobile data-binding

如何将数据绑定到Jquery Mobile listview,jquery,asp.net,ajax,jquery-mobile,data-binding,Jquery,Asp.net,Ajax,Jquery Mobile,Data Binding,下面是我的代码，数据没有绑定到listview。显示一个空页 <div data-role="page" id="index"> <div data-role="header"> <h1> demo</h1> </div> <div data-role="content"> <ul data-

下面是我的代码，数据没有绑定到listview。显示一个空页

<div data-role="page" id="index">
        <div data-role="header">
            <h1>
                demo</h1>
        </div>
        <div data-role="content">
            <ul data-role="listview" data-inset="true" id="cars-data">
            <li >abcd</li>
            <li>cdf</li>
            </ul>
        </div>
    </div>
    <div data-role="page" id="cars">
        <div data-role="header">
            <a data-role="button" data-transition="none" data-theme="a" href="#index">Back</a>
            <h1>
            </h1>
        </div>
        <div data-role="content">
            <ul data-role="listview" data-inset="true" id="car-data">
            </ul>
            <img src="" width="100%" style="height: auto;" id="car-img">
        </div>
    </div>
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function () {

            $.ajax({
                type: "POST",
                async: true,
                url: "PINCWebService.asmx/GetContacts",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    // $("#car-data").html(data);
                    var list = $("#car-data");
                    list.empty();

                    $.each(data, function (rowIndex) {
                       var datar = data.rows.item(rowIndex);
                        list.append("<li>" + datar + "</li>");
                    });

                    list.listview('refresh');
                }

            });
        });
    </script>


演示

abcd
cdf



$（文档）.ready（函数（）{
$.ajax({
类型：“POST”，
async:true，
url:“PINCWebService.asmx/GetContacts”，
数据：“{}”，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：功能（数据）{
//$（“#汽车数据”）.html（数据）；
var列表=$（“#汽车数据”）；
list.empty（）；
$.each（数据、函数（行索引）{
var datar=data.rows.item（rowIndex）；
列表。追加（“”+datar+“”）；
});
listview（“刷新”）；
}
});
});

我为你写了一些东西。请找出每件事情是如何完成的

服务

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Serialization;

namespace SimpleWebService
{

    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    [System.Web.Script.Services.ScriptService]
    public class Service1 : System.Web.Services.WebService
    {

        [WebMethod]
        public string GetLankanList()
        {
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            List<Lankans> lankanList = new List<Lankans>();
            string[] names = { "chamara", "janaka", "asanka" };

            for (int i = 0; i < names.Length; i++)
            {
                Lankans srilankans = new Lankans();
                srilankans.Name = names[i];

                lankanList.Add(srilankans);
            }

            string jsonString = serializer.Serialize(lankanList);
            return jsonString;
        }

        public class Lankans
        {
            public string Name { get; set; }
        }
    }
}

使用系统；
使用System.Collections.Generic；
使用System.Linq；
使用System.Web；
使用System.Web.Services；
使用System.Web.Script.Serialization；
命名空间SimpleWebService
{
[WebService（命名空间=”http://tempuri.org/")]
[WebServiceBinding（ConformsTo=WsiProfiles.BasicProfile1_1）]
[System.ComponentModel.ToolboxItem（false）]
[System.Web.Script.Services.ScriptService]
公共类服务1:System.Web.Services.WebService
{
[网络方法]
公共字符串GetLankanList（）
{
JavaScriptSerializer serializer=新的JavaScriptSerializer（）；
List lankanList=新列表（）；
string[]name={“chamara”、“janaka”、“asanka”}；
for（int i=0；i


HTML
<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head> 
<body> 

<div data-role="page" id="lankalistpage">

    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <div id="LankanLists"></div>        
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->
<script src="lankanscript.js"></script>
</body>
</html>


页面标题
页面标题
页脚

JavaScript
$('#lankalistpage').live('pageshow',function(event){
    var serviceURL = 'service1.asmx/GetLankanList';

    $.ajax({            
            type: "POST",
            url: serviceURL,
            data: param="",
            contentType:"application/json; charset=utf-8",
            dataType: "json",
            success: successFunc,
            error: errorFunc
    });

    function successFunc(data, status){
        // parse it as object
        var lankanListArray = JSON.parse(data.d);

        // creating html string
        var listString = '<ul data-role="listview" id="customerList">';

        // running a loop
        $.each(lankanListArray, function(index,value){
         listString += '<li><a href="#" >'+this.Name+'</a></li>';
        });
        listString +='</ul>';



        //appending to the div
        $('#LankanLists').html(listString);

        // refreshing the list to apply styles
        $('#LankanLists ul').listview();
    }

    function errorFunc(){
        alert('error');
    }
});

$（'lankalistpage'）.live（'pageshow'，函数（事件）{
var serviceURL='service1.asmx/GetLankanList'；
$.ajax（{
类型：“POST”，
url:serviceURL，
数据：param=“”，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：successFunc，
错误：errorFunc
});
函数successFunc（数据、状态）{
//将其解析为对象
var lankanListArray=JSON.parse（data.d）；
//创建html字符串
var listString=''；
//运行循环
$.each（LankanStarray，函数（索引，值）{
listString+=''；
});
listString+=''；
//附加到div
$（'#LankanLists'）.html（列表字符串）；
//刷新列表以应用样式
$（'#LankanLists ul'）.listview（）；
}
函数errorFunc（）{
警报（“错误”）；
}
});

最终产量

您可以
我已经用完整的代码回答了您的问题