我有以下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; }
}
看起来您正在进行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] 删除。
我来说两句