connectseekers.com

Thursday, 17 August 2017

Validate Or Select Radio Button List In Asp.Net MVC Using JavaScript

8/17/2017 - By Pranav Singh 0

This article will show you how you can validate or select radio button list in asp.net mvc using JavaScript. Validate weather any item is selected in radiobuttonlist or not if not the show error message using c#.net in mvc.

Have a look of the article which will show Binding Or Populating Radio Button List in Asp.Net MVC Using Model.

So for this article first we will create a new asp.net mvc application and add a mode class file and 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 controller class file and add the below code. This code will show how we can pass the data from model to the view.

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);
        }
    }
}

Now we will create the view and add the below code.

@model MVC_Demos.Models.RadioButtonLiatModel
@{
    ViewBag.Title = "Validate Or Select Radio Button List 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.Id" name="radiobutton" />@item.Value
}
<br />
<input type="button" value="Submit" onclick="javascript: return ValidateRadioButton();" />

In above code I have written a javascript function which will read the radio button list with the help of  name of the control and then start a loop to check the value as we find that radio button is check we break the loop and comes out and display the message as per the status.

Now lets check the output of the code.


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