Javascript 警报破坏了我的 asp.NET Web 应用程序的布局答案

【问题标题】：Javascript Alert ruining the layout of my asp.NET Web ApplicationJavascript 警报破坏了我的 asp.NET Web 应用程序的布局
【发布时间】：2011-08-17 12:54:23
【问题描述】：

我知道有一个类似的问题，但那个答案并没有解决我的问题。

这是我的应用程序的正常外观：

这就是它在 Javascript 警报后的样子（菜单项的宽度被搞砸了，左边的紫色条在顶部添加了一个额外的部分）：

这是我用来调用警报的代码：

    private void Alert(string msg)
    {
        Response.Write("<script language = 'javascript'>window.alert('" + msg + "')</script>");
    }

有没有人遇到过这个问题，即使使用默认的 asp.NET 设计，我也遇到过类似的问题。我怎样才能解决这个问题？顺便说一下，我用的是IE 7，在火狐上没问题。

更新：

修复了紫色条的问题，删除了边距。仍在解决菜单宽度问题。

这是我的 CSS：

#menu
{
   position: absolute;
   left: 78%;
   top: 108px;
   width: 170px !important;  
}

div.menu
{
   padding: 4px 0px 4px 8px;
}

div.menu ul
{
   list-style: none;
   margin: 0px;
   padding: 0px;
   width: auto;
}

div.menu ul li a, div.menu ul li a:visited
{
   background-color: #FFF; /*680840*/
   border: 1px #4e667d solid;
   height: 20px;
   width: 140px;
   color: #000; /*FFF*/
   display: block;
   line-height: 1.35em;
   padding: 4px 20px;
   text-decoration: none;
   white-space: nowrap;
}

div.menu ul li a:hover
{
   background-color: #680840;
   color: #FFF;
   text-decoration: none;
}

.selectedMenu
{
   background-color: #680840;
   color: #FFF;
   text-decoration: none;
}

div.menu ul li a:active
{
   background-color: #680840;
   color: #cfdbe6;
   text-decoration: none;
}

@Sassyboy 更新：

前端：

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:HiddenField Value="" ID="errorMessageHidden" runat="server"/>
    <script type="text/javascript">
        var alertMsg = document.getElementById('errorMessageHidden'); 
        if (alertMsg != null) alert(alertMsg); 
    </script>

和 c# 我添加了这个：

errorMessageHidden.Value = "Failed to Select - Test";

【问题讨论】：

看起来标题中的空白（或其他内容）正在影响整个页面。您能否在 JS 小提琴或演示链接中包含更多上下文？
在<html> 或DTD 声明上方有元素会给出未定义的行为，这就是您所得到的。不将元素插入响应流的开头怎么样。
@Matt - 抱歉，页面没有链接，并且不能使用 JS Fiddle，因为页面本身很好，当从我的 C# 文件调用 Alert 方法时，它会产生问题.
@Justing M. Keyes - 如何调用 Alert 方法，并将其插入到标记之后？

标签： c# javascript asp.net css

【解决方案1】：

这是因为 Response.Write 通常在页面的 HTML 之前呈现 - 查看页面的源代码。

有更好的方法可以在页面中添加 Javascript，请查看 ClientScriptManager。

【讨论】：

下次我肯定会使用您的方法，这就是为什么要投赞成票。然而，为了快速修复，sassboy 的方法非常有用，无需更改大部分代码。

【解决方案2】：

Response.Write 将在页面的 HTML 之前添加到响应，这会导致与您提到的类似的问题。

还有多种其他方式可以实现您尝试实现的功能。例如您可以有一个隐藏字段 hdnAlertMessage 并使用要提醒的消息设置其值。然后在客户端检查隐藏字段是否有值，然后警告该值。

所以在你的服务器端

hdnAlertMessage.Value = message;

在你的客户端

var alertMsg = document.getElementById('hdnAlertMessage');

if (alertMsg != null)
    alert(alertMsg.value);

或者类似的东西。

编辑：alert(alertMsg) 到 alert(alertMsg.value)

【讨论】：

Javascript 可以从 C# 代码中获取元素吗？因此，如果我想得到一个字符串 hdnAlertMessage，我到底需要做什么？
您可以使用服务器控件 asp:HiddenField 并在 C# 代码中设置其值，如上所示。然后在客户端，您可以编写 javascript，它作用于 DOM 中呈现和可用的元素。
请在上面的描述中查看我的更新版本，仍然无法正常工作，没有弹出警报，请纠正我正在做的任何错误
由于您使用的是母版页，因此在客户端呈现的 ID 会与 errorMessageHidden 有点不同。它可能类似于 MainContent_errorMessageHidden。您可以通过右键单击并选择页面的查看源来检查。在 document.getElementById 中使用该 ID。最后警报应该是 alertMsg.value。查看我的编辑。
那个工作的伙伴，正如你所说，是 MainContent_errorMessageHidden。