Wednesday, 30 December 2015

Validate Input & AllowHtml attribute .Net MVC

When you develop an app, sometimes your requirements could be you want to send HTML values (for example <h2>Hello World</h2>) from the view to the controller. Sometimes we use HTML Editors, to save some info into the database. By default ASP.NET MVC doesn't allow a user to submit the HTML content.

So let's see how to submit your form with HTML content.
  1. Open Visual Studio then select "New Project" then select "ASP.NET MVC 4 Application".

  1. Provide a project name then click "OK".
  2. Select "Internet Application" then click "OK"


  1. Create a New Model.

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

    namespace ValidateInputDemo.Models
    {
        public class ValidateModel
        {
            public string description { getset; }
        }
    }
  2. Add a new method to your Controller.

    HomeController.cs
    public ActionResult ValidateInput()
    {
        
    return View();
    }
    [
    HttpPost]public ActionResult  ValidateInput(string description)
    {
        
    ValidateModel validateInputModel = new ValidateModel();
        validateInputModel.description = description;
        
    return View(validateInputModel);
    }
    ValidateInput.cshtml
    @model ValidateInputDemo.Models.ValidateModel
    @{
           ViewBag.Title = "ValidateInput";
    }
    @using (@Html.BeginForm("ValidateInput","Home"FormMethod.Post, new { @id = "form1", @enctype ="multipart/form-data" }))
    {
        <label id="lblDescription">Description</label>
         @Html.TextAreaFor(m=>m.description, new {@id="txtDescription",@name="description" })
        <input type="submit" id="bttn_Submit" />
    }
You can see in the code above, there is a text area and a submit button, have a look in the browser. Press F5. 


You can see in the preceding screen, if you type something into the description and press Submit then  nothing happens.

Now check the following example. Add HTML content into text area.


Now press the "Submit" button.


You will get the error above. This error comes because this is the security from ASP.NET MVC. For applications, a user cannot send HTML values to the controller, but sometimes we want to send values to the controller.

For resolving this issue we have the ValidateInput(false) attribute.

Just put this into your controller and have a look.
[HttpPost]
[ValidateInput(false)]
public ActionResult  ValidateInput(string description)
{
   ValidateModel validateInputModel = new ValidateModel();
   validateInputModel.description = description;
   return View(validateInputModel);
}
Now press F5. After filling in the HTML attribute press the submit button, you will never get an error. So when you want to work with HTML attributes in your app text area or textboxes, don't forget to use validateinpute(false) in your ActionMethod.

Limitation of ValidateInput attribute
This attribute also has the issue since this allow the Html input for all the properties and that is unsafe. Since you have enable Html input for only one-two properties then how to do this. To allow Html input for a single property, you should use AllowHtml attribute.

AllowHtml Attribute
This is the best way to allow the submission of HTML for a particular property. This attribute will be added to the property of a model to bypass input validation for that property only. This explicit declaration is more secure than the ValidateInput attribute.

using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;

public class BlogModel
{
 [Required]
 [Display(Name = "Title")]
 public string Title { get; set; }

 [AllowHtml]
 [Required]
 [Display(Name = "Description")]
 public string Description{ get; set; }
}


Make sure, you have removed the ValidateInput attribute from Conroller or Action method. Now, the user can submit Html only for the Description property successfully.

1 comment:

Topics

ADFS (1) ADO .Net (1) Ajax (1) Angular (47) Angular Js (15) ASP .Net (14) Authentication (4) Azure (3) Breeze.js (1) C# (49) CD (1) CI (2) CloudComputing (2) Coding (8) CQRS (1) CSS (2) Design_Pattern (7) DevOps (4) DI (3) Dotnet (10) DotnetCore (19) Entity Framework (4) ExpressJS (4) Html (4) IIS (1) Javascript (17) Jquery (8) Lamda (3) Linq (10) microservice (4) Mongodb (1) MVC (46) NodeJS (8) React (10) SDLC (1) Sql Server (32) SSIS (3) SSO (1) TypeScript (3) UI (1) UnitTest (2) WCF (14) Web Api (16) Web Service (1) XMl (1)

Dotnet Guru Archives