Ali Majed HA Ответов: 2

Как сделать динамический список в HTML

Привет
в HTML-файле у меня есть список, который повторяется для создания списка, как показано ниже:
<div class="item">
  <div class="gallery-carousel-item">                              
    
      
        <div class="hover-mask-container">
           <div class="hover-zoom">
            <a href="project-single.html">Product A
              <span class="icon-container">
                
              </span>
            </a>
           </div>
        </div> 
    
  </div>
</div>
<!-- The code will be repeated here -->
<div class="item">
  <div class="gallery-carousel-item">                              
    
      
        <div class="hover-mask-container">
           <div class="hover-zoom">
            <a href="project-single.html">Product B
              <span class="icon-container">
                
              </span>
            </a>
           </div>
        </div>
    
  </div>
</div>


Как я могу создать этот список динамически на основе моих записей в базе данных sql с помощью JavaScript ?
заранее спасибо

Что я уже пробовал:

Я пробовал jqxWidjets, но это не сделает пользовательский интерфейс, который я хочу. Я просто могу сделать это с помощью элемента управления asp:ListView, но я хочу сделать это с помощью HTML-тегов.
например:
Try it


function myFunction() {
    var x = document.createElement("UL");
    x.setAttribute("id", "myUL");
    document.body.appendChild(x);

    var a = ["Alpha","Beta","Gama"];
    for(i=0 ; i<=2 ; i++)

    {

       var y = document.createElement("LI");

       var t = document.createTextNode(a[i]);

       y.appendChild(t);

       document.getElementById("myUL").appendChild(y);

    }

}


Производит:
Альфа
Бета
Гам

основываясь на данных переменных "a" (JSON data), как я могу составить упомянутый список на основе записей базы данных SQL server

Cristina Carrasco Angulo

Можете ли вы использовать jquery?, почему именно vanilla javascript?

Ali Majed HA

Привет, Кристина, да, я могу использовать JQuery.

2 Ответов

Рейтинг:
20

Cristina Carrasco Angulo

Вот пример: c# asp.net
Примеры Jquery

Как это работает:
Получить Список

Добавить это:
Json.NET

Как добавить...
Добавить Ньютон в формате JSON


.в JS

function GetList() {
    $.ajax({
        async: false,
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "ExampleList.aspx/GetList",
        dataType: "json",
        success: function (data, textStatus) {
            if (textStatus == "success") {
                var datos = jQuery.parseJSON(data.d);

                $("#List").html('');
                var list = '<ul>'
                $.each(datos, function (i, v) {
                    //list += '<li id="'+v.id+'">' + v.id + "-" + v.value + '</li>'
                    list += '<li id="'+v.id+'">' + v.value + '</li>'
                }); 
                list += '</ul>'

                $("#List").append(list);
            }
        },
        error: function (request, status, error) {
            alert(jQuery.parseJSON(request.responseText).Message);
        }
    });
}


HTML|ASP
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ExampleList.aspx.cs" Inherits="JqueryExamples.ExampleList" %>



<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <input type="button" value="Get List" onclick="GetList()"/>
    <div id="List">
        
    </div>
    </form>
    <script src="Scripts/jquery.js"></script>
<script src="Scripts/ExampleListsa.js"></script>
</body>
</html>



с фоновым кодом:
        [WebMethod]
        public static string GetList()
        {
            List<data> data = new List<data>();
            try
            {
                data.Add(new Data { id = 1, value = "Alpha" });
                data.Add(new Data { id = 2, value = "Beta" });
                data.Add(new Data { id = 3, value = "Gamma" });
                data.Add(new Data { id = 4, value = "Delta" });
                data.Add(new Data { id = 5, value = "Epsilon" });
                data.Add(new Data { id = 6, value = "Zeta" });

                var rnd = new Random();
                data = data.OrderBy(item => rnd.Next()).ToList();
            }
            catch (Exception ex)
            {
                throw new Exception(ex.Message, ex);
            }
            return JsonConvert.SerializeObject(data);
        }


        public partial class Data {
            public int id { get; set; }
            public string value { get; set; }
        }

</data></data>



Можно добавить класс с методом получения данных из SQL, вот и пример того, как подключиться к SQL:
Как подключить базу данных SQL

В коде позади измените метод GetList для этого:
public static string GetList()
       {
           List<data> data = new List<data>();
           try
           {
               data = SqlClass.GetList();//Need to created the SqlClass
           }
           catch (Exception ex)
           {
               throw new Exception(ex.Message, ex);
           }
           return JsonConvert.SerializeObject(data);
       }

Cristina Carrasco Angulo

Вы можете измениться:
Список данные = новый список();

для некоторых вроде этого:
Список data = SqlClass.метод GetData();

Вам нужно создать SqlClass добавить метод GetData...

Ali Majed HA

Привет Кристина
Заранее спасибо за ваше решение

Cristina Carrasco Angulo

Пожалуйста

Рейтинг:
0

Mohtshm Zubair

вы можете использовать шаблон jquery для аккуратного soln, чтобы избежать ручного создания структуры dom.

Между тем более сложные солн-использовать элемент управления Repeater Паш использовать обычный html, как вы хотите.

Как выше солн. очень легко в ASP.NET

для шаблона jquery

Основы jQuery Шаблоны [^]

вы можете использовать регистровый массив со стороны сервера, если не хотите использовать ajax-вызов.

для ретранслятора

Как добавить элемент управления ретранслятором на страницу веб-форм[^]