How to display success message after an email is sent on the jquery-ui dialog having an enquire form?

See more:

ASP.NET

Ajax

MVC

dialog

JSON

Razor

, +

I want the existing EnquireNow.cshtml View to be rendered on a JQuery-UI dialog on click of a link named 'Enquire Now' on my ProductDetails page.

Following is the snapshot of the ProductDetailspage.

<script type="text/javascript">
$(function () {
        $('#dialogbox').dialog({
            type:'POST',
            autoOpen: false,
            width: 400,
            resizable: false,
            title: 'hi there',
            datatype:'json',
            modal: true,
            @*open: function (event, ui) {
                //Load the CreateAlbumPartial action which will return 
                // the partial view _CreateAlbumPartial
                $(this).load("@Url.Action("ContactUs", "Common")");
            },*@
           
          buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            }

        });

        $('#simpledialog').click(function () {
            //$('#dialogbox').dialog('open');
            $('#dialogbox').load("@Url.Action("ContactUs","Common")",
                function (response, status, xhr) {
                    $('#dialogbox').dialog('open');
                    return false;
                });
        });
    });
</script>

<div class="page product-details-page">
<a href="#" id="simpledialog">Enquire Now</a>
<div id="dialogbox" style="overflow:hidden;"></div>
</div>

* Note: I have referred the necessary Script files and Css files for JQUery-UI.

Following is my EnquireNow.cshtml View

@model ContactUsModel
@using Nop.Web.Models.Common;
<div class="page contact-page">
   @* @Html.Action("TopicBlock", "Topic", new { systemName = "ContactUs" })*@
    <div class="clear">
    </div>
    <div class="page-body">
        @Html.Widget("contactus_top")
        @if (Model.SuccessfullySent)
        {
            <div class="result">
                @Model.Result
            </div>        
        }
        else
        {
            using (Html.BeginForm())
            {
            <fieldset>
                <legend>@T("PageTitle.ContactUs")</legend>
                <p class="message-error">
                    @Html.ValidationSummary(true)
                </p>
                <div class="forms-box">
                    <div class="inputs-left">
                        <div class="inputs">
                            @Html.LabelFor(model => model.FullName)
                            <div class="input-box">
                                @Html.TextBoxFor(model => model.FullName, new { @class = "fullname", placeholder = T("ContactUs.FullName.Hint") })
                            </div>
                            @Html.ValidationMessageFor(model => model.FullName)
                        </div>
                        <div class="inputs">
                            @Html.LabelFor(model => model.Email)
                            <div class="input-box">
                                @Html.TextBoxFor(model => model.Email, new { @class = "email", placeholder = T("ContactUs.Email.Hint") })
                            </div>
                            @Html.ValidationMessageFor(model => model.Email)
                        </div>
                        @if (Model.DisplayCaptcha)
                        {
                            <div class="captcha-box">
                                @Html.Raw(Html.GenerateCaptcha())
                            </div>
                        }
                    </div>
                    <div class="inputs-right inputs">
                        @Html.LabelFor(model => model.Enquiry)
                        <div class="input-box">
                            @Html.TextAreaFor(model => model.Enquiry, new { @class = "enquiry", placeholder = T("ContactUs.Enquiry.Hint") })
                        </div>
                        @Html.ValidationMessageFor(model => model.Enquiry)
                    </div>
                </div>
                <div class="clear">
                </div>
                <div class="buttons">
                    <input type="submit" name="send-email" value="@T("ContactUs.Button")" />
                </div>
            </fieldset> 
            }
        }
        @Html.Widget("contactus_bottom")
    </div>
</div>

Below is the Controller Action for EnquireNow --

[NopHttpsRequirement(SslRequirement.No)]
 public ActionResult EnquireNow()
 {
            var model = new ContactUsModel()
            {
                Email = _workContext.CurrentCustomer.Email,
                FullName = _workContext.CurrentCustomer.GetFullName(),
                DisplayCaptcha = _captchaSettings.Enabled && _captchaSettings.ShowOnContactUsPage
            };
            if (Request.IsAjaxRequest())
            {
                return View(model);
                
            }
            else
            {
                return View(model);
            }
        }
       
        [HttpPost, ActionName("EnquireNow")]
        [CaptchaValidator]
        public ActionResult EnquireNowSend(ContactUsModel model, bool captchaValid)
        {
            //validate CAPTCHA
            if (_captchaSettings.Enabled && _captchaSettings.ShowOnContactUsPage && !captchaValid)
            {
                ModelState.AddModelError("", _localizationService.GetResource("Common.WrongCaptcha"));
            }

            if (ModelState.IsValid)
            {
                string email = model.Email.Trim();
                string fullName = model.FullName;
                string subject = string.Format(_localizationService.GetResource("ContactUs.EmailSubject"), _storeInformationSettings.StoreName);

                var emailAccount = _emailAccountService.GetEmailAccountById(_emailAccountSettings.DefaultEmailAccountId);
                if (emailAccount == null)
                    emailAccount = _emailAccountService.GetAllEmailAccounts().FirstOrDefault();

                string from = null;
                string fromName = null;
                string body = Core.Html.HtmlHelper.FormatText(model.Enquiry, false, true, false, false, false, false);
                //required for some SMTP servers
                if (_commonSettings.UseSystemEmailForContactUsForm)
                {
                    from = emailAccount.Email;
                    fromName = emailAccount.DisplayName;
                    body = string.Format("From: {0} - {1}<br /><br />{2}",
                        Server.HtmlEncode(fullName),
                        Server.HtmlEncode(email), body);
                }
                else
                {
                    from = email;
                    fromName = fullName;
                }
                _queuedEmailService.InsertQueuedEmail(new QueuedEmail()
                {
                    From = from,
                    FromName = fromName,
                    To = emailAccount.Email,
                    ToName = emailAccount.DisplayName,
                    Priority = 5,
                    Subject = subject,
                    Body = body,
                    CreatedOnUtc = DateTime.UtcNow,
                    EmailAccountId = emailAccount.Id
                });

                model.SuccessfullySent = true;
                model.Result = _localizationService.GetResource("ContactUs.YourEnquiryHasBeenSent");

                //activity log
                _customerActivityService.InsertActivity("PublicStore.ContactUs", _localizationService.GetResource("ActivityLog.PublicStore.ContactUs"));

                return View(model);
                //return Json(new { success = true });  
            }

            model.DisplayCaptcha = _captchaSettings.Enabled && _captchaSettings.ShowOnContactUsPage;
            return View(model);
           // return Json(new { success = true });  
        }

Problem:

When I click on the hyperlink 'Enquire Now' , it opens the JQuery Dialog which renders the EnquireNow.cshtml View. This works fine. But when I click the 'Submit' button on the form on the dialog popup after entering all the details like name, phone and email, instead of refreshing the same opened dialog popup to show the email sent success message, it shows the message on a new page.

Kindly someone tell me how to refresh the same opened dialog popup to show the success message ???

Thanks..

SidMat