Как загрузить внешнюю страницу / контент в DIV

Question

Вот моя проблема:

Я действительно создаю меню / список действий (что было бы проще, если бы это было сделано с элементом управления, который принимает DataSource, такой как listview или даже Gridview с шаблонными столбцами).

Каждому из этих действий нужна конкретная форма, и я уже создал все эти формы на отдельных страницах aspx.

Вопрос в том, как лучше всего загрузить эти страницы / формы внутри элемента div, когда я выбираю какое-либо действие в списке, без обновления страницы или использования фреймов?

Answer 1

Используйте jQuery (как я понял, ваши действия - это ссылки на ваши формы):

$(document).ready(function() {
    $('a.yourActionClass').click(function(event) {
        event.preventDefault();
        var url = $(this).attr('href');
        $.get(url, function(response) {
            $('div#yourDivForForm').html(response);
        });
    });
});

или

$(document).ready(function() {
    $('a.yourActionClass').click(function(event) {
        event.preventDefault();
        var url = $(this).attr('href');
        $('div#yourDivForForm').load(url);
    });
});

ДОБАВЛЕНО:

Если вы возвращаете «полные» страницы ASPX с формами:

$(document).ready(function() {
    $('a.yourActionClass').click(function(event) {
        event.preventDefault();
        var url = $(this).attr('href');
        $.get(url, function(response) {
            var page = $(response);
            var form = $('form', page);
            $('div#yourDivForForm').prepend(form);
        });
    });
});

Answer 2

Это как раз то, для чего предназначен Ajax. Сначала создайте объект XMLHttpObject и используйте его для открытия URL

1003 *

var req;

    function loadXMLDoc(url) {
    // branch for native XMLHttpRequest object
    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
        req.onreadystatechange = processReqChange;
        req.open("GET", url);
        req.send(null);
        // branch for IE/Windows ActiveX version
    } else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
        if (req) {
            req.onreadystatechange = processReqChange;
            req.open("GET", url);
            req.send();
        }
    }

}

Ответ будет возвращен через обработчик события processReqChange.

function processReqChange() {
    // only if req shows "complete"
    if (req.readyState == 4) {
        // only if "OK"
        if (req.status == 200) {
            // process the result
            document.getElementById("mydiv").innerHTML = req.responseText;
        } else {
            alert("There was a problem retrieving the XML data:\n" + req.statusText);
        }
    }
}

Просто замените "mydiv" на идентификатор div, который вы хотите заполнить.

Peter