Post
Ask Question

Allowing HTML Element in Web API Form

Introduction

This article describes how to allow a HTML Element in a Web API form. Now see how to create the application.

Step 1

Create a Web API application

  • Start Visual Studio 2012.
  • From the start window select "Installed" -> "Visual C#" -> "Web".
  • Select "ASP.NET MVC4 Web Application" and click on the "OK" button.

    h.jpg

  • From the "MVC4 Project" window select "Web API".

    h1.jpg

  • Click on the "OK" button.

Step 2

Create the Model Class as in the following:

  • In the "Solution Explorer".
  • Right-click on the Model folder.
  • Select "Add" -> "Class".
  • Select "Installed" -> "Visual C#" and select "Class".

    h3.jpg

  • Click on the "Add" button. 

Add the following code:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. namespace HtmlAPI.Models  
  7. {  
  8.     public class ModelClass  
  9.     {  
  10.        [AllowHtml] public String Topic { get; set; }  
  11.        [AllowHtml] public String Doc { get; set; }  
  12.     }  
  13. } 

Step 3

In the HomeController write the following code:

  • In the "Solution Explorer".
  • Select "Controller" -> "HomeController".

    h2.jpg

Add the following code:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using HtmlAPI.Models;  
  7. namespace HtmlAPI.Controllers  
  8. {  
  9.     public class HomeController : Controller  
  10.     {  
  11.         [HttpGet]  
  12.         public ActionResult Index()  
  13.         {  
  14.             return View();  
  15.         }  
  16.         [HttpPost]  
  17.         public ActionResult GetData(ModelClass obj)  
  18.         {  
  19.             if (ModelState.IsValid)  
  20.             {  
  21.                 string Top = obj.Topic;  
  22.                 string Con = obj.Doc;  
  23.                 return Content("Topic =" + Top + "Doc= :-" + Con);  
  24.             }  
  25.             else  
  26.                 return Content("It is Invalide");  
  27.         }  
  28.     }  
  29. } 

Step 4

In the view add the following code:

  • In the "Solution Explorer".

  • Expand the "Views" folder.

  • Select "Home" -> "Index.cshtml".

    h4.jpg

Add the following code:

  1. @model HtmlAPI.Models.ModelClass   
  2. @{  
  3.     Layout = null;  
  4. }   
  5. <!DOCTYPE html>  
  6. <html>  
  7. <head>  
  8.     <title>Index</title>  
  9. </head>  
  10. <body>  
  11.     <div>  
  12.        @using (Html.BeginForm("GetData", "Home", FormMethod.Post))  
  13.        {  
  14.          @Html.LabelFor(p=>p.Topic,"Topic")  
  15.          @Html.TextBoxFor(p=> p.Topic)  
  16.          @Html.LabelFor(p=>p.Doc)  
  17.          @Html.TextBoxFor(p => p.Doc, "Doc");  
  18.          <input type="submit" name="Submit" value="submit" />  
  19.        }  
  20.     </div>  
  21. </body>  
  22. </html> 

Step 5

Execute the application:

h5.jpg

h6.jpg

h7.jpg


Similar Articles