How To get Selected Radio Button Value in Mvc

Question

I am trying to create a simple rating system in MVC just for learning. My problem is that I am not able to get the radio button selected value I am trying to pass it to the controller. Any help will be appreciated.

Here is my code:

@model WebApplication1.ViewModel.ViewModelRatingAndReviews
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#btn-gn").click(function () {
            var RatingStar = $("input[name=star]:checked").val()
            $.ajax({
                url: '@Url.Action("GiveReview", "ProvideReview")',
                type: 'GET',
                data: {"RatingStar": RatingStar },
                success: function (result) {
                    //alert("success");
                    console.log("click");
                },
                error: function (result) {
                    alert("error!");
                }
            });   //end ajax
        });
    });
</script>
@using (Html.BeginForm("GiveReview", "ProvideReview", FormMethod.Post, new { Id = "ratingsForm" }))
{
    @Html.AntiForgeryToken()
    <div class="wrapper">
        <div class="container">
            <div class="mid-content">
                @* Header Title Starts *@
                <div class="row">
                    <div class="col-md-12">
                        <div class="title-head">
                            <h3><span class="mid-content-head">Provide Ratings</span></h3>
                        </div>
                    </div>
                </div>
                @* Header Title Ends *@
            </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="l-search">
                            @* For UID *@
                            <div class="row">
                                <div class="col-md-3">
                                    <span class="profile-name">UserId</span>
                                </div>
                                <div class="col-md-3">
                                    @Html.TextBox("UserId")
                                </div>
                            </div><br />
                            @* UID Ends *@
                            <div class="row">
                                <div class="col-md-3">
                                    <span class="profile-name"> Select Your Ratings</span>
                                </div>
                                <div class="col-md-2">
                                    <div class="stars">
                                        <input type="radio" name="star" class="star-1" id="star-1" value="1"/>
                                        <label class="star-1" for="star-1">1</label>
                                        <input type="radio" name="star" class="star-2" id="star-2" value="2"/>
                                        <label class="star-2" for="star-2">2</label>
                                        <input type="radio" name="star" class="star-3" id="star-3" value="3"/>
                                        <label class="star-3" for="star-3">3</label>
                                        <input type="radio" name="star" class="star-4" id="star-4" value="4"/>
                                        <label class="star-4" for="star-4">4</label>
                                        <input type="radio" name="star" class="star-5" id="star-5" value="5"/>
                                        <label class="star-5" for="star-5">5</label>
                                        <span></span>
                                    </div>
                                </div>
                            </div><br />


                            @* For Consumer Name *@
                            <div class="row">
                                <div class="col-md-3">
                                    <span class="profile-name">Consumer Name</span>
                                </div>
                                <div class="col-md-3">
                                    @Html.TextBox("Consumername")
                                </div>
                            </div><br />
                            @* Consumer Name Ends *@

                            @* For Review Header *@
                            <div class="row">
                                <div class="col-md-3">
                                    <span class="profile-name">Enter Review Subject</span>
                                </div>
                                <div class="col-md-3">
                                    @Html.TextBox("Consumername")
                                </div>
                            </div><br />
                            @* Review Header Ends *@

                            @* For Review Header *@
                            <div class="row">
                                <div class="col-md-3">
                                    <span class="profile-name">Enter Review Content</span>
                                </div>
                                <div class="col-md-3">
                                    @Html.TextArea("ReviewContent")
                                </div>
                            </div><br />
                            @* Review Header Ends *@


                        </div>
                    </div>
                </div>
           @* Button Area Starts*@
            <div class="lender-search">
                <button type="submit" id="btn-gn">Submit</button>
                <button type="reset">Clear</button>
            </div>
            @* Button Area Ends *@
        </div>
        </div>
        }

Controller

public ActionResult GiveReview()
{
    ViewModelRatingAndReviews viewModelRatingAndReviews = new ViewModelRatingAndReviews();
    return View(viewModelRatingAndReviews);
}

[HttpPost]
public ActionResult GiveReview(int UserId, int RatingStar, string ConsumerName, string ReviewHeader, string ReviewContent)
{
    ViewModelRatingAndReviews viewModelRatingAndReviews = new ViewModelRatingAndReviews();
    viewModelRatingAndReviews.InsertRating(UserId, RatingStar, ConsumerName, ReviewHeader, ReviewContent);
    return View("SubmittedReview",viewModelRatingAndReviews);
}

`type: 'GET',` should be `POST`, Also why are you mixing form and ajax call — Satpal, Feb 11 '15 at 09:58
Do you mean in your ajax function? Its a GET and your passing a parameter but the method does not accept any parameters — , Feb 11 '15 at 09:59
Yeah it should be "post" but i am not able to pass those values to controller, any help — Miranda, Feb 11 '15 at 10:02
The First error is "The parameters dictionary contains a null entry for parameter 'RatingStar' of non-nullable type 'System.Int32' for method 'System.Web.Mvc.ActionResult GiveReview(Int32, Int32, System.String, System.String, System.String)' in 'WebApplication1.Controllers.ProvideReviewController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter. Parameter name: parameters" — Miranda, Feb 11 '15 at 10:29
visit this post: http://stackoverflow.com/questions/18052813/the-parameters-dictionary-contains-a-null-entry-for-parameter-id-of-non-nullab http://stackoverflow.com/questions/9532702/asp-net-mvc-route-parameter-exception — Ram Khumana, Feb 11 '15 at 10:52

Ram Khumana · Accepted Answer · 2015-02-11T11:40:27.853

Without jquery:

View:

@model Model.RatingAndReviews

@using (Html.BeginForm("GiveReview", "Home", FormMethod.Post, new { Id = "ratingsForm" }))
{
    @Html.AntiForgeryToken()
    <div class="wrapper">
        <div class="container">
            <div class="mid-content">
                @* Header Title Starts *@
                <div class="row">
                    <div class="col-md-12">
                        <div class="title-head">
                            <h3><span class="mid-content-head">Provide Ratings</span></h3>
                        </div>
                    </div>
                </div>
                @* Header Title Ends *@
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="l-search">
                        @* For UID *@
                        <div class="row">
                            <div class="col-md-3">
                                <span class="profile-name">UserId</span>
                            </div>
                            <div class="col-md-3">
                                @Html.TextBoxFor(m => m.UserId)
                            </div>
                        </div><br />
                        @* UID Ends *@
                        <div class="row">
                            <div class="col-md-3">
                                <span class="profile-name"> Select Your Ratings</span>
                            </div>
                            <div class="col-md-2">
                                <div class="stars">
                                    <input type="radio" name="RatingStar" class="star-1" id="star-1" value="1" />
                                    <label class="star-1" for="star-1">1</label>
                                    <input type="radio" name="RatingStar" class="star-2" id="star-2" value="2" />
                                    <label class="star-2" for="star-2">2</label>
                                    <input type="radio" name="RatingStar" class="star-3" id="star-3" value="3" />
                                    <label class="star-3" for="star-3">3</label>
                                    <input type="radio" name="RatingStar" class="star-4" id="star-4" value="4" />
                                    <label class="star-4" for="star-4">4</label>
                                    <input type="radio" name="RatingStar" class="star-5" id="star-5" value="5" />
                                    <label class="star-5" for="star-5">5</label>
                                    <span></span>
                                </div>
                            </div>
                        </div><br />


                        @* For Consumer Name *@
                        <div class="row">
                            <div class="col-md-3">
                                <span class="profile-name">Consumer Name</span>
                            </div>
                            <div class="col-md-3">
                                @Html.TextBoxFor(m => m.ConsumerName)
                            </div>
                        </div><br />
                        @* Consumer Name Ends *@

                        @* For Review Header *@
                        <div class="row">
                            <div class="col-md-3">
                                <span class="profile-name">Enter Review Subject</span>
                            </div>
                            <div class="col-md-3">
                                @Html.TextBoxFor(m => m.ReviewHeader)
                            </div>
                        </div><br />
                        @* Review Header Ends *@

                        @* For Review Header *@
                        <div class="row">
                            <div class="col-md-3">
                                <span class="profile-name">Enter Review Content</span>
                            </div>
                            <div class="col-md-3">
                                @Html.TextBoxFor(m => m.ReviewContent)
                            </div>
                        </div><br />
                        @* Review Header Ends *@


                    </div>
                </div>
            </div>
            @* Button Area Starts*@
            <div class="lender-search">
                <button type="submit" id="btn-gn">Submit</button>
                <button type="reset">Clear</button>
            </div>
            @* Button Area Ends *@
        </div>
    </div>
}

Model:

public class RatingAndReviews
    {
        public int UserId { get; set; }
        public int RatingStar { get; set; }
        public string ConsumerName { get; set; }
        public string ReviewHeader { get; set; }
        public string ReviewContent { get; set; }
    }

Action Post:

 [HttpPost]
        public ActionResult GiveReview(RatingAndReviews model)
        {
            model.InsertRating(model.UserId, model.RatingStar, model.ConsumerName, model.ReviewHeader, model.ReviewContent);
            return View("SubmittedReview", model);
        }

OR Jquery:

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#btn-gn").click(function () {
            var RatingStar = $("input[name=star]:checked").val() //Other fields values
            $.ajax({
                url: '@Url.Action("GiveReview", "Home")',
                type: 'POST',
                data: { "UserId": 1, "RatingStar": RatingStar, "ConsumerName": "ABC", "ReviewHeader": "ok", "ReviewContent": "wqsada" },
                success: function (result) {
                    //alert("success");
                    console.log("click");
                },
                error: function (result) {
                    alert("error!");
                }
            });   //end ajax
        });
    });
</script>

thankyou for your time but for ratingstar i am getting value 0 its not giving me the exact selected value of radiobutton — Miranda, Feb 11 '15 at 11:27
and one more error when i try to use jquery it showing me the error object reference not set to an instance of object, please help — Miranda, Feb 11 '15 at 11:51

Jai · Answer 2 · 2015-02-11T10:14:25.500

0

As you are using ajax and i can see the button type is submit so i guess form is getting submitted:

$("#btn-gn").click(function (e) { //<----pass e as an arg here
     e.preventDefault(); //<------try after adding this.

also change the type of ajax to POST as your controller seems to have [HttpPost] post values.

edited Feb 11 '15 at 10:14

answered Feb 11 '15 at 10:03

Jai

74,255
12
74
103

actually it is an integer value, how can i pass that integer value – Miranda Feb 11 '15 at 10:10
i actually don't work with .net techonologies but `"1" ` is different against `1`. i guess. – Jai Feb 11 '15 at 10:11
All form values are passed as string. It will automatically be parsed by the controller action. – Captain Kenpachi Feb 11 '15 at 10:18

How To get Selected Radio Button Value in Mvc

2 Answers2