我有一个 ajax begin 表单，用于向新用户订阅我的网站新闻通讯。我希望我的潜在订阅者在点击注册按钮时能够收到一个不错的弹出通知。我发现 jquery noty 插件看起来不错，使用 NPM 安装它并引用了我的主视图中的所有 js 文件。我在 app.js 文件中编写了脚本，但我不确定现在如何将其与 beginform 和 mvc 连接，或者我是否以正确的方式进行连接。如果有人可以帮忙，这里是所有代码:
因此，我想要使用该插件的弹出通知，而不是 Controller 中的“返回内容”消息...... ///////模型/////////
public class Newsletter
{
[Required]
public string FirstName { get; set; }
[Required]
public string LastName { get; set; }
[Required]
public string Email { get; set; }
}
////////// Controller //////////
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();
});
});
最佳答案
您能告诉我这篇文章是否对您有帮助吗？ (Noty 的样式有问题。所以我解决了这个问题。)
查看
@model Testy20161006.Controllers.MyViewModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
@*credit goes to http://jsfiddle.net/Misiu/y43sG/*@
<meta name="viewport" content="width=device-width" />
<title>IndexValid100</title>
<style type="text/css">
body {
padding-top: 50px;
}
* {
font-family: 'Open Sans', Helvetica Neue, Helvetica, Arial;
}
.starter-template {
padding: 40px 15px;
text-align: center;
}
a {
color: #428bca;
}
a:hover {
color: #D65C4F;
text-decoration: none;
}
#notification-list {
width: 300px;
max-height: 400px;
overflow-y: scroll;
}
.dropdown-menu > .panel {
border: none;
margin: -5px 0;
}
.panel-heading {
background-color: #f1f1f1;
border-bottom: 1px solid #dedede;
}
.activity-item i {
float: left;
margin-top: 3px;
font-size: 16px;
}
div.activity {
margin-left: 28px;
}
div.activity-item {
padding: 7px 12px;
}
#notification-list div.activity-item {
border-top: 1px solid #f5f5f5;
}
#notification-list div.activity-item a {
font-weight: 600;
}
div.activity span {
display: block;
color: #999;
font-size: 11px;
line-height: 16px;
}
#notifications i.fa {
font-size: 17px;
}
.noty_type_error * {
font-weight: normal !important;
}
.noty_type_error a {
font-weight: bold !important;
}
.noty_bar.noty_type_error a, .noty_bar.noty_type_error i {
color: #fff;
}
.noty_bar.noty_type_information a {
color: #fff;
font-weight: bold;
}
.noty_type_error div.activity span {
color: #fff;
}
.noty_type_information div.activity span {
color: #fefefe;
}
.no-notification {
padding: 10px 5px;
text-align: center;
}
.noty-manager-wrapper {
position: relative;
display: inline-block !important;
}
.noty-manager-bubble {
position: absolute;
top: -8px;
background-color: #fb6b5b;
color: #fff;
padding: 2px 5px !important;
font-size: 9px;
line-height: 12px;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
cursor: pointer;
height: 15px;
font-weight: bold;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
box-shadow: 1px 1px 1px rgba(0,0,0,.1);
opacity: 0;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
@*!!!!You need the unotrusive-ajax.min.js*@
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-ajax-unobtrusive@3.2.4/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript" src="https://ned.im/notymanager-preview/js/noty/packaged/jquery.noty.packaged.min.js"></script>
<script type="text/javascript">
$(function () {
$('form').submit(function () {
$.noty.defaults = {
layout: 'topRight',
theme: 'defaultTheme',
type: 'success',
text: '', // can be html or string
dismissQueue: true, // If you want to use queue feature set this true
template: '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>',
animation: {
open: { height: 'toggle' },
close: { height: 'toggle' },
easing: 'swing',
speed: 500 // opening & closing animation speed
},
timeout: false, // delay for closing event. Set false for sticky notifications
force: false, // adds notification to the beginning of queue when set to true
modal: false,
maxVisible: 5, // you can set max visible notification for dismissQueue true option,
killer: false, // for close all notifications before show
closeWith: ['click'], // ['click', 'button', 'hover']
callback: {
onShow: function () { },
afterShow: function () { },
onClose: function () { },
afterClose: function () { }
},
buttons: false // an array of buttons
};
var n = noty({ text: '<div class="activity-item"> <i class="fa fa-tasks text-warning"></i> <div class="activity"> You hit the Sign Up button <span>A few seconds ago</span> </div> </div>' });
});
});
</script>
</head>
<body>
@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "result" }))
{
<input type="submit" value="Sign Up" />
}
</body>
</html>
Controller / View 模型(您并不真正需要 View 模型)
public class MyViewModel
{
public string Foo { get; set; }
public string Bar { get; set; }
}
public class HomeController : Controller
{
[HttpPost]
public PartialViewResult IndexValid100(MyViewModel model)
{
return PartialView("_APartialViewWithJS");
}
public ActionResult IndexValid100()
{
return View(new MyViewModel());
}
关于javascript - Jquery Noty 插件与 MVC 5 Ajax BeginForm，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51424032/