Динамически добавлять <li> из параметров базы данных в aspx без кода позади

Question

Мы пытаемся создать список воспроизведения видео из базы данных. Мы хотим получить путь к видео из базы данных и хотим передать его тегу li

но

• Мы не знаем, как это сделать с техникой кода или без
• Мы просто хотим добавить динамические списки с параметрами пути из таблицы

Функция Response.Write отображает списки, но в верхней части страницы, и мы хотели отобразить эти списки в определенном div.

наш код-код

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Web;
   using System.Web.UI;
   using System.Web.UI.WebControls;
   using System.Data.SqlClient;
   using System.Data;
   using System.Configuration;
   namespace videoplayer
   {
       public partial class VideoPage : System.Web.UI.Page
       {
           SqlConnection con=new     SqlConnection(ConfigurationManager.ConnectionStrings["conn"].ConnectionString);
            //protected void Page_Load(object sender, EventArgs e)
            //{

            //}

            public void getdata()
            {
                String html=string.Empty;
                string a = string.Empty;
                string b = string.Empty;
                con.Open();
                SqlCommand cmd = new SqlCommand("Select Filename from VideoFile", con);
                SqlDataReader dr = cmd.ExecuteReader();

                while (dr.Read())
                {
                    html += "<li data-address='local9' class='playlistNonSelected' data-type='local' data-mp4Path='../media/video/1/main/02.mp4' data-ogvPath='../media/video/1/main/02.ogv' data-webmPath='../media/video/1/main/02.webm' data-imagePath='../media/video/1/main/02.jpg' data-description='<span class='infoTitle'>Nulla mauris justo</span><br><br>Aenean egestas. Donec vel sapien ultrices lorem laoreet viverra. Curabitur molestie gravida nisi. Vivamus elementum scelerisque lectus. Etiam interdum, nisi vel adipiscing gravida, leo tortor placerat ipsum, a eleifend velit tortor id ligula. Etiam quis leo a velit mollis vestibulum. Morbi consequat, odio eget feugiat mollis, enim erat dignissim ipsum, eget vehicula sapien metus non massa. Aliquam aliquet sagittis ligula. Sed adipiscing sodales ipsum. Mauris orci ligula, commodo vitae, commodo in, tempor eu, urna. Etiam justo ipsum, gravida vitae, tristique sed, porttitor ac, ipsum. Maecenas elit lectus, elementum id, fermentum eget, accumsan ac, quam. Duis lacinia urna ac nisi. Cras bibendum. In hac habitasse platea dictumst. Morbi iaculis volutpat dui. Pellentesque non leo.;<a href='' target='_blank'>Link</a>'<div class='playlistThumb'><img class='thumb' src='../media/video/1/preview/02.jpg' width='120' height='68' alt=''/></div><div class='playlistInfo'><p><span class='playlistTitle'>Video title goes here</span><br><span class='playlistContent'>Commodo vitae, commodo in, tempor eu, urna. Etiam justo ipsum maecenas nec tellus.</span></p></div></li>";
                    Response.write(html);
            }
           con.Close();
         }
      }
   }

Это мой код aspx

<div class="playlistData">
  <ul id='playlist1' data-address="playlist1">
    <script language="c#" runat="server" id="123">
       public void Page_Load(object sender, EventArgs e)
         {
           getdata();
          }
    </script>
  <ul>

Answer 1

Попробуйте это: C#

using System;
using System.Configuration;
using System.Data.SqlClient;
using System.Text;
using System.Web.UI.WebControls;

namespace videoplayer
{
    public partial class VideoPage : System.Web.UI.Page
    {
        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["conn"].ConnectionString);

        protected void Page_Load(object sender, EventArgs e)
        {
            getdata();
        }

        private void getdata()
        {
            StringBuilder htmlBuilder = new StringBuilder();
            string a = string.Empty;
            string b = string.Empty;
            con.Open();
            SqlCommand cmd = new SqlCommand("SELECT Filename FROM VideoFile", con);
            SqlDataReader dr = cmd.ExecuteReader();

            while (dr.Read())
            {
                htmlBuilder.AppendLine("<li data-address='local9' class='playlistNonSelected' data-type='local' data-mp4Path='../media/video/1/main/02.mp4' data-ogvPath='../media/video/1/main/02.ogv' data-webmPath='../media/video/1/main/02.webm' data-imagePath='../media/video/1/main/02.jpg' data-description='<span class='infoTitle'>Nulla mauris justo</span><br><br>Aenean egestas. Donec vel sapien ultrices lorem laoreet viverra. Curabitur molestie gravida nisi. Vivamus elementum scelerisque lectus. Etiam interdum, nisi vel adipiscing gravida, leo tortor placerat ipsum, a eleifend velit tortor id ligula. Etiam quis leo a velit mollis vestibulum. Morbi consequat, odio eget feugiat mollis, enim erat dignissim ipsum, eget vehicula sapien metus non massa. Aliquam aliquet sagittis ligula. Sed adipiscing sodales ipsum. Mauris orci ligula, commodo vitae, commodo in, tempor eu, urna. Etiam justo ipsum, gravida vitae, tristique sed, porttitor ac, ipsum. Maecenas elit lectus, elementum id, fermentum eget, accumsan ac, quam. Duis lacinia urna ac nisi. Cras bibendum. In hac habitasse platea dictumst. Morbi iaculis volutpat dui. Pellentesque non leo.;<a href='' target='_blank'>Link</a>'<div class='playlistThumb'><img class='thumb' src='../media/video/1/preview/02.jpg' width='120' height='68' alt=''/></div><div class='playlistInfo'><p><span class='playlistTitle'>Video title goes here</span><br><span class='playlistContent'>Commodo vitae, commodo in, tempor eu, urna. Etiam justo ipsum maecenas nec tellus.</span></p></div></li>");
            }

            con.Close();

            Literal lit = new Literal();
            lit.Text = htmlBuilder.ToString();
            PlaceHolder1.Controls.Add(lit);
        }
    }
}

файл aspx: добавьте PlaceHolder

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="VideoPage.aspx.cs" Inherits="videoplayer.VideoPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div class="playlistData">
            <ul id='playlist1' data-address="playlist1">
                <asp:PlaceHolder ID="PlaceHolder1" runat="server"><asp:PlaceHolder>
            </ul>
        </div>
    </form>
</body>
</html>

Answer 2

Воспользуйтесь преимуществами привязки данных веб-форм. Ниже мы извлечем данные из базы данных в DataTable (который представляет собой просто представление некоторых данных в памяти), а затем свяжем этот DataTable с Repeater. Повторитель - это элемент управления, для которого определен шаблон, который будет отображать шаблон в HTML для каждого элемента в связанной с ним коллекции.

Кроме того, вам нужно заключить SqlConnection в оператор using, чтобы убедиться, что он удаляется должным образом.

public partial class VideoPage : System.Web.UI.Page
{
    public void getdata()
    {
        DataTable dt = new DataTable();
        using(SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["conn"].ConnectionString))
        {
            SqlCommand cmd = new SqlCommand("Select Filename from VideoFile", con);
            con.Open();                
            dt.Load(cmd.ExecuteReader());
        }
        VideoRepeater.DataSource = dt;
        VideoRepeater.DataBind();
    }
}

ASPX

<ul>
    <asp:Repeater id="VideoRepeater" runat="server">
        <ItemTemplate>
            <!-- You could do more HTML here -->
            <li><%# Eval("Filename") %></li>
        </ItemTemplate>
    </asp:Repeater>
</ul>

Преимущество этого метода перед показанным @krlzlx состоит в том, что весь ваш HTML будет на странице ASPX, а не будет встроен в виде строки в ваш код C#. Таким образом, легче иметь дело с кавычками, и Visual Studio может сообщить вам, есть ли у вас какие-либо синтаксические ошибки. Это также поддерживает вашу логику в хорошем состоянии, и вы можете с легкостью разбить ваш HTML на несколько строк, сделать отступ и т. Д.