Question

这是我的问题：

我已经创建了一个菜单/动作列表（如果使用接受数据源的控件（如listview或甚至带有模板化列的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。

彼得

如何将外部页面/内容加载到DIV中

2 个答案: