【发布时间】：2018-07-19 13:33:09
【问题描述】：
我有一个 ajax 开始表单，可以让新用户订阅我的网站时事通讯。我希望我的潜在订阅者在点击该注册按钮时收到一个不错的弹出通知。我发现 jquery noty 插件看起来不错，使用 NPM 安装它并在我的主视图中引用了所有 js 文件。我在我的 app.js 文件中编写了脚本，但我不确定现在如何将它与我的 beginform 和 mvc 连接，或者我是否以正确的方式进行连接。如果有人可以提供帮助，这是所有代码：
因此，我希望使用该插件弹出通知，而不是控制器中的“返回内容”消息... ///////型号/////////
public class Newsletter
{
[Required]
public string FirstName { get; set; }
[Required]
public string LastName { get; set; }
[Required]
public string Email { get; set; }
}
/////////控制器/////////
public class MailChimpController : SurfaceController
{
[HttpPost]
public async Task<object> SubmitNewsletter(Newsletter contact)
{
if (ModelState.IsValid)
{
try
{
Member member = new Member()
{
EmailAddress = contact.Email,
StatusIfNew = Status.Subscribed
};
member.MergeFields.Add("FNAME", contact.FirstName);
member.MergeFields.Add("LNAME", contact.LastName);
IMailChimpManager manager = new MailChimpManager("######");
string list = "######";
await manager.Members.AddOrUpdateAsync(list, member);
return Content("random message");
}
catch (Exception ex)
{
return Content(ex.Message + "<br />" + ex.StackTrace);
}
}
return PartialView("~/Views/Partials/Home/_Contact.cshtml", ModelState);
}
}
////////////查看///////////////
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
<section>
@using (Ajax.BeginForm("SubmitNewsletter", "MailChimp", null, new AjaxOptions { UpdateTargetId = "statusNewsletter", }))
{
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 newsletter">
<h1>Subscribe to our newsletter</h1>
<div class="form-group">
<label for="firstname" class="sr-only">First Name</label>
@Html.TextBox("firstname", "", new { @class = "form-control-lg bg-dark", placeholder = "First Name" })
</div>
<div class="form-group">
<label for="lastname" class="sr-only">Last Name</label>
@Html.TextBox("lastname", "", new { @class = "form-control-lg bg-dark", placeholder = "Last Name" })
</div>
<div class="form-group">
<label for="email" class="sr-only">Email Address</label>
@Html.TextBox("email", "", new { @class = "form-control-lg bg-dark", placeholder = "email@example.com" })
</div>
<div class="form-group">
<button type="submit" id="submit" class="btn-lg bg-dark">Sign Up</button>
</div>
<div id="statusNewsletter"></div>
</div>
</div>
}
////////////app.js//////////
$(function newsletterNoty() {
var $statusNewsletter = $(this);
$submit = $statusNewsletter.find('submit');
$submit.on('click', function () {
var n = noty({
layout: 'center',
type: 'information',
theme: 'bootstrap',
text: 'This is what i want as alert!',
closeWith: ['click', 'hover'],
animation: {
open: { height: 'toggle' },
close: { height: 'toggle' },
easing: 'swing',
speed: 500
}
}).show();
});
});
【问题讨论】：
标签： javascript jquery asp.net-mvc-5 ajax.beginform