This
article will show you can get or fetch radiobuttonlist checked/selected value
in asp.net mvc using javascript. In this I help you on getting selected radio
button value from a radio button list using c#.net in masp.net mvc.
Please have a look of the few of my previous articles: Validate Or Select Radio Button List In Asp.Net MVC Using JavaScript, Binding Or Populating Radio Button List in Asp.Net MVC Using Model.
Please have a look of the few of my previous articles: Validate Or Select Radio Button List In Asp.Net MVC Using JavaScript, Binding Or Populating Radio Button List in Asp.Net MVC Using Model.
Now for
this article first we will create a new asp.net mvc application and add a model
class file. After adding mode class file we will add 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 class file and write code to
add some value to the model which we will display on screen.
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 and add the below code into
it.
@model MVC_Demos.Models.RadioButtonLiatModel
@{
ViewBag.Title
= "Get (fetch) RadioButtonList
Checked/Selected Value In Asp.Net MVC Using JavaScript";
<script>
function ValidateAndGetRadioButtonValue()
{
var rbtDetail =
document.getElementsByName("radiobutton");
var value = "";
for (var i = 0; i <
rbtDetail.length; i++) {
if (rbtDetail[i].checked) {
value = rbtDetail[i].value;
break;
}
}
if (value != "") {
alert("You have selected :
" + value);
return true;
}
else {
alert("Error : Pleae
select attlease one 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 ValidateAndGetRadioButtonValue();" />
|
In above code have a look of the written javascript. In this
code I have get the array of radio button present on page by name and then
validated which one is selected. After that getting the selected value I have
store the value into the value variable and then on the bases of the value I have
displayed the value of radio button from radio button list.
One more thing we need to assign the model value to the
radiobutton to value attribute.
Now we have done. Run the application to check the output.
0 comments:
Please let me know your view