I'm making some kind of musically website where any of paid customers video uploads will appear on the home page of the website. I uploaded the videos and created a thumbnail from video altogether in one upload button, and try to assign two automatically-created divs to the website based on the number of rows it returns in the database (one is for the banner, another is for the link of the website where both divs are in an position:absolute). Im getting the thumbnail through the user id returned from the database, but an error coming out when inspecting the elements where the spaces returned from the database cannot be read and are considered as closing of a quotation mark. The thumbnails never comes out, but when changing the codes from inspection of elements in chrome, it works. i don't know how to resolve this and was hoping that the fine people in stackoverflow would help me. Here are the codes.
Home Page
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Src="~/HeaderUnlogged.ascx" TagPrefix="uc1" TagName="HeaderUnlogged" %>
<!DOCTYPE html>
<% default_aspx ds = new default_aspx();
%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div class="containerAll">
<div class="header">
<uc1:HeaderUnlogged runat="server" ID="HeaderUnlogged" />
</div>
<div class="mainContent">
<div class="firstContent">
<div class="headline"><h2>News</h2></div>
<div class="content">
<div class="contentMusic">
<div class="music">
<div class="innerHeadLine">Musics</div>
<div class="innerContent">
<% displayAudioDiv();%>
</div>
</div>
</div>
<div class="contentVideos">
<div class="videos">
<div class="innerHeadLine">Videos</div>
<div class="innerContent">
<div class="innerItems">
<% displayVideoDiv();%>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="secondContent">
<div class="headline"><h2>Media</h2></div>
<div class="content">
<div class="contentTabs">
<div class="tabs">
<div class="innerHeadLine">Tabs News</div>
<div class="innerContent">
insert butoh here
</div>
</div>
</div>
<div class="contentMusic">
<div class="music">
<div class="innerHeadLine">ini untuk tabs</div>
<div class="innerContent">
insert jahanam here
</div>
</div>
</div>
<div class="contentVideos">
<div class="videos">
<div class="innerHeadLine">ini untuk tabs</div>
<div class="innerContent">
insert bongok here
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
</div>
</div>
</form>
</body>
</html>
Code Behind
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
public partial class _Default : System.Web.UI.Page
{
string cs = ConfigurationManager.ConnectionStrings["testing1"].ConnectionString;
protected void Page_Load(object sender, EventArgs e)
{
}
public void displayVideoDiv()
{
using (SqlConnection con = new SqlConnection(cs))
{
SqlCommand cmd = new SqlCommand("select * from media where fileType = 'Video'", con);
con.Open();
SqlDataReader drVideo = cmd.ExecuteReader();
while (drVideo.Read())
{
Response.Write(
"<div class='listContent'>" +
"<div class='videoBanner'></div>" +
"<div class=listItems style=background-image:url('userData/Videos/"+drVideo["id"].ToString()+"/" + drVideo["imageName"].ToString()+"');>" +
"<a href='#' class='a'>" +
drVideo["fileName"] +
"</a>" +
"</div>" +
"</div>");
}
}
}
public void displayAudioDiv()
{
using (SqlConnection con = new SqlConnection(cs))
{
SqlCommand cdm = new SqlCommand("select * from media where fileType = 'Audio'", con);
con.Open();
SqlDataReader drAudio = cdm.ExecuteReader();
while (drAudio.Read())
{
Response.Write(
"<div class='listContent'>" +
"<div class='audioBanner'></div>" +
"<div class='listItemsAudio'>" +
"<a href='#' class='a'>" +
drAudio["fileName"] +
"</a>" +
"</div>" +
"</div>");
}
}
}
}
Css
@font-face {
font-family: 'Cabin-Bold';
font-weight:bold;
src: url('cabin/Cabin-Bold.otf');
}
@font-face {
font-family: 'Cabin-BoldItalic';
font-weight:bold;
font-style:italic;
src: url('cabin/Cabin-BoldItalic.otf') ;
}
@font-face {
font-family: 'Cabin-Italic';
font-style:italic;
src: url('cabin/Cabin-Italic.otf') ;
}
@font-face {
font-family: 'Cabin-Medium';
font-size:medium;
src: url('cabin/Cabin-Medium.otf') ;
}
@font-face {
font-family: 'Cabin-MediumItalic';
font-size:medium;
font-style:italic;
src: url('cabin/Cabin-MediumItalic.otf') ;
}
@font-face {
font-family: 'Cabin-Regular';
src: url('cabin/Cabin-Regular.otf') ;
}
@font-face {
font-family: 'Myra 4F Caps Bold';
font-weight:bold;
src: url('myra_full_set/Myra 4F Caps Bold.otf') ;
}
@font-face {
font-family: 'Myra 4F Caps Light';
font-weight:lighter;
src: url('myra_full_set/Myra 4F Caps Light.otf') ;
}
@font-face {
font-family: 'Myra 4F Caps Regular';
src: url('myra_full_set/Myra 4F Caps Regular.otf') ;
}
body {
height:100%;
width:100%;
margin: 0 0 0 0;
background-image:url("pics/musicBanner.jpg");
font-family:'Myra 4F Caps Regular';
background-size:cover;
background-attachment:fixed;
overflow-y:scroll;
}
.headerLink{
padding:10px 10px 10px 10px;
font-family:'Cabin-Regular';
width:1004px;
margin:auto auto;
background:#ffffff;
}
.link1, .link2, .link3
{
text-decoration:none;
color:black;
padding:0 10px 0 10px;
}
.link1:visited, .link2:visited, .link3:visited
{
color:black;
}
.link1:hover, .link2:hover, .link3:hover
{
color:rgb(52, 110, 122);
}
.headerLogo
{
margin: auto auto;
width:1024px;
height:100px;
}
.headerLogo .banner
{
width:1024px;
height:100px;
display:inline-block;
}
.headerLogo .banner .bannerLogo
{
width:675px;
height:100px;
float:left;
background-size:cover;
border-right:5px groove;
}
.headerLogo .banner .bannerLogo h1
{
font-family:'Myra 4F Caps Regular';
font-size:2em;
text-align:right;
padding: 0 20px 0 0;
width:340px;
float:right;
}
.headerLogo .headerLoginRegister
{
width:344px;
height:100px;
float:left;
}
.headerSearch
{
width:1022px;
height:70px;
margin:auto auto;
padding-top:9px;
position:relative;
top:0;
font-family:'Cabin-Regular';
display:block;
background-size:cover;
}
.headerSearch span
{
padding: 0 20px 0 20px;
}
.containerAll
{
margin: auto auto;
}
.loginRegister
{
margin: 10px 0 0 25px;
width:340px;
height:50px;
}
.userID span
{
width:100px;
display:inline-block;
}
.passwordUser span
{
width:100px;
display:inline-block;
}
.userID
{
width:340px;
}
.passwordUser
{
width:340px;
}
.textBoxLogin
{
width:180px;
}
.loginButton
{
width:142px;
font-family:Cabin-Regular;
padding:5px;
}
.loginButtons {
margin: 0 0 0 26px;
}
.searchButtons
{
padding:10px;
width:180px;
background:#3C5E43;
}
.dropDown{
width:120px;
padding:5px;
font-family:Cabin-Regular;
font-size:1.1em;
}
.searchTextBox{
width:695px;
color : #747862;
height:20px;
padding:4px 8px;
}
.bottomItem{
margin:6px 0 0 20px;
}
.mainContent{
margin:auto auto;
padding-top:10px;
width:1024px;
font-family:Cabin-Regular;
}
.firstContent {
width:1024px;
border:1px solid;
}
.firstContent .headline{
width:1014px;
padding: 1px 0 1px 10px;
background:#ffffff;
border-bottom:5px groove;
}
.firstContent .content{
width:1024px;
display:inline-block;
}
.firstContent .content .contentMusic{
position:relative;
width:512px;
float:left;
background:#ffffff;
}
.firstContent .content .contentVideos{
position:relative;
width:512px;
float:left;
background:#ffffff;
}
.firstContent .content .contentMusic .music .innerHeadLine{
position:relative;
width:502px;
padding:5px;
background:#000000;
color:#ffffff;
}
.firstContent .content .contentVideos .videos .innerHeadLine{
position:relative;
width:497px;
border-left:5px groove;
padding:5px;
background:#000000;
color:#ffffff;
}
.firstContent .content .contentMusic .music .innerContent{
position:relative;
width:502px;
height:500px;
padding:0 5px 0 5px;
border-right:1px;
background:#ffffff;
border-top:5px groove;
}
.firstContent .content .contentVideos .videos .innerContent{
position:relative;
width:502px;
height:500px;
padding:0 5px 0 5px;
background:#ffffff;
border-top:5px groove;
}
.secondContent {
width:1024px;
margin:25px auto;
border:1px solid;
}
.secondContent .headline{
width:1014px;
padding: 1px 0 1px 10px;
background:#ffffff;
border-bottom:5px groove;
}
.secondContent .content{
width:1024px;
display:inline-block;
}
.secondContent .content .contentTabs {
position:relative;
width:340px;
float:left;
}
.secondContent .content .contentMusic{
position:relative;
width:340px;
float:left;
}
.secondContent .content .contentVideos{
position:relative;
width:340px;
float:left;
}
.secondContent .content .contentTabs .tabs .innerHeadLine{
position:relative;
width:330px;
padding:5px;
border-right:5px groove;
}
.secondContent .content .contentMusic .music .innerHeadLine{
position:relative;
width:330px;
padding:5px;
border-right:5px groove;
}
.secondContent .content .contentVideos .videos .innerHeadLine{
position:relative;
width:330px;
padding:5px;
}
.secondContent .content .contentTabs .tabs .innerContent{
position:relative;
width:330px;
height:500px;
border-top:5px groove;
padding:5px 5px 0 5px;
}
.secondContent .content .contentMusic .music .innerContent{
position:relative;
width:330px;
height:500px;
border-top:5px groove;
padding:5px 5px 0 5px;
}
.secondContent .content .contentVideos .videos .innerContent{
position:relative;
width:330px;
height:500px;
border-top:5px groove;
padding:5px 5px 0 5px;
}
.header{
border:1px solid;
width:1024px;
margin:auto auto;
}
.listItems{
width:492px;
height:25px;
border:none;
padding:50px 0 0 10px;
border-top:1px groove;
border-left:1px groove;
position: absolute;
}
.listItemsAudio{
width:492px;
height:25px;
border:none;
padding:50px 0 0 10px;
border-top:1px groove;
border-left:1px groove;
position: absolute;
background-image: url('pics/audioBanner.jpg');
}
.a{
text-decoration:none;
font-family:Cabin-Regular;
color:orange;
}
.a:hover{
font-family:Cabin-Regular;
color:rgb(52, 110, 122);
}
.listContent{
margin:0 0;
width:512px;
height:72px;
position:relative;
display:block;
padding-top:3px;
}
These are the codes. the problems are in the displayVideoDiv():-
public void displayVideoDiv()
{
using (SqlConnection con = new SqlConnection(cs))
{
SqlCommand cmd = new SqlCommand("select * from media where fileType = 'Video'", con);
con.Open();
SqlDataReader drVideo = cmd.ExecuteReader();
while (drVideo.Read())
{
Response.Write(
"<div class='listContent'>" +
"<div class='videoBanner'></div>" +
"<div class=listItems style=background-image:url('userData/Videos/"+drVideo["id"].ToString()+"/" + drVideo["imageName"].ToString()+"');>" +
"<a href='#' class='a'>" +
drVideo["fileName"] +
"</a>" +
"</div>" +
"</div>");
}
}
}
where it couldnt read the supposedly path which is ('userData/Videos/0/some image file name.jpg'). It couldn't read the spaces between 'some image file name.jpg'.
here is how it looks like in the element inspection in chrome.
<div class="listItems"
style="background-image:url('userData/Videos/0/Richie" allan="" -="" dimarzio="" illuminator="" 7_hd.jpg');="">
<a href="#" class="a">
Richie Allan - DiMarzio Illuminator 7_HD.mp4
</a>
</div>
Please help me. The problems are only in the displayVideoDiv(). Any help would be highly appreciated and loved. Thank you in advance. And sorry for the long post as i don't know how to explain this problem myself.
You can use Uri.EscapeDataString()
Uri.EscapeDataString(drVideo["imageName"].ToString())
This will replace space with %20