Asp.net 更改Alert样式和后台注册Jquery的Ajax异步提交事件[包括处理前操作、处理后操作(注明:此方法只是作为参考，如有需要可自行修改)]…

近段时间看到很多人提出Asp.net后台如何调用js和后台能否直接注册Jquery的Ajax异步提交事件。所以在这里想把自己的测试结果发布一下，希望能对大家有一定的帮助。

本次的事例需要用到JQuery的一个外部实现。

JQuery.Alert

原本是想直接把需要用到的文件给上载上来，但不知道该如何上传，只能给大家地址自行下载.

http://www.abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/

文件很小只有7kb，但是需要自己下载JQuery.js或者直接调用Google服务器上的JQuery就可以.

不废话了,开始先把效果贴上来.

(图1)

上图是提示窗事例,JQuery.Alert的提示窗有它自己的API.可以让我们在后台简单的一句代码就可以随处调用.下面是提示窗代码.

public static void Alert(string title,string message,System.Web.UI.Page page)
        {
            page.RegisterStartupScript("注册Script的名称", "<script>$.alerts.dialogClass = 'style_1';jAlert('" + message + "', '" + title + "', function () {$.alerts.dialogClass = null;});</script>");
        }

调用方法: 在处理事件需要Alert的地方加入: 辅助类的名称.Alert("这是提示框", "这是提示信息", this.Page);

这个方法可以放在某个辅助类里，哪里需要，哪里调用即可.

上面就是asp.net在Page里注册js的方法，利用RegisterStartupScript方法可以直接执行需要的JS操作.代码里的$.alerts.dialogClass=’style_1′;就是JQuery.Alert调用自定义样式的方法,style_1是我自定义的样式名称,下面把样式代码贴上：

/* Custom dialog styles */
            #popup_container.style_1 {
                font-family: Georgia, serif;
                color: #A4C6E2;
                background: #005294;
                border-color: #113F66;
}

            #popup_container.style_1 #popup_title {
                color: #FFF;
                font-weight: normal;
                text-align: left;
                background: #76A5CC;
                border: solid 1px #005294;
                padding-left: 1em;
}

            #popup_container.style_1 #popup_content {
                background: none;
}

            #popup_container.style_1 #popup_message {
                padding-left: 0em;
}

            #popup_container.style_1 INPUT[type='button'] {
                border: outset 2px #76A5CC;
                color: #A4C6E2;
                background: #3778AE;
}

以上操作,即可让你解决.net自带提示框折磨大家视觉且能解决与某些js插件冲突的问题（如果你觉得事例的样式还是丑,有能力自己完全可以自定义更漂亮的.）.

上面的实现很简单吧？那接下来,拿出个稍有难度的东西但很有帮助的东西来与大家分享。我想，很多人都希望Ajax能在后台直接触发，该有多好，省的在页面翻来覆去的写那么多行代码。现在，你不必为这个问题再烦恼，执行完以下操作，一行代码即可让你完成一个异步提交，当然，如果你觉得下面的方法自己不适用，完全可以按照我的方法自行定制，只要知道JQuery.Ajax的语法，完全能够自己给自己定制。

下面开始真正的解决方案：

（图2）

注明:上图是JQuery.Alert提供的一个输入文本提示框样例，我在后台注册控件的Ajax事件，在按下OK键时触发异步操作.

以下是实现步骤:

首先也需要在页面载入JQuery和JQuery.alert的js文件和它的样式文件.

在页面加入一个A标签：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Alert Dialogs</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta name="description" content="This is a demonstration page." />
    <meta name="keywords" content="alert, confirm, prompt, demo" />
    <script type="text/javascript" src="/Theme/js/jquery-1.7.1.min.js"></script>
    <script src="/Common/Alert/jquery.alerts.js" type="text/javascript"></script>
    <link href="/Common/Alert/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
    <form id="form1" runat="server">
        <a id="ajaxbtn">点击此处触发异步事件</a>
    </form>
</body>
</html>

同样，在辅助类里添加注册事件的方法:

/// <summary>
/// ajax提交字符串生成(前台页面必须要有JQuery引用，否则页面会提示JS错误)
/// </summary>
/// <param name="controlName">需要触发当前异步提交操作的控件名称</param>
/// <param name="handlePath">处理程序地址(最好是相对路径，如果想使用绝对路径[是指带域名的地址]，可自行测试成功与否，本人未亲测)</param>
/// <param name="dataList">处理程序接收参数列表,列表格式例如：id=123&param=2,如果需要接收输入字符是否为空值请在参数列表中添加 如：albumName=\"+r+\"[提示：转意字符和加号都需要添加入字符串中]</param>
/// <param name="typeName">处理程序接收的typename参数值[主要用来在处理程序中多方法的单独调用,在处理程序中可直接QueryString["typename"]获取.]</param>
/// <param name="dataType">提交方式 例如:post get</param>
/// <param name="befordSendProcessing">异步操作前的操作  只需要添加内部方法的String字符串即可 例如: $('btnLogin').click(alert('开始登录')</param>
/// <param name="successProcessing">成功从处理程序返回值后的操作  例如：if(data=='1')alert('成功');  注明:处理程序返回两个参数,data与textStatus.data存储返回时的数据,textStatus返回请求状态</param>
/// <param name="completeProcessing">执行完毕处理方法后的操作   例如:$('#btnLogin').hide(); </param>
/// <param name="page">使用本方法的页面，因为需要用来注册此异步方法   例如：this.Page;</param>
        public static void AjaxPost(string controlName,string handlePath, string dataList,string typeName, string dataType, string befordSendProcessing, string successProcessing,string completeProcessing, System.Web.UI.Page page)
        {
string ajaxStr = "<script>$.alerts.dialogClass = 'style_1';$(\"#" + controlName + "\").click(function () {" +
"jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function (r) {if(r)$.ajax({" +
"type: \""+dataType+"\"," +
"url: \"" + handlePath + "?typename=" + typeName + "&" + dataList +"\","+
"beforeSend: function (XMLHttpRequest) {" + befordSendProcessing + "}," +
"success: function (data, textStatus) {" +
                       successProcessing+
"}," +
"complete: function (XMLHttpRequest, textStatus) {" + completeProcessing + "}," +
"error: function () {}}); });});</script>";
            page.RegisterStartupScript("1", ajaxStr);
        }

注释我已经写的很清楚,方法当然可以自己定制,例如我希望更简单些,那你可以把需要执行的方法变成字符串在页面进行page.RegisterStartupScript注册,我只是把完整的东西拿出来写成方法供自己使用而已.具体使用大家可自行解决.

当前页面后台调用方法：

Services.AlertHelper.AjaxPost("asdasd", "/Public/Album/Album.ashx", "albumName=\"+r+\"", "album", "post", "", "if(data=='1'){alert('成功');}else{alert('失败')}", "", this.Page);

测试是在Page_Load里注册异步提交事件,以免Button或者LinkButton在执行时会刷新页面.如果需要的话,可自己去查找文档,怎么能防止提交刷新页面.

注明:在jPrompt方法里可对比图2自行修改提示标题和提示内容.jPrompt执行方法操作中,function(r)其中的“r”就是输入框输入值,在文本里调用的时候需要注意js格式问题,js在追加字符串的时候需要把字符串隔断后使用”+”号来进行拼接.

例如我的例子在successProcessing自定义的方法体中需要判断或获取的话,就要写为:”albumName=\”+r+\””否则输出的时候会被Js认为是字符r输出.

样式的话一样可以自己定义.

当然,JQuery.Alert提供的也有Confirm窗体,具体实现,大家可以参照本章进行定制.我发个图供大家参考,有需要的自己完成吧.

其它的就不多说,如果有什么新的有趣的东西,下次在随笔里写吧。如有问题，可以留言.我不定时会上来和大家一起探讨.

转载于:https://www.cnblogs.com/anniky/archive/2012/03/26/anniky.html

你可能也喜欢