需要在 asp.net 回发逻辑期间发出 jQuery 确认消息

Question

我在 ASP.Net 中有一个“注册”类型的网络表单。当用户单击提交按钮时，Page.IsPostBack 代码会更新数据库并“通知用户”将发生重定向到登录页面。这一切都很好，但很丑陋，我想让它更“优雅”。这是我从 Page_Load (IsPostBack) 中截取的当前技术的 sn-p：

Dim wrapper As New StringBuilder
Dim inner As New StringBuilder
inner.Append("Company ID ") 'txtCompanyID
inner.Append(Convert.ToString(Me.txtCompanyID.Text))
inner.Append(" has been successfully created. ")
inner.Append("\nYou will now be redirected so you can Login for the first time.")
wrapper.Append("<script language='javascript'>")
wrapper.Append("window.alert('")
wrapper.Append(inner.ToString())        'inject real message into wrapper
wrapper.Append("');")
wrapper.Append("window.location.href='")
wrapper.Append("../Login.aspx';")
wrapper.Append("</script>")
Response.Write(wrapper.ToString())

我有一些使用 jQuery UI 对话框作为 Javascript 的样式替代方案的经验 - 但是这些对话框是从客户端点击事件中调用的，我看不到如何将 jQuery 注入上述方法（我怀疑必须是一种更好的技术，但我还找不到）。

理想情况下，我想要一个样式精美的确认消息，其中单击“确定”按钮会将用户带到指定的新页面。

Answer 1

@gbs - 感谢您的建议。从那以及更多的研究和测试中，我想出了一个解决方案，我会在这里为像我这样的未来可怜的菜鸟总结一下：

首先，.aspx 中的 IsPostBack 逻辑简化为构造一条消息，该消息将成为 jQuery UI 对话框的主要内部内容并将其传递给新的公共子。所以，OP中的代码如下：

Dim inner As New StringBuilder
inner.Append("Success! Your account has been created.<br/><br/>")
inner.Append("A confirmation email message has been sent to you.<br/><br/>")
inner.Append("Just click OK and you will be redirected to <b>Login</b> for the first time.")
UIF.MsgBoxJQUI(inner.ToString(), "TCB Welcomes You", "OK", "../Login.aspx")

接下来，在UI引用的一个通用类库项目中，我添加了这个：

Public Class UIFunction

    Public Shared Sub MsgBoxJQUI(ByVal htmlMsg As String, _
        Optional ByVal title As String = "Please note:", _
        Optional ByVal caption As String = "OK", _
        Optional ByVal newURL As String = Nothing)
    Dim currentPage As System.Web.UI.Page = TryCast(HttpContext.Current.Handler, UI.Page)
    If currentPage IsNot Nothing Then ' use page instance..
        currentPage.ClientScript.RegisterStartupScript(currentPage.Page.[GetType](), _
             "dialog", _
             jQueryUIalert(htmlMsg, title, caption, newURL), _
             True)
    End If
End Sub

Private Shared Function jQueryUIalert(ByVal innerMsg As String, _
        Optional ByVal title As String = "Please note:", _
        Optional ByVal caption As String = "OK", _
        Optional ByVal newURL As String = Nothing) As String
    Dim wrapper As New StringBuilder
    wrapper.Append("$(function(){showDialog3('")
    wrapper.Append(innerMsg)       'inject real message into wrapper
    wrapper.Append("','")
    wrapper.Append(title)
    wrapper.Append("','")
    wrapper.Append(caption)
    wrapper.Append("','")
    wrapper.Append(newURL)
    wrapper.Append("')")
    wrapper.Append("});")
    Return wrapper.ToString()
End Function

接下来，我在 SiteLayout.master 页面的头部添加了以下引用：

    <script type="text/javascript" src="<%= ResolveClientUrl("~/js/sitewide.js") %>"></script>

接下来，sitewide.js文件中的实际Javascript函数调用jQuery如下：

//The following function is called from the script injected from code-behind.
function showDialog3(message, title, caption, nextUrl) {
    title = title || 'Welcome to TCB';
    caption = caption || 'OK';
    nextUrl = nextUrl || '../Login.aspx';
    $('body').append("<div id='some-Message'></div>");
    $("#some-Message").dialog({
        autoOpen: false,
        dialogClass: 'myAlert',
        buttons: [
                {
                    text: caption,
                    click: function() {
                        $(this).dialog("close");
                    }
                }
            ],
        create: function() {
            $(this).closest(".ui-dialog").find(".ui-button").eq(1).addClass("deleteButtonClass");
        },
        hide: 'blind',
        height: 'auto',
        width: 'auto',
        close: function(event, ui) { window.location.href = nextUrl; },
        modal: true,
        show: 'blind',
        title: title
    }).dialog('widget')
                .next(".ui-widget-overlay")
                .css("background", "#737373");
    $("#some-Message").append(message);
    $("#some-Message").dialog('open');
    $('.ui-widget-overlay').css('background', '#737373');
}