Передать массив на сторону клиента для отображения - PullRequest
3 голосов
/ 20 марта 2010

У меня есть массив, который содержит около 50-200 гиперссылок. Как я могу передать этот массив на стороне клиента, чтобы я мог перебирать массив и отображать каждую гиперссылку как элемент списка? Массив будет храниться в «Приложении», поскольку он общесистемный и редко изменяется. Может ли быть более эффективный способ получения гиперссылок в виде списка?

Спасибо

Ответы [ 5 ]

4 голосов
/ 20 марта 2010

Действительно хорошее место для начала работы с веб-формами, JSON и JQuery - эта ссылка:

http://encosia.com/2008/03/27/using-jquery-to-consume-aspnet-json-web-services/

Также ознакомьтесь с JSON.NET: http://www.codeplex.com/Json

2 голосов
/ 20 марта 2010

Хотя я понимаю, что вы получаете URL-адреса из приложения, в этом примере используется искусственный источник URL-адреса, который вы можете изменить в соответствии со своими потребностями. Я думаю, вы, вероятно, захотите сохранить текст URL / ссылки, поэтому я использовал KeyValuePair<string,string> в качестве типа элемента массива. Если вам действительно нужен только URL, просто измените KeyValuePair<string,string> на строку.

jQuery .getJSON

Использование простого обработчика страниц aspx будет выполнено примерно так:

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>

jQuery.ajax

Использование веб-сервиса представит некоторые новые концепции, такие как использование атрибута «ScriptService».

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>

.ASPX код позади

Сделать это без ajax из codebehind довольно тривиально

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>

Надеюсь, это поможет, Sky

1 голос
/ 20 марта 2010

Вы можете преобразовать массив в JSON и обработать его на стороне клиента.

0 голосов
/ 20 марта 2010

Если вас не интересуют поисковые системы, тогда делайте это на стороне клиента, json - мои предпочтения. Но если вы хотите, чтобы поисковые системы могли видеть эти ссылки, то серверная сторона - ваш единственный вариант.

0 голосов
/ 20 марта 2010

Использование ASPNET MVC может сделать это очень просто. Даже если вы никогда не использовали ASPNET MVC, вам будет легко использовать его в своем приложении ASP.NET.

Вам понадобится контроллер и хотя бы одно действие. Действие должно вернуть JsonResult.

это выглядит так в коде:

using System.Collections.Generic;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;

namespace MvcApplication1.Controllers
{
    public class DemoController : Controller // the name is used in the URL
    {
        public JsonResult LinkList(int? arg)  // the name is used in the URL
        {
            var = new List<String>();
            // build the list here.  You could also use an existing one. 
            foreach (string link in linkSet)
                list.Add(link);
            return this.Json(list, JsonRequestBehavior.AllowGet);
        }
    }
}

Перетащите это в подкаталог App_Code приложения ASPNET.
Этот метод похож на [WebMethod] в ASMX, но он генерирует JSON. Чтобы вызвать его, сделайте GET на http://server/vdir/Demo/LinkList. Часть «Demo» - это имя класса Controller, за исключением суффикса «Controller». «LinkList» в пути URL - это имя метода на контроллере. Это должно быть публично.

json, сгенерированный этим методом, будет выглядеть так:

[ "http://jvcpbdvcj/scbwkthoxlng/lhxktjght/zgfd/cuuenirukwag",
  "http://vskwkzpwaxn/eeitpup/twwshynjjcw/lblxdx/rwljaqicfgpz",
  "http://foczucekdl/ljap/napvchbkcs", 
  ....
]

Это просто 1-D массив ссылок. Сделать необходимый запрос из браузера очень просто с помощью jQuery.

    $.ajax({
      url     : "http://myserver/vdir/Demo/LinkList",
      type    : "GET", // http method
      cache   : false,
      success : function(result) {  // called on successful (200) reply
         ....
      }
    });

В функции успеха вы можете выполнять итерации по списку, выбрасывая в свой документ элементы <a> или что угодно. Как это:

      success : function(result) {
        if (result !== null){
          for(var i = 0; i < result.length; i++) {
            var onelink = '<a href="' + result[i] + '">link ' + i + '</a><br/>';
            $('#output').append(onelink);
          }
        }
      }

Конечно, вы можете добавить к этому, чтобы сделать его более сложным. Вы можете параметризовать запрос GET. Вы можете изменить форму исходящего JSON так, чтобы это был объект с различными свойствами (отметка времени, идентификатор, что угодно), а не просто массив. Вы можете быть более элегантным на стороне браузера при создании списка ссылок. Есть много других вариантов. Но вы поняли.


ASPNET MVC гораздо предпочтительнее, чем ASMX, при обслуживании клиентов браузера из-за его встроенной поддержки сериализации JSON и из-за очень простой модели. Заметьте, что мне не нужно было явно задавать тип содержимого, создавать JSON вручную, возиться с другими вещами в Response и так далее. Это просто работает.

Похожие: Как реализовать сайт с ASP.NET MVC без использования Visual Studio?

...