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

没有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]个帖子值。

如何在Mvc中获取选定的单选按钮值

2 个答案: