如何外部頁/內容加載到一個DIV

Question

這裏是我的問題：

我已經做創建的操作的菜單/列表（如果與接受一個數據源，如列表視圖，甚至是控制由這將是更容易Gridview與模板化的列）。

這些操作都需要一個特定的表單來執行，而且我已經在分離的aspx頁面中創建了所有這些表單。

問題是：當我在列表中選擇任何操作而無需刷新頁面或使用iframe時，在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

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的id即可。

Peter