RadioButtonFor with change event

(ASP.NET MVC)


Hi,
In this article i am discussing about the RadioButtonFor control in asp.net mvc. I am getting currently selected radiobutton value and pass it to the controller on the click of a button using jquery.

View:-

@{
    ViewBag.Title = "rdowitNestedmodel";
}

@model ASP.NETMVCFORUMS.Models.VacationOffer




<h2>Course with radio button</h2>


<ul>
    @foreach(ASP.NETMVCFORUMS.Models.Course item in Model.Courses)
    {
    <li>
        @Html.RadioButtonFor(i => item.Name, item.Name, new {id=item.Name })
        @Html.LabelFor(i => item.Name,item.Name)
    </li>
    }
</ul>


<input type="button" id="btn_submit" value="Submit" />

<input type="hidden" id="hdnsubCategoryId" />

<script type="text/javascript">
    $(document).ready(function () {
        $('input[type=radio]').change(function () {
            $('#hdnsubCategoryId').val($(this).val());
          
        });

        $('#btn_submit').click(function () {

            $.ajax({
                url:'/Controls/rdowitNestedmodel/',
                type: 'POST',
                data:
                    {
                        courseName:  $('#hdnsubCategoryId').val()
                    }
            });
        });
    });
</script>


Controller and Model :-

   //example for radiobutton with nested model
 public ActionResult rdowitNestedmodel()
        {
            //populate viewmodel/model
            VacationOffer vo = new VacationOffer();
            vo.ID = 1;
            vo.Offername = "Summer";
            vo.Courses = bindCourses();


            return View(vo);
        }

        [HttpPost]
        public void rdowitNestedmodel(string  courseName)
        {
            string course = courseName;
        }


        private List<Course> bindCourses()
        {
            List<Course> lst = new List<Course>();

            lst.Add(new Course { Id = 1, Name = "Swimming" });
            lst.Add(new Course { Id = 2, Name = "BasketBall" });
            lst.Add(new Course{Id=3,Name="FootBall"});

            return lst;
        }
       
         public class Course
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
   
    public class VacationOffer
    {
        public int ID { get; set; }
        public string Offername { get; set; }
        public List<Course> Courses { get; set; }
    }



Image

Ratings


Average Rating: 0.00 by 0 users
Giri Prasad
7/1/2013
7/1/2013
Download PDF

Comments