Панель обновления ASP обновляется Система оценки звезд jQuery

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

после просмотра выводимого HTML, я заметил, что на частичной странице загрузки рейтинг-система не делает, но вместо того, чтобы это было с указанием <input ..., поэтому он отображал его, как показано выше.

я решил посмотреть на правильной, звезду рейтинг разметки, где я был в состоянии понять, как работает звезда система и был в состоянии настроить некоторый яваскрипт код для запуска:

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

Этого метод работает только при частичной нагрузке, которая возникает, когда возникает проблема. Я просматриваю все элементы и захватываю незагруженный вход. Затем я вычисляю ширину, которая представляет собой количество «звезды», чтобы показать, и затем вставляю правильно, готово к разметке разметки, заменяя старую одну незагруженную.

Это решило мою проблему, но не очень, но она решила мою проблему.

Answer 2

Внутри функции на стороне сервера, к которому UpdatePanel является POSTING вы можете зарегистрировать специальный скрипт, который будет выполняться после обратного вызова AJAX:

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