Question

我想在我的MVC 4应用程序中使用this star rating plugin。我有这样的评级表：

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

Answer 1

让我们假设一些事情：

您的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))，然后console.log(event);会告诉您，另外，如果您解雇Fiddler，您将看到丢失的内容以及返回的呼叫上的错误。

GIT上的项目示例

以下是此项目的源代码：https://github.com/balexandre/Stackoverflow-Question-14014091

如何在MVC 4应用程序中使用星级评级插件？

1 个答案: