在 asp.net 中的代码隐藏背景图像中分配 url 值时出现空格问题

Question

我正在制作某种音乐网站，任何付费客户上传的视频都会出现在该网站的主页上。我上传了视频并在一个上传按钮中从视频创建了一个缩略图，并尝试根据数据库中的行数 returns 将两个自动创建的 div 分配给网站（一个用于横幅，另一个是网站的 link，其中两个 div 都在 position:absolute 中）。我通过从数据库返回的用户 ID 获取缩略图，但是在检查无法读取从数据库返回的空格的元素时出现错误，并被视为引号结束。缩略图永远不会出现，但是当通过检查 chrome 中的元素更改代码时，它会起作用。我不知道如何解决这个问题，希望 Whosebug 中的好人能帮助我。这是代码。

首页

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

代码隐藏

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

这些是代码。问题出在 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>");
            }
        }
    }

它无法读取假定的路径，即 ('userData/Videos/0/some image file name.jpg')。它无法读取 'some image file name.jpg'.

之间的空格

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

请帮助我。问题仅出在 displayVideoDiv() 中。任何帮助将不胜感激和喜爱。先感谢您。很抱歉这么长时间 post 因为我自己不知道如何解释这个问题。

Answer 1

您可以使用Uri.EscapeDataString()

Uri.EscapeDataString(drVideo["imageName"].ToString())

这会将 space 替换为 %20

在 asp.net 中的代码隐藏背景图像中分配 url 值时出现空格问题

problems with spaces when assigning url values in code-behind background-images in asp.net

asp.net

spaces

datareader

code-behind

background-image