c# - 更新面板内的 jQuery 评级插件

Question

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

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”传递给服务器端并调用一个方法来重新绑定(bind) ListView 并更新屏幕上的评分而不刷新屏幕。请建议如何解决这个问题。(我不能使用 ajax 工具包评级，因为它不支持半星评级)

Answer 1

要将数据传递到服务器，只需将其存储在隐藏的表单字段中(在 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 异步更新，就像用户单击绑定(bind)的提交控件一样。

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

理想情况下，将评级控件放在更新面板之外，因为您可能不希望它因其启动的事件而发生更改。如果由于某种原因无法做到这一点，或者您只需要一种动态方式在它第一次可见时对其进行配置，那么在页面刷新结束时添加一个 Hook :

// 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();
    }
}