This
article will show you how to check radio button list item selected or
checked in asp.net mvc using JavaScript.
In this we will show JavaScript alert if used select item.
Some of my previous articles are as follows: Validate Or Select Radio Button List In Asp.Net MVC Using JavaScript, Binding Or Populating Radio Button List in Asp.Net MVC Using Model, Get (fetch) RadioButtonList Checked/Selected Value In Asp.Net MVC Using JavaScript.
Some of my previous articles are as follows: Validate Or Select Radio Button List In Asp.Net MVC Using JavaScript, Binding Or Populating Radio Button List in Asp.Net MVC Using Model, Get (fetch) RadioButtonList Checked/Selected Value In Asp.Net MVC Using JavaScript.
So for this
article first we will create a new asp.net mvc application and add a mode class
file and add the below model class file and the below code.
using System;
using
System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MVC_Demos.Models
{
public class RadioButtonLiatModel
{
public List<RadioButtonData>
RadioButtonListData { get; set; }
}
public class RadioButtonData
{
public int Id { get; set; }
public string Value { get; set; }
}
}
|
After this
we will add a model controller class file and add the below code into it. This
we will use for passing and assigning the value to the model.
using MVC_Demos.Models;
using System;
using
System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace
MVC_Demos.Controllers
{
public class RadioButtonListController
: Controller
{
//
// GET: /RadioButtonList/
public ActionResult
Index()
{
RadioButtonLiatModel
_radiobuttonliatmodel = new RadioButtonLiatModel();
_radiobuttonliatmodel.RadioButtonListData = new List<RadioButtonData>();
_radiobuttonliatmodel.RadioButtonListData.Add(new RadioButtonData { Id
= 1, Value = "Item 1" });
_radiobuttonliatmodel.RadioButtonListData.Add(new RadioButtonData { Id
= 2, Value = "Item 2" });
_radiobuttonliatmodel.RadioButtonListData.Add(new RadioButtonData { Id
= 3, Value = "Item 3" });
_radiobuttonliatmodel.RadioButtonListData.Add(new RadioButtonData { Id
= 4, Value = "Item 4" });
return
View(_radiobuttonliatmodel);
}
}
}
|
After this
we will create a view file and add the below code into this view file.
<h2>RadioButton List</h2>
<br />
@foreach (var item in Model.RadioButtonListData)
{
<input type="radio" id="@item.Id" value="@item.Value" name="radiobutton" />@item.Value
}
<br />
<input type="button" value="Submit" onclick="javascript: return
ValidateRadioButton();" />
|
Now we will
create the javascript function into the view and add the below code.
function
ValidateRadioButton() {
var rbtDetail =
document.getElementsByName("radiobutton");
var isValid = false;
for (var i = 0; i <
rbtDetail.length; i++) {
if (rbtDetail[i].checked) {
isValid = true;
break;
}
}
if (isValid == true) {
alert("Thank You : You
have selected a radio button.");
return true;
}
else {
alert("Error : Pleae
select attlease oine option");
return false;
} }
|
In above code I have get all the radiobutton list then applied loop to check the which radio button is selected from the radiobutton list.
Now check
the completer code of the view.
@model MVC_Demos.Models.RadioButtonLiatModel
@{
ViewBag.Title
= "how to check radio button list
item selectioned or checked in asp.net
mvc using javascript";
<script>
function
ValidateRadioButton() {
var rbtDetail =
document.getElementsByName("radiobutton");
var isValid = false;
for (var i = 0; i <
rbtDetail.length; i++) {
if (rbtDetail[i].checked) {
isValid = true;
break;
}
}
if (isValid == true) {
alert("Thank You : You
have selected a radio button.");
return true;
}
else {
alert("Error : Pleae
select attlease oine option");
return false;
}
}
</script>
}
<h2>RadioButton List</h2>
<br />
@foreach (var item in Model.RadioButtonListData)
{
<input type="radio" id="@item.Id" value="@item.Value" name="radiobutton" />@item.Value
}
<br />
<input type="button" value="Submit" onclick="javascript: return
ValidateRadioButton();" />
|
Now we have
done run the application to check the output.
0 comments:
Please let me know your view