如何在asp.net中使用jQuery加載Div中的.aspx頁面？

Question

我有一個.aspx page與垂直Menus在左側包含div。和clicking在左側，我想在div右側的div中顯示ExternalPage.aspx的內容。我的loadedExternalPage.aspx的內容在我的主頁上工作正常。但是，當我點擊的ExternalPage.aspx它Redirects我到ExternalPage.aspx然後它顯示結果。

標記：

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

JQuery的：

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

注： 我不想使用iframe。

如何防止這種情況Redirect到ExternalPage.aspx，並顯示在它已經被加載中即在divExnternalPage相同div的結果？

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>