简体   繁体   中英

Thank You message display after form submission mvc umbraco

I have created a Contact us form using surface controller in umbraco. Form is working fine. Now i need to display a thank you message after form submission using java script. i am quite weak in java scipt please guide me how i can do it. I am pasting the code that i have implemented.

My ActionResult

public ActionResult Contact(ContactUs model)
    {
        if (ModelState.IsValid)
        {
            var sb = new StringBuilder();
            sb.Append("<table>");
            sb.Append("<tr>");
            sb.Append("<td>Name</td>");
            sb.Append(string.Format("<td>{0}</td>", model.Name));
            sb.Append("</tr>");
            sb.Append("<tr>");
            sb.Append("<td>Company</td>");
            sb.Append(string.Format("<td>{0}</td>", model.Company));
            sb.Append("</tr>");
            sb.Append("<tr>");
            sb.Append("<td>Email</td>");
            sb.Append(string.Format("<td>{0}</td>", model.EmailFrom));
            sb.Append("<tr>");
            sb.Append("<td>Phone</td>");
            sb.Append(string.Format("<td>{0}</td>", model.Tel));
            sb.Append("</tr>");
            sb.Append("<tr>");
            sb.Append("<td>Interested</td>");
            sb.Append(string.Format("<td>{0}</td>", model.Intrested));
            sb.Append("</tr>");
            sb.Append("<tr>");
            sb.Append("<td>Message</td>");
            sb.Append(string.Format("<td>{0}</td>", model.Message));
            sb.Append("</tr>");
            String subject = String.Format("{0} wants to talk to you!", model.Name, model.EmailFrom, model.Company);
            string emailTo = Umbraco.Field("toEmail").ToString();

            SmtpClient smtpServer = new SmtpClient();
            smtpServer.Host = Umbraco.Field("host").ToString();

            string ssl = Umbraco.Field("ssl").ToString();
            smtpServer.EnableSsl = Convert.ToBoolean(ssl);
            //smtpServer.EnableSsl = true;
            //smtpServer.Host = "119.159.253.203";
            //smtpServer.Credentials = new System.Net.NetworkCredential("raheemjanjua28@gmail.com", "code-desk");
            System.Net.NetworkCredential Credentials = new System.Net.NetworkCredential();
            Credentials.UserName = Umbraco.Field("fromEmailAddress").ToString();
            Credentials.Password = Umbraco.Field("password").ToString();

            smtpServer.UseDefaultCredentials = false;
            smtpServer.Credentials = Credentials;
            string portNumber = Umbraco.Field("portNumber").ToString();
            smtpServer.Port = int.Parse(portNumber);

            MailMessage mail = new MailMessage();
            mail.From = new MailAddress(model.EmailFrom);
            mail.To.Add(emailTo);
            //mail.To.Add("ammar.zaheer@code-desk.com");
            mail.Subject = subject;
            mail.IsBodyHtml = true;
            mail.Body = sb.ToString();
            if (model.Attachment != null && model.Attachment.ContentLength > 0)
            {
                var attachment = new Attachment(model.Attachment.InputStream, model.Attachment.FileName);
                mail.Attachments.Add(attachment);
            }
            smtpServer.Send(mail);

            return CurrentUmbracoPage();
        }

        else
        {

            return CurrentUmbracoPage();
        }
    }

and this my view

   <div id="respond" class="comment-respond">
  @model Umbraco.AddingValues.Web.Model.ContactUs

   @using (Html.BeginUmbracoForm("Contact", "ContactUsSurface", FormMethod.Post, new { @class = "contact-form" }))
 { 
@Html.ValidationSummary(true)

<div id="form">
    <div class="comment-form-author">
    @Html.LabelFor(x => x.Name)
    @Html.TextBoxFor(x => x.Name)
    @Html.ValidationMessageFor(x => x.Name)
     </div>
     <div class="comment-form-author">
     @Html.LabelFor(x => x.Company)
    @Html.TextBoxFor(x => x.Company)
    @Html.ValidationMessageFor(x => x.Company)
      </div>
      <div class="comment-form-email">
    @Html.LabelFor(x => x.EmailFrom, "Email")
    @Html.TextBoxFor(x => x.EmailFrom)
    @Html.ValidationMessageFor(x => x.EmailFrom,"Please enter a valid Email Address")
      </div>
     <div class="comment-form-author">
    @Html.LabelFor(x => x.Tel)
    @Html.TextBoxFor(x => x.Tel)
    @Html.ValidationMessageFor(x => x.Tel)
         </div>
       <div class="comment-form-url">
    @Html.LabelFor(x => x.Intrested)
    @Html.TextBoxFor(x => x.Intrested)
    @Html.ValidationMessageFor(x => x.Intrested)
      </div>
     <div class="comment-form-comment">
    @Html.LabelFor(x => x.Message)
    @Html.TextAreaFor(x => x.Message)
    @Html.ValidationMessageFor(x => x.Message)
       </div>

</div>
 <div id ="hidden_div" style="display: none">
    <h3>Thank You</h3>
</div>
 <div class="forms-button">
<input id="submit" class="button" name="submit" type="submit" value="Submit" onsubmit="alert('thank you')" />
     <div class="fileUpload ">
            <span>Upload</span>
           @* <input type="file" class="upload" />*@
         <input type="file" name="attachment" id="attachment" class="upload" value ="Upload"/> 
        </div>
    </div>

}

This is the java script code i am implementing

  <script type="text/javascript">
  function showHide() {

    var div = document.getElementById("hidden_div");
    if (div.style.display == 'none') {
        div.style.display = '';
    }
    else {
        div.style.display = 'none';
    }
}

Its done I used ajax I am pasting the ajax code if any body needs help.

  <script type="text/javascript">
var message = "@ViewBag.success";
    if(message == "success")
{
        $("#hidden_div").text("Thank You! Your message has been recieved.");
}
$("#submit").submit(function () {

     var url = "ContactUsSurfaceController/Contact"; // the script where you handle the form input.

    $.ajax({
        type: "POST",
        url: url,
        data: $("#submit").serialize(), // serializes the form's elements.
        success: function (message)
        {

            alert(message); // show response from the php script.
        }
    });

    return false; // avoid to execute the actual submit of the form.
});

</script>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM