Post
Ask Question

Adding Radio Button Control in Web API

Introduction

In this article, I will show you how to add a RadioButton control in the Web API. We use the radio button in a group in which we select only one at a time. When the user uses the radio button then the user makes a choice among a set of absolute and related options. The user can select only one option from the radio buttons set. Radio Buttons are so called because they work like channels on a radio.

Now see an example of adding the radio button control in the Web API.

Step 1

Create a Web API application as in the following:

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

    r.jpg

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

    r1.jpg

  • Click the "OK" button.

Step 2

Select the "HomeController.cs" file and write some code. This file exists in:

  • In the "SolutionExplorer".
  • Select "Controller" -> "HomeController".

    r2.jpg

Add the following code in this file:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. namespace RadioAPI.Controllers  
  7. {  
  8.     public class HomeController : Controller  
  9.     {  
  10.         public ActionResult Index()  
  11.         {  
  12.             return View();  
  13.         }  
  14.         [AcceptVerbs(HttpVerbs.Post)]  
  15.         public string Display(FormCollection form)  
  16.         {  
  17.             string selectlanguage = form["language"];  
  18.             return "Selected Language: <b>" + selectlanguage + "</b>";  
  19.         }  
  20.     }  
  21. } 

Step 3

Add a View page "MVC 4  View Page (ASPX)" named "Index.aspx".

  • In the "Solution Explorer".

  • Right Click on the "Home" -> "Add" -> "New Item".

    r3.jpg

  • Select "Installed" -> "Visual C#" -> "Web" -> "MVC 4 View Page(ASPX)".

    r4.jpg

  • Click the "Add" button.

Add the following code in this view page:

  1. <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>  
  2.  <html>  
  3. <head id="Head1" runat="server">  
  4.     <title>Index</title>  
  5. </head>  
  6. <body>  
  7. <% using (Html.BeginForm("Display","Home",FormMethod.Post)) { %>  
  8.     <div><b>Choose any Language: </b><br />  
  9.        <br /> <%= Html.RadioButton("language", "C#") %> C#  
  10.         <br /><%= Html.RadioButton("language", "C++") %> C++  
  11.         <br /><%= Html.RadioButton("language", "C") %> C  
  12.         <br />  <%= Html.RadioButton("language", "Java") %> Java  
  13.         <br />  <%= Html.RadioButton("language", "HTML") %> HTML  
  14.         <br />  <%= Html.RadioButton("language", "Javascript") %> Javascript  
  15.         <br /><br />  
  16.         <input type="submit" value="Submit" />  
  17.     </div>  
  18.     <%} %>  
  19. </body>  
  20. </html> 

Step 4

Execute the application by pressing "F5". The output will be shown like this:

r5.jpg

Select any language and click on the submit button.

r7.jpg


Similar Articles