AJAX тик и кросс контроль - PullRequest
Новая
       31

AJAX тик и кросс контроль

0 голосов
/ 23 мая 2011

Я хотел бы реализовать тик и кросс-контроль для ASP.NET, который действует как пара радиокнопок (или флажок), но более привлекательный для визуального оформления.Рядом друг с другом появятся блеклые галочки и кресты, и при щелчке они будут выделены.При нажатии на другую выбор изменяется.Мне нужно иметь возможность прочитать состояние выбора в коде на стороне сервера.

Это должно быть реализовано с помощью Javascript, потому что я хотел бы избежать ненужных обратных передач каждый раз, когда нажимается одно из изображений.

Сначала я думал об адаптации элемента управления Rating 'из набора инструментов AJAX Control Toolkit, но не мог понять, как это сделать.

Есть предложения, пожалуйста?Я не очень хорошо разбираюсь в AJAX, поэтому пример кода будет высоко оценен.

1 Ответ

1 голос
/ 23 мая 2011

Недавно я реализовал нечто очень похожее на веб-сайте. «Флажок» был стилизованным тегом <a>, который имел два стиля. active и in-active. У меня был какой-то jQuery, который обновлял, какой класс css использовался, когда пользователь нажимал на тег <a>. Также, когда пользователь щелкнул тэг, я обновил скрытое поле на странице значением, соответствующим выбранному значению. Затем, когда страница отправляется обратно, я могу подобрать значение скрытого поля.

Примером может быть: 

<a href="#" id="optionone" class="checkbox-option active"><span>value one</span></a>
<a href="#" id="optiontwo" class="checkbox-option in-active"><span>value one</span></a>
<asp:HiddenField id="hfSelectedOption" runat="server" />

<script type="text/javascript">
    $().ready(function(){
        $('.checkbox-option').click(function(){
           $('.checkbox-option').removeClass('active').removeClass('in-active').addClass('in-active');
           $(this).addClass('active');
           $('#<%=(hfSelectedOption.ClientID)).val($(this).attr("id"));
        });
    }); 
</script>
...