updatel面板中的jQuery评级插件

时间:2011-01-06 11:52:41

标签: c# asp.net jquery asp.net-ajax updatepanel

我在asp:listview中使用了一个jQuery评级插件,在asp:update面板中。下面是点击评级星号时调用的函数。

function DisplayRatings() {            
            $('DIV.ratingBar').each(function() {
                var id = $(this).attr('id');
                var count = $(this).attr('rel');
                $('#' + id).raty({
                    showCancel: false,
                    readOnly: false,
                    showHalf: true,
                    start: count,
                    onClick: function(score) {                    
                      // I have to pass the score and ID to server side                    
                    }
                });
            });
        }

现在我必须将'得分'和'ID'传递给服务器端并调用一个方法来重新绑定列表视图并更新屏幕上的评级而不刷新屏幕。 请建议如何解决此问题。(我不能使用ajax工具包评级,因为它不支持半星评级)

2 个答案:

答案 0 :(得分:3)

要将数据传递到服务器,只需将其存储在隐藏的表单字段中(在UpdatePanel中):

<asp:HiddenField id="score" runat="server" name="Score" ClientIDMode="Static" />
<asp:HiddenField id="id" runat="server" name="Score" ClientIDMode="Static" />

如果你有很多数据来回传递,那么使用一个隐藏字段并使用序列化/反序列化将它存储在那里可能是有意义的。然后在onClick函数中,设置这些字段的值,并启动异步回发:

$('#score').val(score);
$('#id').val(id);
__doPostBack('UpdatePanelID', '') 

这将导致UpdatePanel的异步更新,就像用户点击绑定的提交控件一样。

请注意,如果jQuery控件本身位于UpdatePanel中,则必须在异步回发后重新配置它,因为效果就像页面已被重新加载一样。但是,在$(document).ready() 中运行的任何javascript代码在异步回发后都无法运行,因为整个页面实际上并未重新加载。

理想情况下,将评级控件保留在更新面板之外,因为您可能不希望它因发起的事件而发生更改。如果由于某种原因这是不可能的,或者您只需要动态的方式来配置它第一次可见,然后在页面刷新结束时添加一个钩子:

// Page startup script - this adds a hook after an update panel is refreshed
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(onRefresh);

function onRefresh(sender, args) {
    // You can try to check which panel was updated
    var panelsUpdated  = args.get_panelsUpdated();
    var panelsCreated = args.get_panelsCreated();
    // but usually it's easier to just track the state of your jquery stuff
    if (my_jquery_thing_is_visible &&
        my_indicator_that_it_has_already_been_configured===false) {
        configureJqueryThing();
    }
}

答案 1 :(得分:0)

使用jQuery和AJAX解决了这个问题。

ASPX

功能SaveRating(id,score){
            var params ='{linkID:“'+ id +'”,ratingVal:“'+ score +'”}';
            $就({                 类型:“POST”,                 url:“page.aspx / UpdateRating”,                 数据:params,                 contentType:“application / json; charset = utf-8”,                 dataType:“json”             });         }

aspx.cs

[System.Web.Services.WebMethod]         public static void UpdateRating(string linkID,int ratingVal)         { //更新为db的代码 }