Как загрузить страницу ASPX в диалоговое окно JQuery

Question

Я пытаюсь загрузить страницу ASPX в диалоговое окно, когда пользователь нажимает на элемент меню.«Домашняя» страница построена с использованием VS2010 и содержит главную страницу и страницу по умолчанию.Когда я нажимаю на пункт меню, открывается диалоговое окно, но оно полностью пустое.Если я удалю ссылку на код JS (переименовав опцию меню), на той же вкладке правильно откроется нужная страница.Страница назначения не использует ту же главную страницу, что и страница вызова, поэтому я не думаю, что у меня есть проблема с конфликтующими тегами и заполнителями.

Answer 1

Если вы используете jQueryUI Dialog , это кусок пирога:

$(document).ready(function() {
    $('#menu-item').click(function() {
        var mydiv = $('#mydiv');
        mydiv.dialog({ autoOpen: false });
        // Load the content using AJAX
        mydiv.load('mypage.aspx');
        // Open the dialog
        mydiv.dialog('open');

        return false;
    });
});

Надеюсь, это поможет.

Answer 2

В следующем коде показана страница aspx в модальном диалоговом окне JQuery, в которой передается значение записи (идентификатор студента хранится в HiddenField на стороне сервера)

Страница "Домой" aspx

<img alt="Previsiones" name="btnPrevisiones" id="btnButton" title="Dialog title"
src="imageFile.png" onclick="ShowStudentFullRecord(document.getElementById('<% =hiStudentId.ClientID%>').value)" />

JavaScript

function ShowStudentFullRecord(StudentId)
{
    var jsFileLocation = $('script[src*=yourJsFileName]').attr('src');
    jsFileLocation = jsFileLocation.replace('yourJsFileName.js', '');    
    $("#divStudentFullRecord")
        .load(jsFileLocation + "../SomeFolder/SomePage.aspx", {Id: StudentId })
        .dialog({
            autoOpen: false,
            show: "blind",
            hide: "explode",
            modal:true          
            });    
    $("#divStudentFullRecord").dialog( "open" );
    return false;        
}

Страница "Target" aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SomePage.aspx.cs" Inherits="SomePage" %>
  <label id="lblLabelId">
  <%= this.Something %></label>

Страница «Target» aspx.cs

protected string Something { get; set; }

protected void Page_Load(object sender, EventArgs e)
{
     if (!IsPostBack)
     {
         int studentId = Convert.ToInt32(Request.Form["Id"]);
         StudentFullRecord studentFullRecord = GetStudentFullRecord(studentId);
         this.Something = studentFullRecord.SomeImportantInformation; 
     }
}

А теперь что-то совершенно другое

Мне показалось эта статья чрезвычайно полезной. Он предлагает три подхода к загрузке содержимого aspx на страницу, динамически используя jquery. Также объясняется, как передавать параметры на новую страницу в качестве значений публикации.

Эта статья проясняет один важный факт:

Обратите внимание, что если вы встраиваете элементы управления ASP.NET в созданную вами страницу, не следует ожидать, что они будут вести себя как элементы управления ASP.NET после возвращения и встраивается как необработанный HTML. Базовая WebForm не имеет представления о новом содержимое добавлено на страницу, и поэтому обрабатывается любое вложенное содержимое формы только для необработанного HTML .

Итак ... вы хотите загрузить страницу aspx в диалоге пользовательского интерфейса JQuery

Совет 1 Ваш диалог будет похож на всплывающее окно с подробной информацией

Следуйте подходу, представленному в указанной статье под заголовком Содержимое страницы на основе ASPX . Очень простая aspx без серверных элементов управления, просто html для отображения вашего маленького всплывающего окна с информацией о клиенте. Чтобы отобразить эту страницу в диалоге JQuery, следуйте ответу Хайтема Тлили.

Совет 2 Совет 1 кажется вам излишним

Следуйте разделу статьи Обратный вызов на той же странице и генерируйте HTML , чтобы отобразить то, что вам нужно на той же странице

Совет 3 Это что-то вроде всплывающего окна подтверждения удаления

В этом случае вероятна кнопка удаления будет на повторителе или что-то подобное. В вашем скрипте JQuery при обращении к всплывающему триггеру или контейнеру я предлагаю вам:

• Используйте ярлык в качестве триггера с CSS, который делает его похожим на кнопку.
• Используйте панель в качестве контейнера.
• При обращении к этим двум в скрипте jquery сделайте это так: $("#<%= lblTrigger.ClientID %>").click(function(). С этим не будет никакого безумия из-за ретранслятора.

Совет 4 Вам просто нужна эта независимая страница aspx в этом диалоговом окне.

Вы можете поместить iFrame на страницу (html или aspx) и использовать $ .load, чтобы получить эту страницу. Вы должны понимать, что iFrame имеет некоторые проблемы , и вы должны использовать его, только если оно того стоит. Не используйте этот сценарий, если вы ожидаете существенной связи между исходной страницей и страницей, загруженной в iFrame.

Answer 3

Я думаю, что вы ищете модальное окно, которое показывает реальную страницу, верно?Если так, посмотрите на fancybox или colorbox . Они могут отображать широкий спектр контента, включая URL

.