Bootstrap 模态弹出窗口的按钮不调用动作控制器
[英]Bootstrap modal popup's button not invoking action controller
问题描述
我尝试在 boostrap 模式弹出窗口中加载局部视图页面和视图页面，还尝试使用 jquery ajax 在单击注册按钮（在局部视图或视图中）时调用动作控制器。
我在 asp.net MVC 中使用布局页面，并在主页上单击“开始使用”按钮上的按钮，我加载了一个带有注册页面的引导弹出模式，当我单击“注册”按钮时，它会在其中加载应该调用帐户控制器中的注册操作。 我没有错误，但它没有调用动作控制器。 _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>
索引.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">×</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>
_注册.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>
账户控制器.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
}
}
账户视图模型.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; }
}
}
2 个解决方案
解决方案1
0 2021-07-21 19:23:31
发生这种情况是因为@Url.Action("Register", "Account")实际上是在 Account Controller 中调用 Register ActionResult，它返回 Register View。
如果要使用注册任务，则需要包含该函数的参数。 为此，您需要提交表单。 尝试将注册按钮替换为：
<input type="submit" value="Register" class="btn btn-info" id="addressSearch" />
解决方案2
0 已采纳 2021-07-25 04:41:22
我已经解决了这个问题。 我在_Register.cshtml 的部分页面中嵌套了两个表单。 我已经删除了外部形式，这解决了问题。 我在下面的链接中遇到了同样的问题，这帮助我解决了这个问题。
在模式的按钮调用控制器上并重定向到操作
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.