ASP.net JQuery: Div in a dialog

I am trying to create an email share thing for a website. In the master page I have a link for which I have a jquery click event firing. In the click event, a div in master page is opened in jquery dialog. The div has some textboxes for email, sender name and message thing. Then it includes two buttons: one foe sending email and other one for cancelling.

Hyperlink in Master page

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

Jquery code: it includes the click event for the above hyperlink wherein the dialog is opened.

$(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");

    });

});

Here is the div from master page which is opened in jquery dialog:

<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]+@((\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>

Here is the code behind event for email send button from the dialog:

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("abbc@mycompany.com");
    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();
    }
}

The problem is in case an invalid email (e.g. xyz@xyz.com )is entered, which passes the validation, an exception is thrown. Before this exception is displayed to the user, the dialog window closes. If the hyperlink is clicked again, the dialog opens the div and all the previous data is still in the textboxes and the exception is di开发者_运维问答splayed in the error label. So I want to keep the dialog window open and display the exception in the error label in the first place. Moreoever, on exiting the dialog, I want the div textboxes to be cleared so that next time the user opens the email hyperlink, there is no data in the textboxes.

One more strange thing that i noticed was that I have client side event for the email send button in jquery, which should fire after server side event for the same button completes. Hwoever it never fires.

$("#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");

});

None of these events fire ...

Any help will be appreciated.

1: Since it is a doing a postback, your dialog closes. You will have to consider using ajax / webservice to send the email upon button click.

2: Define an handler for 'close' event of dialog and clear all your text-box. So whenver the dialog closes, your tbs will be cleared.

3: I think your client-side click event is not firing because your btnSend is not found. By default ASP.NET will change the id of your btnSend to some different.

Try like this: $("#<%=btnSend.ClientID %>")

If you do not want to go the webservice route as gbs suggested, you can also have btnSend_Click inject a script into the page when it reloads.

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

You can also put insert the validation error into the dialog at this point as well.