如何在www.example.com中使用jQuery在Div中加载.aspx页面asp.net?

64jmpszr  于 2022-12-29  发布在  jQuery
关注(0)|答案(3)|浏览(122)

我有一个.aspx page与垂直Menus在左边包含div。和clicking在左边我想显示ExternalPage.aspx的内容在div的右边div。我有loaded的内容在我的主页上ExternalPage.aspx这工作正常。但是,当我点击ExternalPage.aspxsearch button时,它Redirects我到ExternalPage.aspx,然后它显示结果。

加价:

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

JQuery:

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

**注意:**我不想使用iframe。
**如何防止RedirectExternalPage.aspx**并在加载的相同div(即divExnternalPage)中显示结果?

pkln4tw6

pkln4tw61#

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

0qx6xfy6

0qx6xfy62#

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

我也在尝试做类似的事情:尝试将一个ASPX页面的内容加载到一个HTML页面中,并在提交一些东西时使用ASPX页面的代码。也许下面的代码可以帮助你。注意,我只是一个JQuery初学者!如果有人可以改进下面的代码...请做!

演示.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>

快速 Bootstrap .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;
}
mwngjboj

mwngjboj3#

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

相关问题