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);
}
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>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments