感谢您在表单提交mvc umbraco后显示消息

时间:2014-10-20 09:36:01

标签: javascript asp.net-mvc forms umbraco7

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

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

和我的观点

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

1 个答案:

答案 0 :(得分:0)

它完成了我使用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>