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

Question

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

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

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

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

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

ADDED:

Если вы возвращаете «полный «Страницы 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-адрес

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