updatel 面板内的 jQuery 评级插件

发布于 2024-10-10 07:45:21 字数 793 浏览 0 评论 0原文

我在 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工具包评级，因为它不支持半星评级）

原文

I am using a jQuery rating plugin inside a asp:listview with in a asp:update panel. Below is the function which is being called on click of rating stars.

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

Now I have to pass the 'score' and 'ID' to server side and call a method which rebinds the listview and updates the rating on the screen without screen refresh.
Please suggest how to go about this.( I can't use ajax toolkit rating as it doesn't support half star rating)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

奢华的一滴泪 2024-10-17 07:45:21

要将数据传递到服务器，只需将其存储在隐藏表单字段中（在 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();
    }
}

To pass data to the server, just store it in hidden form fields (in the UpdatePanel):

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

If you had a lot of data to pass back and forth, probably it would make sense just to use one hidden field and use serialization/deserialization to store it all there. Then in your onClick function, set the values of those fields, and initiate an async postback:

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

This will cause an async update of your UpdatePanel, same as if a bound submit control was clicked by the user.

Note that if the jQuery control itself is in the UpdatePanel, you will have to reconfigure it after the async postback, since the effect is just as if the page had been reloaded as far as it is concerned. However, any javascript code which you may have run in $(document).ready() will not run after an async postback, since the whole page wasn't actually reloaded.

Ideally, keep the rating control outside the update panel, since you probably don't want it to change as a result of an event it initiated. If this isn't possible for some reason, or you just need a dynamic way to configure it the first time it is visible, then add a hook from the end of a page refresh:

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

回复收藏 0 原文

情何以堪。 2024-10-17 07:45:21

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

aspx

函数 SaveRating(id, 分数) {
var params = '{linkID:"' + id + '", ratingVal:"' + 分数 + '"}';
$.ajax({
类型：“帖子”，
url: "page.aspx/UpdateRating",
数据：参数，
contentType: "application/json; charset=utf-8",
数据类型：“json”
});
aspx.cs

]

[System.Web.Services.WebMethod
公共静态无效UpdateRating（字符串linkID，int ratingVal）
{
//更新数据库的代码
}