Question

我有一个Ajax开始表单，该表单将新用户订阅到我的网站新闻中。我希望潜在的订阅者在点击该注册按钮时得到一个不错的弹出通知。我发现jquery noty插件看起来不错，使用NPM安装了它，并在我的主视图中引用了所有js文件。我在app.js文件中编写了该脚本，但不确定现在如何将其与beginform和mvc连接，或者我是否以正确的方式进行连接。如果有人可以提供帮助，以下是所有代码：

因此，我想要使用该插件的弹出通知而不是控制器中的“返回内容”消息... /////// Model ////////

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

Answer 1

能否请您告诉我这篇文章是否对您有帮助？（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>

控制器/视图模型（您实际上并不需要视图模型）

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());

    }

带有MVC5 AjaxBeginForm的Jquery Noty插件

1 个答案: