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

Question

我有一个拒绝在 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 (selectedId > 0)
        {
            Member m = new Member();
            m.GetMemberById(selectedId);
            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 中所见，图像元素已从表格元素中取出，并插入到表格上方的父 div 中。这里发生了什么？感谢您的帮助。

Answer 1

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

根据我的评论重新渲染/定位