ASP.NET提示信息窗口的JS实现(附源码)_AX_asp源码事件提醒-优快云博客

本文介绍了一个 ASP.NET 应用中的弹窗验证功能实现案例，通过 JavaScript 和 C# 展示了如何创建弹窗窗口并进行文本框输入验证，确保只有当输入特定值时才允许页面进行 PostBack 操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【前台】

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%--引用外部文件的格式--%>

<%--<link href="../MessageBox.css" rel="stylesheet" type="text/css" />--%>

<%--<script language="javascript" src="../Owner.js" type="text/jscript"></script>--%>

<%--实现Popup功能--%>

//Create a popup window

var oPopup = window.createPopup();

var oPopupBody = oPopup.document.body;

oPopupBody.innerHTML = '<DIV id="divValidCharMoreInfo"><DIV ID="divValidCharMessage">AX made:</DIV><DIV ID="divValidCharSet"></DIV></DIV>';

oPopupBody.style.backgroundColor = "lightyellow";

oPopupBody.style.border = "solid black 1px";

oPopupBody.style.padding = "3px";

oPopup.document.all("divValidCharMessage").style.color = "green";

oPopup.document.all("divValidCharMessage").style.fontFamily = "arial";

oPopup.document.all("divValidCharSet").style.fontFamily = "arial";

oPopup.document.all("divValidCharMessage").style.fontSize = "9px";

oPopup.document.all("divValidCharSet").style.fontSize = "9px";

oPopup.hide();

//hide the pop-up window

function OnMouseOutValidCharactersMoreInformation()

{

oPopup.hide();

}

//show the pop-up window

function OnMouseMoveValidCharactersMoreInformation(charSet, height, width)

{

if (!oPopup.isOpen)

{

var obj = event.srcElement;

// alert(event.srcElement.innerHTML);

// alert(charSet);

oPopup.document.all("divValidCharSet").innerHTML = "Input the detail info in herre.<br />"+charSet;

// oPopup.document.all("divValidCharMessage").innerText = "";

// alert(obj.parent);

// var x = OffsetLeft(obj.parent) + event.clientX;

// var y = OffsetTop(obj.parent) + event.clientY + 5;

var x = event.clientX;

var y = event.clientY + 5;

// var width = oPopup.document.all("divValidCharMoreInfo").offsetWidth;

// var height = oPopup.document.all("divValidCharMoreInfo").offsetHeight;

oPopup.show(x, y, height, width, document.body);

}

event.cancelBubble = true;

}

</script>

<%--Popup功能高级应用JS--%>

function clientValidator_AX(AX,zhz)

{

if(document.getElementById("TextBox1").value=="AX")

{

zhz.IsValid=true;

}

else

{

zhz.IsValid=false;

}

</script>

<%--Popup功能高级应用CSS--%>

.moreInformationValidCharSet

{}{

cursor:hand;

color:blue;

font-family:arial;

font-size:10px;

text-decoration:underline

}

</style>

<title>Untitled Page</title>

</head>

<body>

<font color="olive">基本功能演示:鼠标放我上面!</font>

</span>

<br />

<div>

只有文本框输入的内容为【AX】时,页面才进行PostBack动作!

</div>

<div>

 <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 

<asp:Button ID="Button1" runat="server" Text="点我" /><br />

<asp:CustomValidator ID="CustomValidator_AX" runat="server" ErrorMessage="" ClientValidationFunction="clientValidator_AX" ControlToValidate="TextBox1" Display="Dynamic" ValidateEmptyText="True"></asp:CustomValidator>

</div>

</form>

</body>

</html>

【后台】

直接为控件添加两个触发事件就OK了.如下:

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

string errorMessage = "Invalid characters or format have been entered." +

" <span onmouseout='javascript:OnMouseOutValidCharactersMoreInformation()' " +

"onmousemove='javascript:OnMouseMoveValidCharactersMoreInformation({0}, {1}, {2})' class='moreInformationValidCharSet' >" +

"More Information." + "</span>";

//这句话会报错,我研究了2个小时才找出来的.Why?自己想下就知道了,明摆着呢!

//this.CustomValidator_AX.ErrorMessage = string.Format(errorMessage, "这里输入详细错误!", 320, 70);

this.CustomValidator_AX.ErrorMessage = String.Format(errorMessage, ""这里输入详细错误"", 320, 70);

}

【使用】