updatel面板内的jQuery评级插件答案

【问题标题】：jQuery rating plugin inside updatel panelupdatel面板内的jQuery评级插件
【发布时间】：2011-01-06 11:52:40
【问题描述】：

我在 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”传递到服务器端，并调用一个方法来重新绑定列表视图并更新屏幕上的评分而不刷新屏幕。请建议如何去做。（我不能使用 ajax 工具包评级，因为它不支持半星评级）

【问题讨论】：

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

【解决方案1】：

要将数据传递给服务器，只需将其存储在隐藏的表单字段中（在更新面板中）：

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

【讨论】：

【解决方案2】：

通过使用带有 AJAX 的 jQuery 解决它。

aspx

函数 SaveRating(id, score) {
var params = '{linkID:"' + id + '",ratingVal:"' + score + '"}';
$.ajax({ 类型：“发布”， url: "page.aspx/UpdateRating", 数据：参数， contentType: "应用程序/json; charset=utf-8", 数据类型：“json” }); }

aspx.cs

[System.Web.Services.WebMethod] 公共静态无效更新评级（字符串链接ID，int ratingVal） { //更新到数据库的代码 }

【讨论】：