ASP 更新面板打破了 jQuery 星级评分系统

Posted 2023-05-08

【中文标题】ASP 更新面板打破了 jQuery 星级评分系统

【英文标题】：ASP Update panel breaks jQuery star rating system

【发布时间】：2016-04-12 20:53:38

【问题描述】：

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

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

这里是sn-p的代码：

<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()，但这也没有解决问题（它实际上完全消除了评分的“分数”）：

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

【参考方案1】：

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

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

【参考方案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);
      )
    );
  
;

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

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