connectseekers.com

Friday, 18 August 2017

Get (fetch) RadioButtonList Checked/Selected Value In Asp.Net MVC Using JavaScript

8/18/2017 - By Pranav Singh 0

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.

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.





About the Author

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

0 comments:

Please let me know your view

Free Ebooks


About Us

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Contact Us

For writing article in this website please send request by your

GMAIL ID: dotnetpools@gmail.com
Email Id : contact@aspdotnet-pools.com

Bugs and Suggestions

As we all know that this website is for sharing knowledge and providing proper solution. So while reading the article is you find any bug or if you have any suggestion please mail us at contact@aspdotnet-pools.com.

Partners


Top jQuery Plugins

Global Classified : Connectseekers.com
© 2014 aspdotnet-pools.com Designed by Bloggertheme9.
back to top