让我们假设一些事情:
您的 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