0
Je crée une sorte de site musical où des vidéos téléchargées de clients payants apparaîtront sur la page d'accueil du site. J'ai téléchargé les vidéos et créé une vignette de la vidéo dans un bouton de téléchargement, et j'essaie d'assigner deux divs créés automatiquement au site Web en fonction du nombre de lignes qu'il retourne dans la base de données (un pour la bannière, un pour le lien du site web où les deux div sont dans une position: absolue). Im obtenir la vignette à travers l'ID utilisateur renvoyé à partir de la base de données, mais une erreur lors de l'inspection des éléments où les espaces retournés de la base de données ne peuvent pas être lus et sont considérés comme la fermeture d'un guillemet. Les vignettes ne sort jamais, mais en changeant les codes de l'inspection des éléments en chrome, cela fonctionne. Je ne sais pas comment résoudre cela et j'espérais que les bonnes personnes de stackoverflow m'aideraient. Voici les codes.problèmes avec des espaces lors de l'attribution de valeurs d'URL dans des images d'arrière-plan code-behind dans asp.net
Accueil
<%@ 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 Derrière
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;
}
Ce sont les codes. les problèmes sont dans le 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>");
}
}
}
où il couldnt lire le chemin qui est soi-disant ('userData/Vidéos/0/some fichier image name.jpg'). Il ne pouvait pas lire les espaces entre 'un certain nom de fichier image.jpg'.
Voici à quoi cela ressemble dans l'inspection des éléments en 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>
Aidez-moi s'il vous plaît. Les problèmes sont uniquement dans displayVideoDiv(). Toute aide serait très appréciée et aimée. Merci d'avance. Et désolé pour le long post car je ne sais pas comment expliquer ce problème moi-même.
oh mon dieu merci beaucoup @Saykor. J'ai essayé ceci pendant 3 jours sans la chance. Merci beaucoup. –
Vous êtes les bienvenus – Saykor