skip to Main Content

I have tried loading both partial view page and View page in boostrap modal pop up & also tried using jquery ajax to invoke action controller on the click of the Register button(in partialView or View).

I’m using a layout page in asp.net MVC and in the home page on the button click of button "Get Started", I load a bootstrap popup modal with Register Page & inside that when I click the "Register" button, it should invoked the register action in the account controller. I have no error but its not invoking the action controller.
_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; }
        }

       }

2

Answers


  1. Chosen as BEST ANSWER

    I have resolved this issue. I had nested two forms in partial page of _Register.cshtml. I've removed the outer form and this resolved the issue. I've come across the same issue in the link below and this helped me resolved the issue.

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


  2. This is happening because @Url.Action("Register", "Account") is literally calling the Register ActionResult in the Account Controller, which returns the Register View.

    If you want to use the Register Task, you need to include the parameter for that function. To do that, you need to submit the form. Try replacing the Register button with:

    <input type="submit" value="Register" class="btn btn-info" id="addressSearch" />
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search