ASP Update面板打破了jQuery星级系统

Question

我已经将updatePanel添加到ListView 。 页面首次加载时，它会很好地显示我的评分系统（这是我使用的krajee-star评分库 ）：

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

这是代码片段：

<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>

我有什么选择？ 我确实看过触发器 ，但是我认为它们仅适用于ASP控件。 理想情况下，我想保留updatePanel。

我也尝试使用pageLoad()但这也没有解决问题（实际上完全抹掉了“分数”作为评分）：

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后，我注意到在部分页面加载时，评级系统未呈现，而是显示了<input ...标记，这就是它如上所示显示它的原因。

我决定查看正确的星级评分标记，在那里我能够了解星级系统的工作原理并能够配置一些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);
      })
    });
  }
};

此方法仅在出现问题时才在部分负载下运行。 我遍历所有元素并获取未渲染的输入。 然后，我计算宽度，即要显示的“星形”量，然后插入正确的，准备输出的标记，替换未渲染的旧标记。

这解决了我的问题，不是很漂亮，但是解决了我的问题。