ASP 更新面板中断 jQuery 星级评分系统

Question

我在 ListView 中添加了一个 updatePanel。当页面首次加载时，它显示我的评级系统很好（这是我正在使用的 krajee-star rating library）：

但是，当页面执行部分回发时，它会导致控件显示如下：

这是代码片段：

<asp:UpdatePanel runat="server">
    <ContentTemplate>
        <asp:ListView ID="ListView1" runat="server" ItemType="Country" SelectMethod="ListView1_GetData">
            <ItemTemplate>
             ...
            <input id="starRating" value="<%# Item.AverageRating %>" type="number" class="rating" min="0" max="5" step="0.5" readonly="true" data-size="xs">
             ...
        </ListView>
    </ContentTemplate>
</asp:UpdatePanel>

我有哪些选择？我确实看过 triggers，但我认为这些仅适用于 ASP 控件。理想情况下，我想保留 updatePanel。

我也尝试使用 pageLoad() 但这也没有解决问题（它实际上完全消除了 'score' 的评级）：

function pageLoad() {
  $(function () {
    $("div.star-rating").rating('create', { showClear: false, size: "xs", readonly: true });
  });
};

Answer 1

在 UpdatePanel 发布到的服务器端函数中，您可以注册一个将在 AJAX 回调之后执行的自定义脚本：

ScriptManager.RegisterStartupScript(
    this, 
    this.GetType(), 
    "wire_rating_control", 
    "$('div.star-rating').rating('create', { showClear: false, size: 'xs', readonly: true });", 
    true
);

Answer 2

查看输出的 HTML 后，我注意到在 partial-page 加载时 rating-system 没有渲染，而是显示 <input ... 标签，它显示它的原因如上所示。

我决定查看正确的 star-rating 标记，在那里我能够理解 star-system 的工作原理并且能够将一些 javascript 代码配置为运行:

function pageLoad(sender, args) {
  if (args.get_isPartialLoad())
  {
    $(function () {
      $('input[type="number"]').each(function () {
        var value = $(this).val();            
        var width = value * 20;
        var elem = "<div class='star-rating rating-xs rating-disabled'><div class='clear-rating' title='Clear'><i class='glyphicon glyphicon-minus-sign'></i></div><div class='rating-container rating-gly-star' data-content=''><div class='rating-stars' data-content='' style='width: " + width +"%;'></div><input id='starRating' value='" + value + "' type='number' class='rating form-control hide' min='0' max='5' step='0.5' readonly='true' data-size='xs'></div><div class='caption'><span class='label label-default'>" + value + " Stars</span></div></div>"
        $(this).replaceWith(elem);
      })
    });
  }
};

此方法只会运行在部分加载时出现问题。我遍历所有元素并获取未渲染的输入。然后我计算宽度，这是要显示的 'star' 的数量，然后我插入正确的、准备好输出的标记，替换旧的未渲染的标记。

这解决了我的问题，虽然不是很好，但它解决了我的问题。

ASP 更新面板中断 jQuery 星级评分系统

ASP Update panel breaks jQuery star rating system

javascript

asp.net

ajax

jquery

updatepanel