CODEWITHSUNDEEP
c#cssasp.netaspx-user-control
Hardik Patil
Hardik Patil

Reputation: 97

Dynamically add <li> from database parameters in aspx without code behind

We are trying to create a playlist of video from a database. We want to get the path of a video from the database and want to pass it to a li tag

but

Response.Write function is displaying lists but at the top of the page and we wanted to display those lists in a specific div.

our code-behind code

   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();
         }
      }
   }

This is my aspx code

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

Upvotes: 0

Views: 2117

Answers (2)

mason
mason

Reputation: 32694

Take advantage of Web Forms data binding. Below, we'll fetch the data from the database into a DataTable (which is simply an in-memory representation of some data) and then we'll bind that DataTable to a Repeater. A Repeater is control that has a template defined, that will render the template to HTML for each item in the collection bound to it.

Also, you need to wrap your SqlConnection in a using statement to ensure it gets disposed of properly.

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>

The advantage of this technique over the one shown by @krlzlx is that all your HTML will be in the ASPX page instead of embedded as a string inside your C# code. So it's easier to deal with quotes, and Visual Studio can tell you if you have any syntax errors. It also keeps your logic nice and tidy, and you can more easily split your HTML up into multiple lines and indent it, etc.

Upvotes: 0

krlzlx
krlzlx

Reputation: 5822

Try this: 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 file: add a 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>

Upvotes: 1

Related Questions