简单的数据绑定 jquery mobile listview答案

【问题标题】：Simple Data binding jquery mobile listview简单的数据绑定 jquery mobile listview
【发布时间】：2013-03-01 06:19:26
【问题描述】：

我是 Jquery 移动版的新手。我正在尝试将数据绑定到列表视图。下面是我的代码。当我运行页面时，它没有显示列表视图。请帮忙。

我的服务方式

[WebMethod]
    public static string[] GetNames() {
        string[] names = {"chamara","janaka","asanka" };
        return names;
    }

我的 HTML 代码：

<form id="form1" runat="server">
  <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">
            </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">

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

            },
            failure: function (msg) {
                alert(msg);
            }
        });
    </script>

    </form>

【问题讨论】：

在你的成功函数中输入console.log(data)，然后告诉我你得到了什么。
嗨！我仍然得到与屏幕截图所示相同的空白页面
在你的 chrome 中按 F12 并检查浏览器控制台并告诉我你得到了什么。
加载资源失败：服务器响应状态为 500（内部服务器错误）
这意味着您的服务无法正常工作或您以错误的方式调用 Web 服务。

标签： jquery asp.net ajax jquery-mobile mobile

【解决方案1】：

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

服务

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; }
        }
    }
}

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');
    }
});

最终输出

你可以download the source here

【讨论】：

朋友你好！非常感谢您的帮助。这是一个很大的帮助。我会努力解决这个问题。
嗨，玛玉！为什么我们不能定义 var listString = '
理想情况下你应该能够做到。试试看。我不确定它是否会弄乱列表样式。在这种情况下，我想你最好尝试.append() 方法而不是.html() 方法。
@MayuMayooresan 我已经使用了上面的示例，它工作正常。但是我有大量数据，我必须在使用 web 服务时获取这些数据，因此应用程序变得非常慢。他们是我只能获取大量数据并绑定到listview的一种方式吗？我是新来的。任何帮助将不胜感激。在此先感谢:):)