Question

我在updatePanel添加了ListView。当页面首次加载时，它显示我的评级系统正常（这是我正在使用的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()，但这也没有解决问题（它实际上完全消除了评分的'得分'）：

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

Answer 1

在UpdatePanel POST的服务器端功能中，您可以注册一个将在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);
      })
    });
  }
};

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

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

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

2 个答案: