Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Разработка под ASP.NET > как сделать перерисовку DIV?

Автор: lankin 15.9.2008, 21:28

Суть вопроса в следующем: допустим есть 10 кнопок и по каждой открывается новая страница и там отображается какая-то информация.
Как мне сделать так, чтобы по нажатию кнопок элемент <div> перерисовывался на исходной странице, отображая нужную информацию?

Автор: Hades 15.9.2008, 22:02

что-то типа такого

Код


<asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px">
    <asp:Literal ID="Literal1" runat="server">Hello</asp:Literal>
</asp:Panel>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />

Код


protected void Button1_Click(object sender, EventArgs e)
{
    Literal1.Text += " World";
}

Автор: lankin 15.9.2008, 22:14

попробую. Я думал через JavaScript это делается.

Автор: Hades 15.9.2008, 22:19

lankin, можно и через JavaScript,
раздел про ASP.NET, в теме и сообщении о использовании JavaScript нет ни слова.

Автор: lankin 15.9.2008, 22:36

О, мое упущение, в следующий раз буду корректнее.
Тогда как это можно реализовать через JavaScript?

Автор: Hades 15.9.2008, 22:50

1-й вариант

Код


<div id="rfg"></div>
<input type="button" value="click" onclick="ff();" />

<script>
function ff() {
    var div = document.getElementById("rfg");    
    div.innerHTML = '<input type="button" value="Hello" />';
}
</script>

но многие говорят что использование innerHTML плохой тон

2-й вариант

Код


<div id="rfg"></div>
<input type="button" value="click" onclick="ff();" />

<script>
function ff() {
     var elem = document.createElement("input");
    elem.setAttribute("type", "button");
    elem.setAttribute("value", "Hello");
    var div = document.getElementById("rfg");    
    div.appendChild(elem);
}
</script>

3-й вариант
передать все возможные варианты дивов, но сделать их невидимыми,
а при клике на кнопку сделать видимым нужный див

Код


<div id="div1" style="display: none;">Hello</div>
<div id="div2" style="display: none;">World</div>
<br />
<input type="button" value="click_1" onclick="ff('div1');" />
<input type="button" value="click_2" onclick="ff('div2');" />

<script>
var visibleDivID = "div1";

function ff(elem) {
    document.getElementById(visibleDivID).style.display = "none";

    var div = document.getElementById(elem);
    div.style.display = "block";
    visibleDivID = elem;
}
</script>

Автор: lankin 15.9.2008, 23:43

Отлично. Спасибо огромное!

Автор: lankin 16.9.2008, 07:53

Hades, попробовал второй вариант, все получается, но только div не перерисовывается, а просто постоянно добавляет новое. Как его сначала очистить?

Автор: Mymik 16.9.2008, 11:18

Код


function clearContainer(node) {
    if (node&&node.hasChildNodes&&node.removeChild) {
        while (node.hasChildNodes()){
            node.removeChild(node.firstChild);
        }
    }
}

Вот код удаляющий все children элементы из родителя. Перед тем как вызываешь заполнение элемета, вызывай очистку элемента.

Добавлено через 1 минуту и 56 секунд
А вообще тебе лучше начать смотреть в сторону asp.net ajax... потому что выгружать на клиент сразу 10 страниц(табов) это не есть хороший тон. А когда у тебя еще появится логические ограничители (отображать один он в том случаи если в предыдущем выбран checkbox а в следующем не выбран) то выгрузка всех данных на страницу будет нарушением безопастности.

Автор: Kosten 17.9.2008, 08:30

если надо серверную логику использовать, то стоит посмотреть в сторону AJAX

Автор: lankin 17.9.2008, 10:12

Вот с AJAX я совсем не дружу. Прочитал здесь статьи по нему, кстати довольно доходчиво написанные. Но может кто книгу посоветует?

Автор: Idsa 17.9.2008, 10:46

Цитата(lankin @ 17.9.2008, 14:12

)

Но может кто книгу посоветует?

У Эспозито есть хорошая книга на этот счет... но она писалась до релиза MS Ajax, поэтому устарела (хотя полезной информации там очень много). Нужно брать книги про MS Ajax, который шел с ASP.NET 3.5. Из переведенных на память приходит только http://www.williamspublishing.com/Books/978-5-8459-1467-5.html книга. Но в руках ее не держал, поэтому сказать, насколько она хорошая, не могу (а в Pro серии издательства Apress ужасных книг предостаточно).

Автор: lankin 17.9.2008, 11:41

Все равно большое спасибо. Буду искать книгу.

Автор: Kosten 19.9.2008, 16:42

lankin, посмотри статьи на аспнетмании, там есть где все с самых азов разобрано с примерами. Сам с них начинал.

Автор: lankin 19.9.2008, 16:58

Обязательно посмотрю.

Автор: lankin 21.9.2008, 20:35

В общем пока решил как сделать:

Код


<div class=Button name=btn1 OnClick=\"ButtonClick("+GetCurrentContent(1)+")\">кнопка1</div>

в .cs есть такая функция, которая формирует то, что нужно передать в див.

Код


private string GetCurrentContent(int i)
{
//тут что то делаем
    return resultString;
}

Затем жаваскрипт просто делает следующее

Код


function ButtonClick(e)
{
    var div = document.getElementById("content");
    div.innerHTML=e;
}

В общем я формирую большую строку, в которой есть таблица и сам контент и передаю в качестве переменной скрипту, а он это просто обновляет в диве.
Но почему то не работает....скрипт не вызывается. smile

Автор: Hades 21.9.2008, 22:55

Код


<asp:Panel ID="btn1" runat="server" CssClass="Button">
    кнопка1
</asp:Panel>

Код


protected void Page_Load(object sender, EventArgs e)
{
    btn1.Attributes.Add("onclick", "ButtonClick("+GetCurrentContent(1)+")");
}