Asp.Net Mvc Secure Form Submissions Complete Guide

Step 1: Set Up an ASP.NET MVC Project

Let's start by creating a new ASP.NET MVC project. Follow these steps if you haven't already created one:

1. Open Visual Studio.
2. Click on Create a new project.
3. Search for ASP.NET Web Application and select it.
4. Click on Next.
5. Enter the project name (e.g., SecureFormDemo).
6. Click on Create.
7. In the Create a New ASP.NET Web Application (.NET Framework) window, select MVC and ensure No Authentication is selected. Click Create.

Step 2: Configure HTTPS

Using HTTPS is crucial to ensure that data transmitted between your client and server is encrypted and secure from interception.

1. Open launchSettings.json in the Properties folder.

2. Ensure you have HTTPS URLs configured. It should look something like this:

   "profiles": {
     "SecureFormDemo": {
       "commandName": "Project",
       "launchBrowser": true,
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       },
       "applicationUrl": "https://localhost:5001;http://localhost:5000"
     }
   }
   

3. Open Web.config and add the following configuration to redirect HTTP requests to HTTPS:

   <system.webServer>
     <rewrite>
       <rules>
         <rule name="HTTP to HTTPS redirect" stopProcessing="true">
           <match url="(.*)" />
           <conditions>
             <add input="{HTTPS}" pattern="off" ignoreCase="true" />
           </conditions>
           <action type="Redirect" url="https://{HTTP_HOST}/{R:1}" redirectType="Permanent" />
         </rule>
       </rules>
     </rewrite>
   </system.webServer>
   

Step 3: Create a Model

Let's create a simple model to represent form data.

1. Right-click on the Models folder and select Add > Class.

2. Name it ContactFormModel and add the following code:

   using System.ComponentModel.DataAnnotations;
   
   namespace SecureFormDemo.Models
   {
       public class ContactFormModel
       {
           [Required(ErrorMessage = "Name is required.")]
           [StringLength(50, ErrorMessage = "Name cannot exceed 50 characters.")]
           public string Name { get; set; }
   
           [Required(ErrorMessage = "Email is required.")]
           [EmailAddress(ErrorMessage = "Invalid email format.")]
           public string Email { get; set; }
   
           [Required(ErrorMessage = "Message is required.")]
           [StringLength(500, ErrorMessage = "Message cannot exceed 500 characters.")]
           public string Message { get; set; }
       }
   }
   

Step 4: Create a Controller

Now, let's create a controller to handle form submission.

1. Right-click on the Controllers folder and select Add > Controller.

2. Choose MVC 5 Controller - Empty and click Add.

3. Name the controller ContactController and add the following code:

   using System.Web.Mvc;
   using SecureFormDemo.Models;
   
   namespace SecureFormDemo.Controllers
   {
       public class ContactController : Controller
       {
           [HttpGet]
           public ActionResult Index()
           {
               return View();
           }
   
           [HttpPost]
           [ValidateAntiForgeryToken] // Prevents CSRF
           public ActionResult Index(ContactFormModel model)
           {
               if (ModelState.IsValid)
               {
                   // Here you can handle the valid model, e.g., save it to a database
                   ViewBag.Message = "Thank you for your message!";
                   return RedirectToAction("Success");
               }
   
               return View(model);
           }
   
           public ActionResult Success()
           {
               ViewBag.Message = "Your form has been submitted successfully.";
               return View();
           }
       }
   }
   

Step 5: Create Views

Now, let's create views for our controller actions.

1. Right-click on the Index action in the ContactController and select Add View.

2. Ensure the view name is Index, select Empty template, and check Create as a partial view is unchecked. Click Add.

3. Add the following HTML code to the Index.cshtml file:

   @model SecureFormDemo.Models.ContactFormModel
   
   <h2>Contact Us</h2>
   <form action="@Url.Action("Index", "Contact")" method="post">
       @Html.AntiForgeryToken()
       <div>
           <label>Name:</label>
           @Html.TextBoxFor(m => m.Name)
           @Html.ValidationMessageFor(m => m.Name)
       </div>
       <div>
           <label>Email:</label>
           @Html.TextBoxFor(m => m.Email)
           @Html.ValidationMessageFor(m => m.Email)
       </div>
       <div>
           <label>Message:</label>
           @Html.TextAreaFor(m => m.Message)
           @Html.ValidationMessageFor(m => m.Message)
       </div>
       <div>
           <button type="submit">Submit</button>
       </div>
   </form>
   
   @if (ViewBag.Message != null)
   {
       <div style="color: green;">@ViewBag.Message</div>
   }
   
   @section Scripts {
       @Scripts.Render("~/bundles/jqueryval")
   }
   

4. Repeat thesame process for the Success action and name the view Success.cshtml.

5. Add the following code to the Success.cshtml file:

   <h2>Success</h2>
   <p>@ViewBag.Message</p>
   <a href="@Url.Action("Index", "Contact")">Submit another message</a>
   

Step 6: Configure Bundles

Ensure that the jQuery Validation and Unobtrusive Validation scripts are included.

1. Open BundleConfig.cs in the App_Start folder.

2. Ensure you have the following script bundles:

   bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                 "~/Scripts/jquery.validate*"));
   

3. Ensure the bundle is included in your _Layout.cshtml or Index.cshtml:

   @Scripts.Render("~/bundles/jquery")
   @Scripts.Render("~/bundles/jqueryval")
   

Step 7: Test the Application

Run the application and navigate to the /Contact/Index URL. You should see the contact form. Test the form submissions to ensure that:

• Required fields are enforced.
• Email format is validated.
• CSRF protection is active (try submitting the form without a token).
• Success messages are displayed correctly.

Conclusion