Asp.Net Mvc Form Submission And Anti Forgery Tokens Complete Guide

Step 1: Setting Up Your ASP.NET MVC Project

1. Create a new project:

   • Open Visual Studio.
   • Go to File > New > Project.
   • Choose ASP.NET Web Application (.NET Framework).
   • Enter the project name and click OK.
   • Select MVC template and make sure Authentication is set to No Authentication.

2. Install necessary packages:

   • By default, ASP.NET MVC projects have most of what you need to work with forms and anti-forgery tokens included. However, if you need any additional packages, you can install them via NuGet Package Manager.

Step 2: Creating the Model

For this example, let's create a simple model for handling user data.

// Models/UserModel.cs
namespace MvcFormSubmission.Models
{
    public class UserModel
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Email { get; set; }
    }
}

Step 3: Creating the Controller

Next, we'll create a controller that will handle form submission.

// Controllers/UserController.cs
using System.Web.Mvc;
using MvcFormSubmission.Models;

namespace MvcFormSubmission.Controllers
{
    [ValidateAntiForgeryToken]
    public class UserController : Controller
    {
        // GET: /User/Register
        [HttpGet]
        public ActionResult Register()
        {
            return View();
        }

        // POST: /User/Register
        [HttpPost]
        public ActionResult Register(UserModel user)
        {
            if (ModelState.IsValid)
            {
                // Here you would typically save the user to the database
                ViewBag.Message = "Registration successful!";
                return View(user);
            }

            // If not valid, return the same view with validation messages
            ViewBag.Error = "Please correct the errors below.";
            return View(user);
        }
    }
}

Step 4: Creating the View

Now, let's create a view for user registration.

1. Right-click the Register action method:

   • Choose Add View....

2. Configure the view:

   • Set the view name to Register.
   • Select Strongly typed and choose UserModel as the model class.
   • Click Add.

Here's the code for the view:

<!-- Views/User/Register.cshtml -->
@model MvcFormSubmission.Models.UserModel
@{
    ViewBag.Title = "Register";
}

<h2>@ViewBag.Title</h2>

@if (!string.IsNullOrWhiteSpace(ViewBag.Message))
{
    <div style="color: green;">@ViewBag.Message</div>
}

@if (!string.IsNullOrWhiteSpace(ViewBag.Error))
{
    <div style="color: red;">@ViewBag.Error</div>
}

@using (Html.BeginForm("Register", "User", FormMethod.Post))
{
    @Html.AntiForgeryToken()

    <div>
        @Html.LabelFor(m => m.FirstName)
        @Html.TextBoxFor(m => m.FirstName, new { @class = "form-control" })
        @Html.ValidationMessageFor(m => m.FirstName)
    </div>

    <div>
        @Html.LabelFor(m => m.LastName)
        @Html.TextBoxFor(m => m.LastName, new { @class = "form-control" })
        @Html.ValidationMessageFor(m => m.LastName)
    </div>

    <div>
        @Html.LabelFor(m => m.Email)
        @Html.TextBoxFor(m => m.Email, new { @class = "form-control", type = "email"})
        @Html.ValidationMessageFor(m => m.Email)
    </div>

    <input type="submit" value="Register" class="btn btn-primary" />
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Step 5: Configuring Anti-Forgery Tokens

The anti-forgery token mechanism is already integrated into the example above with the use of @Html.AntiForgeryToken() helper method in the view and [ValidateAntiForgeryToken] attribute on the POST action method in the controller.

Let’s ensure that these mechanisms are configured properly.

Controller Configuration

Make sure your controller has the [ValidateAntiForgeryToken] attribute applied to the POST action method to verify the anti-forgery token:

// Controllers/UserController.cs
[ValidateAntiForgeryToken]
public ActionResult Register(UserModel user)
{
    if (ModelState.IsValid)
    {
        // Save the user to the database (not implemented here)
        ViewBag.Message = "Registration successful!";
        return View(user);
    }

    // If not valid, return the same view with validation messages
    ViewBag.Error = "Please correct the errors below.";
    return View(user);
}

View Configuration

Use the @Html.AntiForgeryToken() helper method to include an anti-forgery token in your form:

<!-- Views/User/Register.cshtml -->
@using(Html.BeginForm("Register", "User", FormMethod.Post)) 
{
    @Html.AntiForgeryToken()

    <div>
        @Html.LabelFor(m => m.FirstName)
        @Html.TextBoxFor(m => m.FirstName, new { @class = "form-control" })
        @Html.ValidationMessageFor(m => m.FirstName)
    </div>

    <div>
        @Html.LabelFor(m => m.LastName)
        @Html.TextBoxFor(m => m.LastName, new { @class = "form-control" })
        @Html.ValidationMessageFor(m => m.LastName)
    </div>

    <div>
        @Html.LabelFor(m => m.Email)
        @Html.TextBoxFor(m => m.Email, new { @class = "form-control", type = "email" })
        @Html.ValidationMessageFor(m => m.Email)
    </div>

    <input type="submit" value="Register" class="btn btn-primary" />
}

Step 6: Running the Project

Now it's time to test our application.

1. Run the application:

   • Press F5 or click Start in Visual Studio.

2. Navigate to the registration page:

   • The default route typically points to Home/Index. To navigate to the registration page, go to http://localhost:xxxx/User/Register, where xxxx is your port number.

3. Test the form submission:

   • Fill out the form and submit it.
   • Ensure that the form does not submit when the anti-forgery token is missing or invalid.

Additional Considerations

• Validation: The use of @Scripts.Render("~/bundles/jqueryval") ensures client-side validation based on the model data annotations (e.g., [Required]). You can add data annotations to your UserModel if needed.

• Global Configuration: Anti-forgery tokens are globally enabled by default in ASP.NET MVC projects. However, you can configure them explicitly in Web.config: