FormsAuthentication with Razor not working

Question

I am trying to get FormsAuthentication to work with my Razor app (MVC 3). I have a LoginController that calls my LoginPage (which is in Views/Shared); my web.config has LoginUrl set to "/Login/". When the app tries to bring up the main page, the [Authorize] line brings up LoginPage correctly, but that's where the problems start.

Here's my LoginController.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace ABMCEditAndReports.Controllers
{
    public class LoginController : Controller
    {
        //
        // GET: /Login/

        public ActionResult Index()
        {
            return View("LoginPage");
        }

    }
}

Here's my LoginPage.cshtml:

@{
    ViewBag.Title = "Login Page";
    ViewBag.Header = "Login Page";
}

<script type="text/javascript">
    $.ajaxSetup({ cache: false });

    function onClickLogin() {       
        if (Membership.ValidateUser(txtUsername.Text, txtPassword.Text)) {
           FormsAuthentication.RedirectFromLoginPage(txtUsername.Text, false);
        }
        else {
           lblErrorMessage.Text = "This works better if you use YOUR user name and password";
        }
    }
</script>

<div style="text-align:center;">
<h2>Login Required</h2>
User Name:
<input type="text" name="txtUsername" />
<br />
Password:
<input type="password" name="txtPassword" />
<br />
<input type="button" id="btnLogin" value="Login" onclick="onClickLogin()" />
<br />
<label id="lblErrorMessage" style="color:Red"></label>
</div>

The first problem is, when I start the app, VS stops at the $.ajaxSetup line with "Microsoft JScript runtime error: '$' is undefined".

When I comment that out, the page shows up, but when I press the "Login" button, it stops at the Membership.ValidateUser line with "Microsoft JScript runtime error: 'Membership' is undefined".

Note that the $.ajaxSetup line works fine on all of my other view pages.

I have tried adding "@using System.Web.Security" to LoginPage.cshtml, and adding namespace System.Web.Security to web.config (both the main one and the one in /Views); nothing fixes it.

Am I going about this the right way? Should I be calling ValidateUser in a .cs file? If so, how do I call RedirectFromLoginPage? (And why isn't it accepting $.ajaxSetup?)

Answer 1

FormsAuthentication does work with ASP.NET MVC, but try authenticating on the server. Here's an example:

Controller:

namespace ABMCEditAndReports.Controllers
{
    public class LoginController : Controller
    {
        //
        // GET: /Login/

        public ActionResult Index(string returnUrl = null)
        {
            this.ViewBag.ReturnUrl = returnUrl;
            return View("LoginPage");
        }

        public ActionResult Index(LogInViewModel model, string returnUrl)
        {
            if (this.ModelState.IsValid && Membership.ValidateUser(model.UserName, model.Password))
            {
                FormsAuthentication.SetAuthCookie(model.UserName, false);
                return this.Redirect(returnUrl);
            }

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

Model:

namespace ABMCEditAndReports.Models
{
    public class LogInViewModel
    {
        [Display(Name = "User Name")]
        public string UserName { get; set; }

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

View:

@model ABMCEditAndReports.Models.LogInViewModel
@using (Html.BeginForm(new { ReturnUrl = ViewBag.ReturnUrl }))
{
    @Html.ValidationSummary()
    <h2>Please sign in</h2>
    <div>
      @Html.DisplayNameFor(model => model.UserName)
      @Html.EditorFor(model => model.UserName)
    </div>
    <div>
      @Html.DisplayNameFor(model => model.Password)
      @Html.EditorFor(model => model.Password)
    </div>
    <button type="submit">Sign in</button>
}