如何在 asp.net 中使用 jQuery 在 Div 中加载 .aspx 页面？

Question

我有一个.aspx page，左侧有垂直Menus，包含div。和左侧的clicking 我想在div 右侧的div 中显示ExternalPage.aspx 的内容。我的主页中有loaded ExternalPage.aspx 的内容，这很好用。但是，当我点击search button 的ExternalPage.aspx 它Redirects 我到ExternalPage.aspx 然后它显示结果。

标记：

  <div id="divExternalPage">
  </div>

JQuery：

function LoadPage() {
   $.get('http://mywebsite/ExternalPage.aspx', function(data) {
       $('#divExternalPage').html(data);
   });
}

注意： 我不想使用 iframe。

如何防止 Redirectto ExternalPage.aspx 并在加载它的同一 div 中显示结果，即在 divExnternalPage 中？

Answer 1

我认为你应该尝试一些 ajax 调用：

$('#divExternalPage').on('click', 'input[type="submit"]', function(e){
   e.preventDefault();
   $.get('http://mywebsite/ExternalPage.aspx', function(data) {
     console.log(data); // this would show you the returned data.
   });
});

在浏览器的控制台中，您可以看到 ajax 请求返回的响应。

---

由于您的内容是动态的，因此您必须将事件委托给最近的静态父级，在您的情况下是 #divExternalPage，或者您可以直接将事件委托给 $(document) or $(document.body)。

Answer 2

更新！我正在 CodeProject.com 上更新以下代码。请搜索“将 ASPX 页面加载到另一个页面”。

我正在尝试做类似的事情：尝试将 ASPX 页面的内容加载到 HTML 页面中，并在提交内容时使用 ASPX 页面后面的代码。也许下面的代码可以帮助你。当心我只是 JQuery 的初学者！如果有人可以改进下面的代码...请做！

Demo.htm

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="Javascript/LiQuickBootstrapper.js"></script>

<div id="portalViewContent" class="portalViewContent">

</div>

<script type='text/javascript'>
$(document).ready(function () {
    loadPage('/Widget/PostCodeCheck.aspx', 'portalViewContent', 'contentWidget'); 
})
</script>

LiQuickBootstrapper.js

function submit_handler(formObj, widgetUri) {
    var submitObj = $(formObj).data('objClicked');
    var submitObjID = submitObj.attr('id');

    var formData = formObj.serialize()
        + '&'
        + encodeURI(submitObj.attr('id'))
        + '='
        + encodeURI(submitObj.attr('value'))
    ;

    $(formObj).fadeOut('2000');
    $(formObj).promise().done(function () {
        $.post(widgetUri, formData)
            .done(function (xData) {
                var newSubmitObj = $($.parseHTML(xData)).find("#" + submitObjID);
                var newForm = newSubmitObj.parents('form');
                formObj.html(newForm.html());
                $(formObj).fadeIn('2000');
            })
            .fail(function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                alert(thrownError);
            });
        });
    return false;
}

function loadPage(widgetUri, containerIDLocal, containerIDRemote) {
    var containerObjLocal = $('#' + containerIDLocal);
    $(containerObjLocal).fadeOut('2000');
    $(containerObjLocal).promise().done(function () {
        $.post(widgetUri)
                .done(function (xData) {
                    var externalHTML = $.parseHTML(xData);
                    var containerObjRemote = $(externalHTML).filter('#' + containerIDRemote);
                    containerObjLocal.html(containerObjRemote.html());
                    var forms = containerObjLocal.children('form');
                    $(forms).submit(function (event) {
                        event.preventDefault();
                        submit_handler($(event.currentTarget), widgetUri);
                    });
                    $(forms).click(function (event) {
                        $(this).data('objClicked', $(event.target));
                    });
                    $(forms).each(function () {
                        $(this).data('widgetUri', widgetUri);
                    });

                    __doPostBack = function (t, a) {
                        __myDoPostBack(t, a);
                    }
                    $(containerObjLocal).fadeIn('2000');
                })
                .fail(function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.status);
                    alert(thrownError);
                });
    });
}

function __myDoPostBack(eventTarget, eventArgument) {
    var submitObj = $("#" + eventTarget);
    var theForm = submitObj.parents('form:first');
    var submitObjID = submitObj.attr('id');
    var widgetUri = $(theForm[0]).data('widgetUri');

    $(theForm[0]).find(':hidden#__EVENTTARGET')[0].value = eventTarget;
    $(theForm[0]).find(':hidden#__EVENTARGUMENT')[0].value = eventArgument;

    var formData = theForm.serialize();

    $(theForm).fadeOut('2000');
    $(theForm).promise().done(function () {
        $.post(widgetUri, formData)
            .done(function (xData) {
                var newSubmitObj = $($.parseHTML(xData)).find("#" + submitObjID);
                var newForm = newSubmitObj.parents('form');
                theForm.html(newForm.html());
                $(theForm).fadeIn('2000');
            })
            .fail(function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                alert(thrownError);
            });
    });
    return false;
}

Answer 3

您可以使用 iframe 标签轻松绑定 .aspx 页面。它易于使用。

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  }
}

button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

<h2>Animated Accordion</h2>
<p>Click on the buttons to open the collapsible content.</p>

<button class="accordion">Section 1</button>
<div class="panel">
  <iframe id="myFrame" src="https://stackoverflow.com/questions/22778415/how-to-load-an-aspx-page-in-div-with-jquery-in-asp-net"></iframe>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <iframe id="myFrame" src="https://stackoverflow.com/questions/22778415/how-to-load-an-aspx-page-in-div-with-jquery-in-asp-net"></iframe>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
 <iframe id="myFrame" src="https://stackoverflow.com/questions/22778415/how-to-load-an-aspx-page-in-div-with-jquery-in-asp-net"></iframe>
</div>