Tuesday, March 5, 2013

How to bind data to a Jquery Mobile ListView

Below example uses an ASP.NET web service to bind data to a Jquery mobile ListView Control.

ASP.NET WebService: 

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)]
    public class Service1 : System.Web.Services.WebService

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


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

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

HTML MarkUp:

 <!DOCTYPE html> 
    <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>
<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>

Jquery Script:

    var serviceURL = 'service1.asmx/GetLankanList';

            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

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

    function errorFunc(){

No comments:
Write comments
Recommended Posts × +