jQuery更新剃刀“ if”语句

杰普·克里斯滕森(Jeppe Christensen)

我有以下HTML:

@if (Model.emailhasbeensent != true) 
{ 
<div id="MailFoot">            
<input id="input1" class="form-control" type="email" />
<button type="submit" class="btn btn-default" id="emailSignup">Signup</button></div>
}

else {
<div id="ty" style="display:none">
<p>Thank you for subscribing </p>
</div>
}

提交我的电子邮件表单后,Ajax脚本将调用我的控制器并进行更新Model.emailhasbeensent(将其设置为true)。但是,页面不会刷新,这意味着该视图不会显示“感谢您订阅”文本。相反,电子邮件提交表单仍然存在。

我以为我可以<div>在我的剃刀“ if”语句周围放一些标签,然后.load在提交时在jQuery中放入div。

但是,它不起作用。

如何在Model.emailhasbeensent不更新整个页面的情况下更新并让if语句显示“谢谢您的订阅”?

我可以做类似的事情:

$("#emailSignup").click(function () {
        $.ajax({
            type: 'POST',
            url: "@Url.Action("EmailSend", "Home")",
            data: { input1: $('#input1').val(), __RequestVerificationToken:$('[name=__RequestVerificationToken]').val() },
    success: function () {
        $("#MailFoot").css({"display":"none"});
        $("#ty").removeAttr("style");
    }

但这是我真的不喜欢的解决方案,因为它没有考虑我的财产emailhasbeensent-显然是因为即使页面刷新了,我也希望会话记住设置。

控制器:

    public void EmailSend(string input1)
    {

        EmailSignup person = new EmailSignup { emailhasbeensent = false, Email = input1 };
        if(person.emailhasbeensent != true){

        SmtpClient client = new SmtpClient("smtp.gmail.com", 587);
        client.EnableSsl = true;
        client.UseDefaultCredentials = false;
        client.DeliveryMethod = SmtpDeliveryMethod.Network;
        client.Credentials = new NetworkCredential("mail", "password");

        MailMessage message = new MailMessage();
        message.From = new MailAddress("mail");
        message.To.Add(person.Email);
        message.Subject = "Thank you for subscribing";
        message.Body = "You have now subscribed for our newsletter";
        message.IsBodyHtml = true;
        client.Send(message);
        person.emailhasbeensent = true;
        }
        else { }
    }

模型:

public class EmailSignup
{
    public string Email { get; set; }
    public bool emailhasbeensent { get; set; }
}
y州

看起来您正在进行ajax调用以调用发送电子邮件的方法。在这种情况下,让您的服务器方法返回一个json响应值,指示操作是否成功,然后让处理回调的javascript检查该值并隐藏/显示消息的适当div。

[HttpPost]
public ActionResult EmailSend(string input1)
{
  try
   {
       //your existing code to send email
      return Json(new { status="success"});
   }
   catch(Exception ex)
   {
      // to do :Log error
      return Json(new { status="error"});
   }

}

并且在客户端代码中,当您从ajax调用返回响应时,请检查status属性并隐藏并显示适当的div。您可以done()$.ajax方法使用事件

$("#emailSignup").click(function (e) {
     e.preventDefault();

     $.ajax({
            type: 'POST',
            url: "@Url.Action("EmailSend", "Home")",
            data: { input1: $('#input1').val(), __RequestVerificationToken:$('[name=__RequestVerificationToken]').val() },
            }).done(function(res){
                 if(res.status==="success")
                 {
                   $("#MailFoot").hide();
                   $("#ty").show();
                 }
                 else
                 {
                    alert("Error sending email");
                 }
              });
});

由于您正在执行ajax发布并使用客户端javascript更新DOM元素可见性,因此无需在剃刀代码上添加if条件。剃刀文件上的所有C#代码都将在服务器上执行,而客户端代码则在浏览器上执行。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章