Bootstrap 模态弹出窗口的按钮未调用动作控制器

Question

我尝试在 boostrap 模式弹出窗口中加载部分视图页面和视图页面，还尝试使用 jquery ajax 在单击注册按钮时调用动作控制器（在 partialView 或查看).

我在 asp.net MVC 中使用布局页面，在主页上单击按钮“开始”，我加载了一个 bootstrap 弹出模式，其中包含注册页面和内部当我单击“注册”按钮时，它应该调用帐户控制器中的注册操作。我没有错误，但它没有调用动作控制器。 _LandingLayout.cshtml

            <!DOCTYPE html>

        <html>
        <head>
            <meta name="viewport" content="width=device-width" />
            <title>@ViewBag.Title</title>
        </head>
        <body>
            <div>
                @RenderBody()
                @RenderSection("Rscripts", required: false)

            </div>
        </body>
        </html>

Index.cshtml

        @{
            ViewBag.Title = "Index";
            Layout = "~/Areas/Landing/Views/Shared/_LandingLayout.cshtml";
        }

        <!DOCTYPE html>
        <html>
        <head>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>Bike Cloud</title>
            <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
            <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" rel="stylesheet" />
            <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css" />


            <link href="~/Areas/Landing/Content/Landing.css" type="text/css" rel="stylesheet" />


            @{
                ViewBag.Title = "Index";
            }

            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
            <script src="~/Scripts/jquery.validate.min.js"></script>
            <script src="~/Scripts/modernizr-2.8.3.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

            <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

           <script type="text/javascript" src="~/Areas/Landing/Scripts/Landing.js"></script>
         
        </head>

        <body>
            <!-- ============================================================== -->
            <!-- Preloader - style you can find in spinners.css -->
            <!-- ============================================================== -->
            <div class="preloader">
                <div class="lds-ripple">
                    <div class="lds-pos"></div>
                    <div class="lds-pos"></div>
                </div>
            </div>
            <div class="wrapper">
                <section class="hero">
                    <header>
                        <div class="container">
                            <nav class="navbar navbar-light navbar-toggleable-sm">
                                <a href="#" class="navbar-brand mb-0">Product-Cloud</a>

                                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#headerNav" aria-controls="headerNav" aria-expanded="false" aria-label="Toggle navigation">
                                    <span class="navbar-toggler-icon"></span>
                                </button>

                                <div id="headerNav" class="collapse navbar-collapse justify-content-end">
                                    <ul class="navbar-nav">
                                        <li class="nav-item">
                                            <a class="nav-link" href="#sec-about">About</a>
                                        </li>

                                        <li class="nav-item">
                                            <a class="nav-link" href="#sec-features">Features</a>
                                        </li>

                                        <li class="nav-item">
                                            <a class="nav-link" href="#sec-pricing">Pricing</a>
                                        </li>

                                        <li class="nav-item">
                                            <a class="nav-link" href="#sec-testimonials">Testimonials</a>
                                        </li>

                                        <li class="nav-item">
                                            <a class="nav-link" href="#sec-contact">Contact</a>
                                        </li>
                                    </ul>

                                    @*Html.RenderAction("action", "controller", new { area = "Area", model = ViewData.Model })..*@
                                    @*@Html.Partial("~/Views/Account/_LoginPartial.cshtml",null)*@
                                    @*@Html.Partial("_LoginPartial")*@

                                </div>
                            </nav>
                        </div>
                    </header>

                    <div class="jumbotron jumbotron-fluid mb-0">
                        <div class="container">
                            <div class="row justify-content-center text-center">
                                <div class="col-md-10 col-lg-6">
                                    <h1 class="display-5">The Best Sales Cloud Solution </h1>

                                    <p class="lead">All your data at your fingertips - making you take smart and precise decision about your business.</p>

                                    <p class="lead">

                                        <a href="#" class="btn btn-primary btn-lg" role="button" data-toggle="modal" data-target="#largeModal">Get Started</a>

                                    </p>
                                </div>
                            </div>
                            <!-- large modal -->

                            <div class="container mt-5 pt-5 modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
                                <div class="card mx-auto border-0">
                                    <div class="card-header border-bottom-0 bg-transparent">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>

                                        <ul class="nav nav-tabs justify-content-center pt-4" id="pills-tab" role="tablist">
                                            <li class="nav-item">
                                                <a class="nav-link active text-primary" id="pills-login-tab" data-toggle="pill" href="#pills-login" role="tab" aria-controls="pills-login"
                                                   aria-selected="true">Login</a>
                                            </li>

                                            <li class="nav-item">
                                                <a class="nav-link text-primary" id="pills-register-tab" data-toggle="pill" href="#pills-register" role="tab" aria-controls="pills-register"
                                                   aria-selected="false">Register</a>
                                            </li>

                                        </ul>

                                    </div>

                                    <div class="card-body pb-4">
                                        <div class="tab-content" id="pills-tabContent">

                                            <div class="tab-pane fade show active" id="pills-login" role="tabpanel" aria-labelledby="pills-login-tab">
                                                @Html.Partial("_Login")
                                                @*@RenderPage("~/Areas/Landing/Views/Account/Login.cshtml")*@
                                            </div>

                                            <div class="tab-pane fade" id="pills-register" role="tabpanel" aria-labelledby="pills-register-tab">

                                                @*@RenderPage("~/Areas/Landing/Views/Account/Register.cshtml")*@


                                                @Html.Partial("~/Areas/Landing/Views/Account/_Register.cshtml").


                                                @*@Html.Partial("_Register")*@

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

         
                <footer class="footer">
                    <div class="container">
                        <ul class="list-inline mb-0 text-center">
                            <li class="list-inline-item">
                                <a href=""><span class="fa fa-twitter"></span></a>
                            </li>

                            <li class="list-inline-item">
                                <a href=""><span class="fa fa-google-plus"></span></a>
                            </li>

                            <li class="list-inline-item">
                                <a href=""><span class="fa fa-instagram"></span></a>
                            </li>

                            <li class="list-inline-item">
                                <a href=""><span class="fa fa-envelope-o"></span></a>
                            </li>
                        </ul>
                    </div>

                </footer>
            </div>
            @*@RenderBody()*@

        </body>

        </html>

_Register.cshtml

        @using RepotingSystem.Areas.Landing.Models
    @model RegisterViewModel

    @{
        ViewBag.Title = "Register";

        Layout = null;
    }

    <!DOCTYPE html>

    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title></title>
        <script>

            $(document).ready(function () {

            function register()
                {

                    var jsondata = "{email: email , password:password}";
                    $.ajax({
                        url: '@Url.Action("Register", "Account")',

                        data: $('#createForm').serialize(),
                    type: 'post',
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            alert("Pass");
                        },
                        error: function (xhr, status) {
                    }

                    });
                        return false;

                };
            });

        </script>

    </head>
    <body>
        <form>

            @using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
            {
                @Html.AntiForgeryToken()
                <hr />
                @Html.ValidationSummary("", new { @class = "text-danger" })

                <div class="form-group">
                    <div class="col-md-10">
                        @Html.TextBoxFor(m => m.Email, new { @class = "form-control", id = "registerEmail", placeholder = "Email", required = "required", autofocus = "" })
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-10">
                        @Html.PasswordFor(m => m.Password, new { @class = "form-control", id = "registerPassword", placeholder = "Password", required = "required", autofocus = "" })
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-10">
                        @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control", id = "registerConfirmedPassword", placeholder = "Confirm Password", required = "required", autofocus = "" })
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">

                        <!--- THIS REDIRECTS TO BLANK REGISTER VIEW WHICH ISNT WHAT I WANT AND IT DOESN'T IMPLEMENTREGISTER ACTION ON ACCOUNTCONTROLLER -->
                        @*<button class="btn btn-info" type="button" id="addressSearch onclick="location.href='@Url.Action("Register", "Account")'" >Register</button>*@

                        <!----------------------------OR------------------------------------->
                        <!--- THIS BUTTON WAS THERE IN THE DEFAULT REGISTER VIEW REGISTER.CSHTML OF ASP.NET MVC PROJECT WITH DEFAULT AUTHENTICATION(NO POP UP IN MASTER PAGE) & THIS BUTTON CALLS REGISTER ACTION ON ACCOUNTCONTROLLER -->
                        @*<input type="submit" class="btn btn-default" value="Register" />*@

                        <input type="submit" value="Register" class="btn btn-default" id="btnRegister" onclick="register(); return false;" />

                    </div>
                </div>
            }

        </form>


    </body>
    </html>

AccountController.cs

        using System;
    using System.Globalization;
    using System.Linq;
    using System.Security.Claims;
    using System.Threading.Tasks;
    using System.Web;
    using System.Web.Mvc;
    using Microsoft.AspNet.Identity;
    using Microsoft.AspNet.Identity.EntityFramework;
    using Microsoft.AspNet.Identity.Owin;
    using Microsoft.Owin.Security;
    using ReportingSystem;
    using RepotingSystem.Areas.Landing.Models;
    namespace RepotingSystem.Areas.Landing
    {
        [Authorize]
        [RoutePrefix("Landing/Account")]
        public class AccountController : Controller
        {
            private ApplicationSignInManager _signInManager;
            private ApplicationUserManager _userManager;


            public AccountController()
            {
            }

            public AccountController(ApplicationUserManager userManager, ApplicationSignInManager signInManager)
            {
                UserManager = userManager;
                SignInManager = signInManager;
            }

            public ApplicationSignInManager SignInManager
            {
                get
                {
                    return _signInManager ?? HttpContext.GetOwinContext().Get<ApplicationSignInManager>();
                }
                private set
                {
                    _signInManager = value;
                }
            }

            public ApplicationUserManager UserManager
            {
                get
                {
                    return _userManager ?? HttpContext.GetOwinContext().GetUserManager<ApplicationUserManager>();
                }
                private set
                {
                    _userManager = value;
                }
            }


            // GET: /Account/Register
            [HttpGet]
            [AllowAnonymous]
            public ActionResult Register()
            {
                //return View();
                return PartialView("_Register");

            }

            //
            // POST: /Account/Register
            [HttpPost]
            [AllowAnonymous]
            [ValidateAntiForgeryToken]
            public async Task<ActionResult> Register(RegisterViewModel model)
            {
                if (ModelState.IsValid)
                {
                    //RegisterViewModel rModel = model.RegisterViewModel;
                    var user = new ApplicationUser { UserName = model.Email, Email = model.Email };
                    var result = await UserManager.CreateAsync(user, model.Password);
                    if (result.Succeeded)
                    {
                        await SignInManager.SignInAsync(user, isPersistent: false, rememberBrowser: false);

                        // For more information on how to enable account confirmation and password reset please visit https://go.microsoft.com/fwlink/?LinkID=320771
                        //Send an email with this link
                        string code = await UserManager.GenerateEmailConfirmationTokenAsync(user.Id);
                        var callbackUrl = Url.Action("ConfirmEmail", "Account", new { userId = user.Id, code = code }, protocol: Request.Url.Scheme);
                        await UserManager.SendEmailAsync(user.Id, "Confirm your account", "Please confirm your account by clicking <a href=\"" + callbackUrl + "\">here</a>");

                        RedirectToAction("Index", "Home", null);
                        ///return RedirectToAction("Index", "Home", new { area = "Landing" });
                        //return RedirectToAction("Index","Home", new { id = UrlParameter.Optional, Area = "Landing" }, 
                        //    new[] { "ReportingSystem.Areas.Landing.Controllers" });

                    }
                    AddErrors(result);
                }

                // If we got this far, something failed, redisplay form
                // return View(model);
                return PartialView("_Register", model);

            }

        }
    #endregion
    }
    }

AccountViewModel.cs

        using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;
    using RepotingSystem.Areas.Landing.Models;
    namespace RepotingSystem.Areas.Landing.Models
    {
 
        public class LoginViewModel
        {
            [Required]
            [Display(Name = "Email")]
            [EmailAddress]
            public string Email { get; set; }

            [Required]
            [DataType(DataType.Password)]
            [Display(Name = "Password")]
            public string Password { get; set; }

            [Display(Name = "Remember me?")]
            public bool RememberMe { get; set; }
        }

        public class RegisterViewModel
        {
            [Required]
            [EmailAddress]
            [Display(Name = "Email")]
            public string Email { get; set; }

            [Required]
            [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
            [DataType(DataType.Password)]
            [Display(Name = "Password")]
            public string Password { get; set; }

            [DataType(DataType.Password)]
            [Display(Name = "Confirm password")]
            [Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
            public string ConfirmPassword { get; set; }
        }

       }

Answer 1

发生这种情况是因为 @Url.Action("Register", "Account") 从字面上调用帐户控制器中的注册 ActionResult，returns 注册视图。

如果您想使用注册任务，您需要包含该功能的参数。为此，您需要提交表格。尝试将注册按钮替换为：

<input type="submit" value="Register" class="btn btn-info" id="addressSearch" />

Answer 2

我已经解决了这个问题。我在 _Register.cshtml 的部分页面中嵌套了两个表单。我已经删除了外部形式，这解决了问题。我在下面的 link 中遇到了同样的问题，这帮助我解决了这个问题。

Somewhat similar issue here - resolved by one form from nested forms

Bootstrap 模态弹出窗口的按钮未调用动作控制器

Bootstrap modal popup's button not invoking action controller

asp.net

asp.net-mvc

jquery

asp.net-mvc-4