0

我想 在我的 MVC 4 应用程序中使用这个星级插件。我有这样的评级表：

 public class Rating
    {
        public int FromUserId { get; set; }
        public int ToProductId { get; set; }
        public int RateValue { get; set; }
    }

我有这样的动作：

public ActionResult SubmitRating(int fromUserId, int toProductId , int rateValue )
   {
       return View();
   }

FromUserId是@WebSecurity.CurrentUserId和 ToProductId 是Model.Id

我有ajax的问题​​。我需要将 RateValue 发送到行动。如何将所选值发送到控制器中的SubmitRating操作并反转，从控制器发回答案以查看（显示所选值，向用户显示任何消息等）？

这不起作用。这里怎么写ajax代码？

$(function(){
    $('#star-rating').rating(function(vote, event){
        $.ajax({
            url: "@Url.Action("SubmitRating", "MyController")",
            type: "GET",
            data: {rateValue : vote},
        });
    });
});
4

1 回答 1

2

让我们假设一些事情：

您的 HTML 具有产品 ID：

<div id="star-rating" data-pid="@Model.Id">
    <input type="radio" name="example" class="rating" value="1" />
    <input type="radio" name="example" class="rating" value="2" />
    <input type="radio" name="example" class="rating" value="3" />
    <input type="radio" name="example" class="rating" value="4" />
    <input type="radio" name="example" class="rating" value="5" />
</div>

所以你可以有一个产品列表，而不是每页只有一个产品。

如果用户 ID 与当前登录的用户 ID 相同，则传递用户 ID 不是一种安全做法，您可以简单地从当前会话中获取用户 ID，因此我们将在我们的控制器中：

public class ServicesController : Controller
{
    public ActionResult RateProduct(int id, int rate)
    {
        int userId = WebSecurity.CurrentUserId;
        bool success = false;
        string error = "";

        try
        {
            success = db.RegisterProductVote(userId, id, rate);
        }
        catch (System.Exception ex)
        {
            // get last error
            if (ex.InnerException != null)
                while (ex.InnerException != null)
                    ex = ex.InnerException;

            error = ex.Message;
        }

        return Json(new { error = error, success = success }, JsonRequestBehavior.AllowGet);
    }
}

这样您就可以轻松地调用您的费率，例如：

<script>
    $(function () {

        $('#star-rating').rating(function (vote, event) {
            var anchor = $(event.currentTarget),
                pid = anchor.closest(".ratting-item").data("pid"),
                url = '@Url.Action("RateProduct", "Services")';

            // show a loading div that would have a animated gif
            $(".loading").show();

            $.ajax({
                url: url,
                type: "GET",
                data: { rate: vote, id: pid },
                success: function (data) {
                    if (data.success) {
                        // all went well, here you can say Thank you

                    }
                    else {
                        // There must be an Exception error, let's show it

                    }
                },
                error: function (err) {
                    // the call thrown an error
                },
                complete: function () {
                    $(".loading").hide();
                }
            });
        });

    });
</script>

更新

$(this)没有返回正确的元素，所以我们需要使用event调用传递的属性：

所以我们需要改成这样：

var anchor = $(event.currentTarget),
    pid = anchor.closest(".ratting-item").data("pid"),
    url = '@Url.Action("RateProduct", "Services")';

一个简单的console.log($(this))thenconsole.log(event);会告诉您，另外，如果您触发Fiddler，您将看到缺少的内容以及在返回的调用中看到错误。

GIT 上的项目示例

这是该项目的源代码： https ://github.com/balexandre/Stackoverflow-Question-14014091

于 2012-12-23T21:24:50.227 回答