2011-06-03 57 views
0

我想爲網站創建一個電子郵件分享的東西。在母版頁我有一個鏈接,我有一個jQuery點擊事件觸發。在click事件中,主頁中的div在jquery對話框中打開。該div有一些電子郵件,發件人名稱和消息的文本框。然後它包含兩個按鈕:一個發送電子郵件和一個取消郵件。ASP.net JQuery:在對話框中的Div

超鏈接在母版頁

<a href="#" id="dialog_link" > 
    <asp:Image ID="imgSendEmail" runat="server" ImageUrl="~/images/icons/email.gif" AlternateText="Email"/> 
</a> 

jQuery代碼:它包括上述的超鏈接,其中被打開的對話框中單擊事件。

$(document).ready(function() { 

    var dlg = $("#dialog").dialog({ 

     modal: true, 
     draggable: true, 
     resizable: true, 
     show: 'Transfer', 
     hide: 'Transfer', 
     width: 550, 
     title: 'Send Email', 
     autoOpen: false, 
     minHeight: 10, 
     minwidth: 10, 
     closeText: 'X', 
     closeOnEscape: true, 
     overlay: { 
     backgroundColor: '#000', 
     opacity: 0.65 
    }, 

    }); 

    dlg.parent().appendTo(jQuery("form:first")); 

    $("#dialog_link").click(function() { 

     $("#dialog").dialog("open"); 
     var pgTitle = $(document)[0].title; 
     $("span[id*='lblPageTitle']").text(pgTitle); 
     var pgURL = window.location.pathname; 
     $("span[id*='lblPageUrl']").text(pgURL); 


    }); 

    $("#btnSend").click(function() { 

     alert("In btn Email Send"); 
     $("#dialog").dialog("close"); 

    }); 

    $("#form1 input[name=btnSend]").click(function() { 

     alert("In btn Email Send click 2"); 
     $("#dialog").dialog("close"); 

    }); 

}); 

下面是從母版頁中的div這是在jQuery的對話框打開:

<div id="dialog" style="text-align: left; background-color: white;"> 
    <h2>Share this with your friends</h2> 
    <hr style="width: 98%" /> 
    <table width="98%"> 
     <tr> 
      <td colspan="2"> 
       Title: 
       <asp:Label ID="lblPageTitle" runat="server" CssClass="blue"></asp:Label><br /> 
       Url:&nbsp;&nbsp; 
       <asp:Label ID="lblPageUrl" runat="server" CssClass="blue"></asp:Label> 
       <asp:Label ID="lblTest" runat="server" BackColor="ActiveBorder"></asp:Label> 
      </td> 
     </tr> 
     <tr> 
      <td colspan="2"> 
       <hr /> 
      </td> 
     </tr> 
     <tr> 
      <td width="15%"> 
       <asp:Label ID="NameLabel" runat="server" AssociatedControlID="txtName" Text="Your Name" /> 
      </td> 
      <td width="*"> 
       <asp:TextBox ID="txtName" runat="server" TabIndex="1" Width="70%" /> 
       <asp:RequiredFieldValidator ID="NameRequired" runat="server" Display="Dynamic" ControlToValidate="txtName" ErrorMessage="Name is required." ToolTip="Name is required." ValidationGroup="SendEmail">*</asp:RequiredFieldValidator> 
       <br /> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <asp:Label ID="EmailLabel" runat="server" AssociatedControlID="txtEmail" Text="Email To"></asp:Label> 
      </td> 
      <td> 
       <asp:TextBox ID="txtEmail" runat="server" TabIndex="2" Width="70%"></asp:TextBox> 
       <asp:RequiredFieldValidator ID="EmailRequired" runat="server" Display="Dynamic" ControlToValidate="txtEmail" ErrorMessage="Email is required." ToolTip="Email is required." ValidationGroup="SendEmail">*</asp:RequiredFieldValidator> 
       <asp:RegularExpressionValidator ID="regexEmail" runat="server" ControlToValidate="txtEmail" CssClass="red" Display="Dynamic" ErrorMessage="Please enter a valid email address" ValidationGroup="SendEmail" ValidationExpression="^(([A-Za-z0-9]+_+)|([A-Za-z0-9]+\-+)|([A-Za-z0-9]+\.+)|([A-Za-z0-9]+\++))*[A-Za-z0-9][email protected]((\w+\-+)|(\w+\.))*\w{1,63}\.[a-zA-Z]{2,6}$"></asp:RegularExpressionValidator> 
       <br /> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <asp:Label ID="MessageLabel" runat="server" AssociatedControlID="txtMessage" Text="Message"></asp:Label> 
      </td> 
      <td> 
       <asp:TextBox ID="txtMessage" runat="server" TabIndex="3" TextMode="MultiLine" Columns="6" Rows="6" Width="98%" Font-Size="Small" Text="Check this out!" /> 
       <asp:RequiredFieldValidator ID="MessageRequired" runat="server" Display="Dynamic" ControlToValidate="txtMessage" ErrorMessage="Message is required." ToolTip="Message is required." ValidationGroup="SendEmail">*</asp:RequiredFieldValidator><br /> 
      </td> 
     </tr> 
     <tr> 
      <td colspan="2"> 
       <asp:Button ID="btnSend" runat="server" Text="Send" ValidationGroup="SendEmail" CausesValidation="true" TabIndex="4" OnClick="btnSend_Click" /> 
       <asp:Button ID="btnCancel" runat="server" Text="Cancel" TabIndex="5" OnClick="btnCancel_Click" /> 
      </td> 
     </tr> 
     <tr> 
      <td colspan="2"> 
       <asp:Label ID="lblError" runat="server"></asp:Label> 
      </td> 
     </tr> 
    </table> 
</div> 

這裏是背後事件的代碼的電子郵件從對話框發送按鈕:

protected void btnSend_Click(object sender, EventArgs e) 
{ 
    string _nameSender = txtName.Text; 
    string _emailTo = txtEmail.Text; 
    string _messageText = txtMessage.Text; 
    string _automessage = string.Empty; 

    MailMessage message = new MailMessage(); 
    message.From = new MailAddress("[email protected]"); 
    message.To.Add(new MailAddress(_emailTo)); 
    message.Subject = _nameSender + " recommends " + Page.Title; 

    _automessage = _nameSender + " has recommended this web page for your viewing.\n"; 
    _automessage += HttpContext.Current.Request.Url.AbsoluteUri; 
    _automessage += "\n\n-------------------------------------------------------------------\n"; 
    _automessage += _nameSender + " said:\n"; 
    _automessage += _messageText; 


    message.Body = _automessage; 

    try 
    { 
     SmtpClient client = new SmtpClient(); 
     client.Send(message); 
    } 
    catch(SmtpException smptEx) 
    { 
     lblError.Text = smptEx.Message; 
     txtEmail.Focus(); 
    } 
} 

的問題是如果輸入無效的電子郵件(例如[email protected]),通過驗證,則會引發異常。在向用戶顯示此異常之前,對話窗口關閉。如果再次單擊超鏈接,對話框將打開div,並且所有先前的數據仍在文本框中,並且異常顯示在錯誤標籤中。 所以我想保持對話窗口打開並在錯誤標籤中首先顯示異常。更重要的是,在退出對話框時,我希望清除div文本框,以便下次用戶打開電子郵件超鏈接時,文本框中不會有數據。我注意到

一個更奇怪的是,我對jQuery的電子郵件發送按鈕,對於同一按鈕完成應服務器端事件發生火災後的客戶端事件。但它永遠不會燃燒。

$("#btnSend").click(function() { 

    alert("In btn Email Send"); 
    $("#dialog").dialog("close"); 

}); 

$("#form1 input[name=btnSend]").click(function() { 

    alert("In btn Email Send click 2"); 
    $("#dialog").dialog("close"); 

}); 

這些事件引發的無...

任何幫助將不勝感激。

回答

3

1:由於它是做回發,您的對話框關閉。點擊按鈕後,您將不得不考慮使用ajax/webservice發送電子郵件。

2:定義對話框的'close' event的處理程序,並清除所有文本框。所以當對話結束時,你的tbs將被清除。

3:我認爲您的客戶端點擊事件不會觸發,因爲您的btnSend找不到。默認情況下ASP.NET會將你的btnSend的id改爲一些不同的。

嘗試這樣的:$("#<%=btnSend.ClientID %>")

+0

在#3,加一注:如果您使用.NET 4,你可以設置'的ClientIDMode = 「靜態」'的按鈕標識強制留下'btnSend' – ShaneBlake 2011-06-03 18:42:57

+0

@ gbs ..感謝您的建議...我不想使用ajax ...並且我定義了一個服務器端關閉事件...是的,可以定義對話的關閉事件...關於#3 ..didnt不得不打電話給客戶端事件...它與它一起工作...但感謝您的所有建議... – shazia 2011-06-06 17:28:25

0

如果你不想去的WebService路由作爲GBS建議,你也可以有btnSend_Click注入腳本到頁面,當它重新加載。

ClientScript.RegisterStartupScript(this.GetType(),"reOpenDialog", "<script>dlg.dialog('open');</script>"); 

您也可以在此處插入驗證錯誤到對話框中。