ASP.NET 图像控件呈现在错误的 DOM 位置

大佬教程收集整理的这篇文章主要介绍了ASP.NET 图像控件呈现在错误的 DOM 位置，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决ASP.NET 图像控件呈现在错误的 DOM 位置？

我有一个拒绝在 HTML 表格内呈现的 ASP.NET 图像控件。

您将在 ASPX 页面中看到 ASP.NET 图像控件位于 HTML 表格内，靠近表格底部，在传记文本区域下方。

当页面填充数据时，图像从 HTML 表格内部移动到 HTML 表格上方。

这里是 ASPX 页面源：

<asp:Panel ID="pnlMembers" runat="server" ClIEntIDMode="Static">

    <table>
        <tr>
            <td>
                Members: 
            </td>
            <td>
                <asp:DropDownList ID="ddlMembers" runat="server" ClIEntIDMode="Static" AutopostBACk="true" AppendDataBoundItems="true" OnSELEctedindexChanged="ddlMembers_SELEctedindexChanged">            
                </asp:DropDownList>                
                or <asp:button ID="btnNew" runat="server" ClIEntIDMode="Static" Text="New Member" OnClick="btnNew_Click" />
            </td>
        </tr>
        <tr>
            <td>name:</td> 
            <td><asp:TextBox ID="txtname" runat="server" ClIEntIDMode="Static"></asp:TextBox></td>
        </tr>
        <tr>
            <td>Email:</td>
            <td><asp:TextBox ID="txtEmail" runat="server" ClIEntIDMode="Static"></asp:TextBox></td>
        </tr>
        <tr>
            <td>password:</td>
            <td><asp:TextBox ID="txtpassword" runat="server" ClIEntIDMode="Static" TextMode="password"></asp:TextBox></td>
        </tr>
        <tr>
            <td>
                Repeat password:
            </td>
            <td>
                <asp:TextBox ID="txtpassword2" runat="server" ClIEntIDMode="Static" TextMode="password"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>Bio:</td>
            <td>                            
                <textarea name="txtBioEditor" ID="txtblogEditor" rows="10" cols="80" runat="server"></textarea>
            </td>
        </tr>
        <tr>
            <asp:Image ID="imgMember" runat="server" ClIEntIDMode="Static" />
        </tr>

        <tr>
            <td></td>
            <td>
                <asp:button ID="btnSave" runat="server" ClIEntIDMode="Static" Text="Save" OnClick="btnSave_Click" />
                <asp:button ID="btnCancel" runat="server" ClIEntIDMode="Static" Text="Cancel" OnClick="btnCancel_Click" />
            </td>
        </tr>
    </table>
    <script>
        CKEDITOR.replace("txtBioEditor");
    </script>
</asp:Panel>

在代码隐藏中，当下拉列表选择的索引发生更改时，我只是用来自数据库的成员数据填充页面控件。

    protected voID ddlMembers_SELEctedindexChanged(object sender,EventArgs E)
    {
        int SELEctedID = Convert.ToInt32(ddlMembers.SELEctedvalue);
        if @R_674_9579@ctedID > 0)
        {
            Member m = new Member();
            m.GetMemberByID@R_674_9579@ctedID);
            if (m.MemberCount > 0)
            {
                txtname.Text = m.name;
                txtEmail.Text = m.Email;
                txtblogEditor.INNERHTML = m.biography;
                imgMember.ImageUrl = m.Image;
            }
        }
        else
        {
            ClearFIElds();
        }
    }

这是它的呈现方式：

<div ID="pnlMembers">   
<img ID="imgMember" src="/images/member3.jpg"><table>
    <tbody><tr>
        <td>
            Members: 
        </td>
        <td>
            <SELEct name="ctl00$ctl00$ContentPlaceHolder1$ContentadminMain$ddlMembers" onchange="JavaScript:setTimeout('__dopostBACk(\'ctl00$ctl00$ContentPlaceHolder1$ContentadminMain$ddlMembers\',\'\')',0)" ID="ddlMembers">
                <option value="0">SELEct Member</option>
                <option value="1">Member 1</option>
                <option value="2">Member 2</option>
                <option SELEcted="SELEcted" value="3">Member 3</option>
                <option value="4">Member 4</option>
            </SELEct>                
            or <input type="submit" name="ctl00$ctl00$ContentPlaceHolder1$ContentadminMain$btnNew" value="New Member" ID="btnNew">
        </td>
    </tr>
    <tr>
        <td>name:</td> 
        <td><input name="ctl00$ctl00$ContentPlaceHolder1$ContentadminMain$txtname" type="text" value="Member 3 name" ID="txtname"></td>
    </tr>
    <tr>
        <td>Email:</td>
        <td><input name="ctl00$ctl00$ContentPlaceHolder1$ContentadminMain$txtEmail" type="text" value="member3@gmail.com" ID="txtEmail"></td>
    </tr>
    <tr>
        <td>password:</td>
        <td><input name="ctl00$ctl00$ContentPlaceHolder1$ContentadminMain$txtpassword" type="password" ID="txtpassword"></td>
    </tr>
    <tr>
        <td>
            Repeat password:
        </td>
        <td>
            <input name="ctl00$ctl00$ContentPlaceHolder1$ContentadminMain$txtpassword2" type="password" ID="txtpassword2">
        </td>
    </tr>
    <tr>
        <td>Bio:</td>
        <td>                            
            <textarea name="ctl00$ctl00$ContentPlaceHolder1$ContentadminMain$txtblogEditor" ID="txtblogEditor" rows="10" cols="80">Member 3 Bio</textarea>
        </td>
    </tr>
    <tr>
        
    </tr>

    <tr>
        <td></td>
        <td>
            <input type="submit" name="ctl00$ctl00$ContentPlaceHolder1$ContentadminMain$btnSave" value="Save" ID="btnSave">
            <input type="submit" name="ctl00$ctl00$ContentPlaceHolder1$ContentadminMain$btnCancel" value="Cancel" ID="btnCancel">
        </td>
    </tr>
</tbody></table>
<script>
    CKEDITOR.replace("txtBioEditor");
</script>    

正如您在渲染的 HTML 中看到的那样，图像元素已从 table 元素中取出，并插入到 table 上方的父 div 中。这里发生了什么？感谢您的帮助。

解决方法

<tr>
<td>
        <asp:Image ID="imgMember" runat="server" ClientIDMode="Static" />
</td>
</tr>

大佬总结

以上是大佬教程为你收集整理的ASP.NET 图像控件呈现在错误的 DOM 位置全部内容，希望文章能够帮你解决ASP.NET 图像控件呈现在错误的 DOM 位置所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。