Menu
I have an array which contains around 50-200 hyperlinks. How can I pass this array to the client-side so that I can iterate through the array and display each hyperlinks as a list item? The array will be stored in 'Application' as it's system wide and rarely changes. Could there be a more efficient way of achieving the hyperlinks as a list?
Thanks
527
A really good place to start with Web Forms and JSON and JQuery is this link:
http://encosia.com/2008/03/27/using-jquery-to-consume-aspnet-json-web-services/
Also check out JSON.NET: http://www.codeplex.com/Json
111
While I realize you are getting your URLs from Application, this example uses a contrived url source that you can modify to your needs. I would think you would probably want to store url/link text so I used KeyValuePair<string,string> as the array element type. If you truly need only the URL, simply change KeyValuePair<string,string> to string.
Using a simple aspx page handler would be accomplished something like this:
UriListHandler.aspx
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Import Namespace="System.Web.Script.Serialization" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
string someParam = Request["someParam"] ?? "";
Response.ClearContent();
Response.ClearHeaders();
// prevent cacheing
Response.Cache.SetExpires(DateTime.UtcNow.AddMinutes(-1));
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.Cache.SetNoStore();
Response.ContentType = "text/plain";
// note, this is just a list, not a dictionary. Keys need not be unique
KeyValuePair<string, string>[] uriList = new KeyValuePair<string, string>[100];
for (int i = 0; i < uriList.Length; i++)
{
uriList[i] = new KeyValuePair<string, string>(String.Format("http://www.example.com/page{0}.htm?someParam={1}", i, someParam), String.Format("page{0}", i));
}
JavaScriptSerializer serializer = new JavaScriptSerializer();
string json = serializer.Serialize(uriList);
Response.Write(json);
}
</script>
UriListClient.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#getUriListButton').click(function() {
$.getJSON('UriListHandler.aspx',
{ someParam: "HEY" },
function(responseObj, status, xhr) {
var list = $('<div/>');
for (var i = 0; i < responseObj.length; i++) {
var link = $('<a/>').attr('href', responseObj[i].Key).html(responseObj[i].Value);
list.append(link).append('<br/>');
}
var uriListContainer = $('#uriListContainer');
uriListContainer.html('').append(list);
});
});
});
</script>
</head>
<body>
<button id="getUriListButton">
Get Uri List</button>
<div id="uriListContainer">
</div>
</body>
</html>
Using a webservice is going to introduce some new concepts such as using 'ScriptService' attribute.
UriListService.asmx.cs
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Web;
using System.Web.Script.Services;
using System.Web.Services;
namespace WebApplication1
{
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[ScriptService] // we uncommented the following line ;-)
public class UriListService : WebService
{
[WebMethod]
public KeyValuePair<string, string>[] GetUriList(string someParam)
{
// prevent cacheing
HttpContext.Current.Response.Cache.SetExpires(DateTime.UtcNow.AddMinutes(-1));
HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache);
HttpContext.Current.Response.Cache.SetNoStore();
// note, this is just a list, not a dictionary. Keys need not be unique
var uriList = new KeyValuePair<string, string>[100];
for (int i = 0; i < uriList.Length; i++)
{
uriList[i] =
new KeyValuePair<string, string>(
String.Format("http://www.example.com/page{0}.htm?someParam={1}", i, someParam),
String.Format("page{0}", i));
}
return uriList;
}
}
}
UriListServiceClient.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#getUriListButton').click(function() {
$.ajax({
url: 'UriListService.asmx/GetUriList',
type: "post", // http post to ScriptService
data: '{"someParam": "HEY"}', // the params expected by the server
contentType: "application/json", // sending json request
dataType: "json", // expecting json response
success: function(data) {
var unwrappedDate = data.d;
var list = $('<div/>');
for (var i = 0; i < unwrappedDate.length; i++) {
var link = $('<a/>').attr('href', unwrappedDate[i].Key).html(unwrappedDate[i].Value);
list.append(link).append('<br/>');
}
var uriListContainer = $('#uriListContainer');
uriListContainer.html('').append(list);
},
error: function(a, b, c) {
alert(a.responseText);
}
});
});
});
</script>
</head>
<body>
<button id="getUriListButton">
Get Uri List</button>
<div id="uriListContainer">
</div>
</body>
</html>
To do this without ajax from codebehind is fairly trivial
UriListFromCodeBehind.aspx
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<script runat="server">
public static void RenderUriList(string someParam)
{
// note, this is just a list, not a dictionary. Keys need not be unique
var uriList = new KeyValuePair<string, string>[100];
for (int i = 0; i < uriList.Length; i++)
{
uriList[i] =
new KeyValuePair<string, string>(
String.Format("http://www.example.com/page{0}.htm?someParam={1}", i, someParam),
String.Format("page{0}", i));
}
for (int i = 0; i < uriList.Length; i++)
{
HttpContext.Current.Response.Write(String.Format("<a href='{0}'>{1}</a><br/>\r\n", uriList[i].Key, uriList[i].Value));
}
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
Uri List:<br />
<%
RenderUriList("HEY"); %>
</div>
</form>
</body>
</html>
Hope that helps, Sky
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
