How to Load an .aspx page in Div with jQuery in asp.net?

问题描述 投票：0回答：3

我有一个

.aspx page
，左边有垂直
Menus
，包含
div
。和左边的
clicking
我想在
ExternalPage.aspx
右侧的
div
中显示
div
的内容。我的主页上有 
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

How to Prevent this 

Redirect
to 
ExternalPage.aspx
 and show the results in the same 
div
where it has been loaded ie in 
divExnternalPage
?

jquery asp.net load external
3个回答
0
投票

我认为你应该尝试一些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)
.

0
投票

更新！我正在更新 CodeProject.com 上的以下代码。请搜索“Loading ASPX pages into another page”。

我正在尝试做类似的事情：尝试将 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;
}
0
投票

可以使用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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.