Как получить выбранное значение кнопки радио в Mvc

Question

Я пытаюсь создать простую рейтинговую систему в MVC только для обучения. Моя проблема в том, что я не могу получить выбранное значение переключателя, которое я пытаюсь передать его контроллеру. Любая помощь будет оценена.

Вот мой код:

@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> 
     } 

Контроллер

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

Answer 1

1. Без JQuery:

Вид:

@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> 
} 

Модель:

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

Действие сообщение:

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

ИЛИ 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> 

Answer 2

Как вы используете ajax и я могу увидеть тип кнопки submit, так что я думаю, форма получения представляются:

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

также изменить тип ajax на POST, так как ваш контроллер, похоже, имеет значения [HttpPost].