表单提交后显示感谢信息mvc umbraco

Thank You message display after form submission mvc umbraco

本文关键字:信息 mvc umbraco 感谢信 感谢 显示 表单提交      更新时间:2023-09-26

我已经使用umbraco中的表面控制器创建了一个联系我们的表单。表单运行良好。现在,我需要在使用java脚本提交表单后显示一条感谢消息。我在javascipt方面很弱,请指导我如何做到这一点。我正在粘贴我已经实现的代码。

我的操作结果

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();
        }
    }

这是我的观点

   <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>

}

这是我正在实现的java脚本代码

  <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';
    }
}

我使用了ajax,如果有人需要帮助,我会粘贴ajax代码。

  <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>