2011-03-23 25 views
0

我下面的代碼給了我一個問題,圖像出現在我嘗試改變的第一個文本之後,但如果我把div.innerhtml放在結尾附近當我加載頁面時沒有圖像。正如你在圖像中看到的,我上傳了Img,它正在設置到文本的末尾,我還想知道是否有一種方法可以減小尺寸?我下面的代碼給我一個問題,圖像後面的文字

 public partial class UserProfileWall : System.Web.UI.Page 
{ 

    protected void Page_Load(object sender, EventArgs e) 
    { 
     string theUserId = Session["UserID"].ToString(); 
     PopulateWallPosts(theUserId); 
    } 
    private void PopulateWallPosts(string userId) 
    { 

     using (OdbcConnection cn = new OdbcConnection("Driver={MySQL ODBC 3.51 Driver}; Server=localhost; Database=gymwebsite2; User=****; Password=****;")) 
     { 
      cn.Open(); 
      using (OdbcCommand cmd = new OdbcCommand("SELECT Wallpostings FROM WallPosting WHERE UserID=" + userId + " ORDER BY idWallPosting DESC", cn)) 
      { 
       using (OdbcDataReader reader = cmd.ExecuteReader()) 
       { 


        var divHtml = new System.Text.StringBuilder(); 
        while (reader.Read()) 
        { 
         System.Web.UI.HtmlControls.HtmlGenericControl div = new System.Web.UI.HtmlControls.HtmlGenericControl("div"); 
         div.ID = "test"; 
         div.InnerHtml = String.Format("{0}", reader.GetString(0)); 
         Image img = new Image(); 
         img.ImageUrl = "~/userdata/2/uploadedimage/batman-for-facebook.jpg"; 
         img.AlternateText = "Test image"; 
         div.Controls.Add(img); 
         test1.Controls.Add(div); 

        } 
       } 
      } 
     } 
    } 





    protected void Button1_Click(object sender, EventArgs e) 
    { 
     string theUserId = Session["UserID"].ToString(); 
     using (OdbcConnection cn = new OdbcConnection("Driver={MySQL ODBC 3.51 Driver}; Server=<REMOVED>; Database=<REMOVED>; User=<REMOVED>; Password=<REMOVED>;")) 
     { 
      cn.Open(); 
      using (OdbcCommand cmd = new OdbcCommand("INSERT INTO WallPosting (UserID, Wallpostings) VALUES (" + theUserId + ", '" + TextBox1.Text + "')", cn)) 
      { 
       cmd.ExecuteNonQuery(); 
      } 
     } 
     PopulateWallPosts(theUserId); 
    } 
} 

enter image description here

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> 
    <link href="css/style.css" rel="stylesheet" type="text/css" /> 
</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server"> 
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js" type="text/javascript"></script> 
<p> 
    <asp:TextBox ID="TextBox1" name="TextBox1" runat="server" Rows="3" 
     Height="47px" Width="638px"></asp:TextBox> 
</p> 
<p> 
    <asp:Button ID="Button1" runat="server" Text="Post Message" Width="98px" 
     onclick="Button1_Click" /> 
    </p> 
<p> 
    &nbsp;</p> 

<div id="test1" runat="server" /> 







</asp:Content> 

我試着去實現這一目標:(作物油漆) enter image description here

忽略Web UI的部分!

div#test1 { 
} 
#test> img 
{ 
    float: left; 
    height: 100px; /* You shouldn't resize images here. Should be done in C#*/ 
} 
#test > div 
{ 
width:90%; 
z-index:1; 
padding:27.5px; 
border-top: thin solid #736F6E; 
border-bottom: thin solid #736F6E; 
color:#ffffff; 
margin:0 auto; 
white-space: pre; 
white-space: pre-wrap; 
white-space: pre-line; 
} 

試過這樣沒有成功?從螢火蟲

段:

<div id="ctl00_ContentPlaceHolder1_ContentPlaceHolder2_test">weeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<img style="border-width: 0px;" alt="Test image" src="userdata/2/uploadedimage/batman-for-facebook.jpg"></div> 
+1

你可以發佈你的'.aspx'標記嗎? – 2011-03-23 16:27:05

+0

Ive擴展了代碼和asp – 2011-03-23 16:31:49

回答

3

以編程方式注入div的任何特定原因?有數據庫控制來完成你正在做的工作。例如。使用Repeater(2.0+)或ListView(3.5+)控件。 ListView Control

這是一個有點複雜的方式看看是否有幫助:

System.Web.UI.HtmlControls.HtmlGenericControl div = new System.Web.UI.HtmlControls.HtmlGenericControl("div"); 
      div.Style["float"] = "left"; 
      Image img = new Image(); 
      img.ImageUrl = "~/userdata/2/uploadedimage/batman-for-facebook.jpg"; 
      img.AlternateText = "Test image"; 
      div.Controls.Add(img); 
      test1.Controls.Add(div); 

      System.Web.UI.HtmlControls.HtmlGenericControl div1 = new System.Web.UI.HtmlControls.HtmlGenericControl("div"); 
      div1.InnerText = String.Format("{0}", reader.GetString(0)); 

      div1.Style["float"] = "left"; 
      test1.Controls.Add(div1); 

      System.Web.UI.HtmlControls.HtmlGenericControl div2 = new System.Web.UI.HtmlControls.HtmlGenericControl("div"); 
      div2.Style["clear"] = "both"; 
      test1.Controls.Add(div2); 

當然使用CSS可以減少上述幾行。

+0

這工作,但由於某種原因,我不能讓我的CSS包裝文本? – 2011-03-24 12:05:53

0

圖像和文字是內聯元素,這意味着他們上從左向右。

如果您想將圖像強制到新行,使用以下命令:

div.InnerHtml = String.Format("{0}<br />", reader.GetString(0)); 

對於圖像的大小,你需要上傳的圖像,其尺寸正確,或者您可以使用圖像C#中的對象在上傳時調整其大小。

+0

不,我需要它在行的開頭,而不是「在」文本之前沒有的新行。 – 2011-03-23 16:38:00

0

爲什麼不添加一些CSS將圖像浮動到左側?

#test img { 
    float: left; 
    padding: 5px 10px 5px 0; 
} 
+0

我已經有一個div測試CSS如何將它添加到?我將更新我的帖子與我已經有的CSS我嘗試只是將其添加到它的結尾,但沒有工作 – 2011-03-23 16:45:00

3
  1. 爲了上帝的愛,不要把你的密碼你的門柱內側。
  2. 不要純粹通過字符串連接執行查詢!使用parameterized query。如果我能夠將數據寫入會話(例如使用UserId),則可以輕鬆地將SQL注入到該會話中。請考慮使用ORM工具,例如NHibernate或Microsoft的實體框架。
  3. 如果您希望圖像位於左側,並且旁邊有文字,請使用代碼from this link(已更新)。基本上在圖像上,你想設置float屬性爲left

如果你想改變你的代碼,它可以變成這樣:

System.Web.UI.HtmlControls.HtmlGenericControl div = new System.Web.UI.HtmlControls.HtmlGenericControl("div"); 

HtmlGenericControl literal = new HtmlGenericControl("div"); 
literal.InnerHtml = reader.GetString(0); 

Image img = new Image(); 
img.ImageUrl = "~/userdata/2/uploadedimage/batman-for-facebook.jpg"; 
img.AlternateText = "Test image"; 
div.Controls.Add(img); 
div.Controls.Add(literal); 
test1.Controls.Add(div); 
+0

我學習所有的安全措施來接下來我一遍又一遍地聽到這一點,但我只想獲得功能先把be4弄乾淨。並不是我需要的新線路。 – 2011-03-23 16:41:25

+1

你只是毆打我說完全一樣的東西。我還編輯了連接信息(更低的代碼)。 @Garrith:另外,將你的連接字符串放在web.config中,而不是通過你的代碼散佈它。你正在設置自己的噩夢維修方案。 – 2011-03-23 16:41:46

+1

@Garrith - 安全應該是第一位的。如果您使用ORM工具,則可以輕鬆完成所有這些工作,而無需編寫單個查詢。 – TheCloudlessSky 2011-03-23 16:44:35

0

試試這個,一個ASP補充:佔位符控件的頁面,而不是一個div。然後在後面的代碼中爲圖像構建三個div,一個用於文本,另一個包含它們。

//create container 
     System.Web.UI.HtmlControls.HtmlGenericControl container = new System.Web.UI.HtmlControls.HtmlGenericControl("div"); 

     //create div to hold the image 
     System.Web.UI.HtmlControls.HtmlGenericControl imgDiv = new System.Web.UI.HtmlControls.HtmlGenericControl("div"); 
     imgDiv.Attributes.Add("class","imgDiv"); 

     //build the image and set properties. 
     Image img = new Image(); 
     img.Width = new Unit(60);//pixels 
     img.Height = new Unit(60); 
     img.ImageUrl = "~/userdata/2/uploadedimage/batman-for-facebook.jpg"; 
     img.AlternateText = "Test image"; 

     //add image to image div 
     imgDiv.Controls.Add(img); 

     //create div to hold text 
     System.Web.UI.HtmlControls.HtmlGenericControl postText = new System.Web.UI.HtmlControls.HtmlGenericControl("div"); 
     postText.Attributes.Add("class", "postText"); 
     postText.InnerHtml = String.Format("{0}", reader.GetString(0)); 

     //now add the two divs to the page 
     test1.Controls.Add(imgDiv); 
     test1.Controls.Add(postText); 

現在,這應該在HTML渲染這樣的:

<div> 
    <div id="imgDiv"> 
     //image 

    </div> 
    <div id="postText"> 
     //text  
    </div>  
</div> 

,那麼你可以使用CSS浮動圖片旁邊的文字。

.imgDiv{float:left;} 
.postText{float:left;} 

如果窗口變小,文本可能跳到新行。你可以通過設置容器div的最小寬度來解決這個問題。

+0

其實,你可以保留在asp頁面上的原始div,並添加img文本div到該控件。會減少一些代碼。我傾向於喜歡佔位符。哦,你可能會想使用類而不是ID爲CSS,因爲你正在循環多個帖子,你會最終得到重複的ID。 – 2011-03-23 17:17:05

相關問題