I am learning MVC and already working on a task that has become overwhelming, trying to figure out how to render a log in form from a partial view, inside a jQuery accordion tab, without submitting the entire page.

I am including an image of my page.

Your Order Tab this is the page I am working on

Complete Order Tab enter image description here

The first tab: "Your Order" contains on the right side a small log in form with a button that read "Sign In".

The fifth tab: "Complete Order" contains a button "Complete Order"

When I click the button on the first tab to Sign In, the code that executes is the code for Complete Order button, and that causes many errors, because all the information collected on subsequent tabs is not there as when Complete Order gets clicked.

I would like to ask for help, to figure out a way to separate the events of these buttons, and be able to do a log in without running code that is part of other event.

I am not sure how to approach to this, this is my first time working with this architecture.

If I could get help on how to execute the log in method, and just display a simple div displaying "success! that would help me a lot.

Index.cshtml (where the partial view gets rendered)

 @{Html.RenderAction("ShoppingCartLogin", "ShoppingCart");}

ShoppingCartController.cs

   public ActionResult ShoppingCartLogin(string returnUrl)
    {
        return View();
    }

    //
    // POST: /Login

    [HttpPost]
    [AllowAnonymous]
    public ActionResult ShoppingCartLogin(LoginModel model, string returnUrl)
    {
        if (ModelState.IsValid)
        {
            using (Entities db = new Entities())
            {
                var user = (from u in db.Users where u.Email == model.UserName && u.Password == model.Password && u.IsActive select u).FirstOrDefault();

                if (user == null)
                {
                    ModelState.AddModelError("", "The user name or password provided is incorrect.");
                    return View(model);
                }

                List<string> roles = new List<string>();
                if (user.IsAdmin)
                {
                    roles.Add("Admin");
                }
                if (user.IsOrdersAdmin)
                {
                    roles.Add("Orders");
                }
                if (user.IsStoreAdmin)
                {
                    roles.Add("Stores");
                }

                user.LastLoginDate = DateTime.Now;
                db.SaveChanges();

                FormsAuthentication.SetAuthCookie(user.ID.ToString(), model.RememberMe);
                var authTicket = new FormsAuthenticationTicket(
                    1,                              // version
                    user.ID.ToString(),             // user name
                    DateTime.Now,                   // created
                    DateTime.Now.AddMinutes(90),    // expires
                    model.RememberMe,               // persistent?
                    string.Join(",", roles)          // can be used to store roles
                    );

                string encryptedTicket = FormsAuthentication.Encrypt(authTicket);

                var authCookie = new HttpCookie(FormsAuthentication.FormsCookieName, encryptedTicket);
                HttpContext.Response.Cookies.Add(authCookie);

            }

            return RedirectToLocal(returnUrl);
        }

        // If we got this far, something failed, redisplay form
        ModelState.AddModelError("", "The user name or password provided is incorrect.");
        return View(model);
    }

Login Model

    public class LoginModel
{
    [Required]
    [Display(Name = "User name")]
    public string UserName { get; set; }

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


}

Partial View

<div class="YourOrder__inputEmail">
@Html.TextBoxFor(m => m.UserName, new { @class = "YourOrder_MainLoginEmail", placeholder = "Email Address" })

    <div>
    @Html.PasswordFor(m => m.Password, new { @class = "YourOrder_MainLoginPassword", placeholder = "Password" })
    </div>

Thank you much!

Related posts

Recent Viewed