如何外部页/内容加载到一个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