jQuery UI Dialog, открывающий частичное представление (.ascx) - PullRequest
Новая
       1

jQuery UI Dialog, открывающий частичное представление (.ascx)

1 голос
/ 18 августа 2011

Я немного запутался в том, как открыть частичное представление в окне диалога пользовательского интерфейса jquery. Я делал это с помощью простого диалога, но по разным причинам я решил пойти в другом направлении. Все учебные пособия в Интернете только открывают <div></div>, и это нормально, но мне нужно открыть весь файл ascx ... Кстати, я планирую иметь валидацию jquery и датчики выбора jquery внутри этого частичного представления.

Какие-нибудь примеры или учебники, которые вы, ребята, знаете?

Спасибо, Я могу предоставить часть моего примера кода, если вам это нужно.

ОБНОВЛЕНИЕ: более подробная информация плюс код Это действительно было бы частичным представлением MVC. Некоторый код того, что я пробовал ранее, следует за этим предложением ... 

    $(document).ready(function () {

    var $dialog = $('<div></div>')
    .load('<%:Html.ActionLink("edit", "EditTemplate", "PatientACO", new { Template = int.Parse(patId), popID = populationId}, new {@class = "tempDlg", title = "Edit Patient Info"})%>')
    .dialog({
        autoOpen: false,
        title: 'Edit Patient ACO information'
    });
    });

Это мой код jQuery ... 

    %><%:Html.ActionLink("edit", "EditTemplate", "PatientACO", new { Template = int.Parse(patId), popID = populationId}, new {@class = "tempDlg", title = "Edit Patient Info"})%><%

То есть EditTemplate - это имя представления (которое загружает частичное представление, если это запрос javascript, а регулярное представление, если нет)

Больше кода, чтобы помочь другим увидеть, что происходит 

    <script type="text/javascript">

$(function () {

    $('a.tempDlg').live("click", function(event) {loadDialog(this, event, '#edit-set');});
    $('a.AddPatDlg').live("click", function(event) {loadDialog(this, event, '#addPat');});
    $('a.AcoData').live("click", function(event) {loadDialog(this, event, '#addEncounter');});


}); /* end document.ready() */

function loadDialog(tag, event, target) {
    event.preventDefault();
    var $loading = $('<img src="<%=ResolveClientUrl("~/images/ajaxLoading.gif")%>" alt="loading" class="ui-loading-icon">');
    var $url = $(tag).attr('href');
    var $title = $(tag).attr('title');
    var $dialog = $('<div></div>');
    $dialog.empty();
    $dialog
        .append($loading)
        .load($url)
                .dialog({
                    autoOpen: false
                        , title: $title
                        , width: 950
            , modal: true
                        , minHeight: 200
            , show: 'fade'
            , hide: 'fade'
                });

    $dialog.dialog("option", "buttons", { "Cancel": function () {
        $(this).dialog("close"); $(this).empty();
    },
        "Submit": function () {
            var dlg = $(this);
            $.ajax({
                url: $url,
                type: 'POST',
                data: $("#target").serialize(),
                success: function (response) {
                    $(target).html(response);
                    dlg.dialog('close');
                    dlg.empty();
                    $("#ajaxResult").hide().html('Record saved').fadeIn(300, function () {
                        var e = this;
                        setTimeout(function () { $(e).fadeOut(400); }, 2500);
                    });
                },
                error: function (xhr) {
                    if (xhr.status == 400)
                        dlg.html(xhr.responseText, xhr.status);     /* display validation errors in edit dialog */
                    else
                        displayError(xhr.responseText, xhr.status); /* display other errors in separate dialog */

                }
            });
        }
    });     

    $dialog.dialog('open');
};

function displayError(message, status)
{
    var $dialog = $(message);
        $dialog
            .dialog({
            modal: true,
            title: status + ' Error',
            buttons: {
            Ok: function() {
                $(this).dialog( "close" );
            }
        }
    }); 
    return false;             
};
    // jQuery Ajax-Post only works in repeatable manner when link that opens SimpleDialog can be placed 
    // outside the PartialView. Otherwise, calls to SimpleDialog fail on second and subsequent clicks. 
    // Need to use full postback in this case.
    $("#btnSubmit").live('click', function (event) {
        event.preventDefault();
        var $target = $(this).attr("name");
        var $url = $("#target").attr("action");
        $.ajax({
            url: $url,
            type: 'POST',
            data: $("#target").serialize(),
            success: function (response) {
                $.simpleDialog.close();
                $($target).html(response);
                $("#ajaxResult").hide().html('Record saved.').fadeIn(300, function () {
                    var e = this;
                    setTimeout(function () { $(e).fadeOut(400); }, 2000);
                });
            },
            error: function (xhr, status) {
                $("#ajaxResult").html(xhr.responseText).show();
                $.simpleDialog.close();
            }
        });
    });

    jQuery(document).ready(function () {
        tableToGrid("#table1", { shrinkToFit: false, width: 1000 });
    });

1 Ответ

3 голосов
/ 19 августа 2011

Я всегда так делал.Это может быть немного скучно, но его легко читать и отлаживать ...

Просто создайте пустой div на своей странице и присвойте ему Id.

<div id="dialog"></div>

Затем в вашем JS вы можете сделать ajax-вызов для получения частичного представления ... 

$.ajax({
    url:'/controller/action/id',
    type:'GET',
    beforeSend: function(){
        //some loading indicator
    },
    success: function(data){
        $("#dialog").html(data);
        $("#dialog").dialog({define some options});
        $("#dialog").dialog("open");
    }
    error: function(data)
        //handle error
    }


});

Действие вашего контроллера может вернуть ваше частичное представление.Функция ajax извлечет данные, обновит страницу и затем откроет диалоговое окно.Вы можете сэкономить немного места, комбинируя некоторые из этих вызовов, но я пытался прояснить функциональность.

Одна проблема с вашим текущим кодом заключается в том, что вы создаете тег div с помощью jQuery, но я не вижу, где вы на самом деле записываете это в DOM (с append, appendTo и т. Д ...),

var $dialog = $('<div></div>')
...