Question

下面我的代码给了我一个问题，图片出现在我尝试更改第一个内容的文本之后，但如果我将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

忽略网络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>

Answer 1

以编程方式注入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可以减少几行。

Answer 2

为了爱上帝，不要把你的密码放在你的帖子里。
不要纯粹通过字符串连接执行查询！使用parameterized query。如果我能够将数据写入会话，例如使用UserId，我可以轻松地将SQL注入其中。请考虑使用ORM工具，如NHibernate或Microsoft的Entity Framework。
如果您希望图片位于左侧，旁边有文字，请使用代码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);

Answer 3

图像和文本是内联元素，意味着它们从左向右流动。

如果要将图像强制换行，请使用以下命令：

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

对于图像大小，您需要上传尺寸正确的图像，或者您可以使用C＃中的Image对象在上传时调整其大小。

Answer 4

为什么不添加一些CSS来将图像浮动到左边？

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

Answer 5

试试这个，将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的最小宽度来解决此问题。

我的下面的代码给了我一个问题，图像出现在文本之后

5 个答案: