JQuery DIalog и репитер ASP.NET

Ответ 1

Решение не так просто. У вас должна быть возможность вызвать исходную функцию обратного вызова после нажатия кнопки "ОК" диалогового окна JQuery UI.

Сначала вам понадобится обобщенная функция js для отображения диалога:

function showConfirmRequest(callBackFunction, title, content) 
{
    $("#divConfirm").html(content).dialog({
        autoOpen: true,
        modal: true, 
        title: title,
        draggable: true,
        resizable: false,
        close: function(event, ui) { $(this).dialog("destroy"); },
        buttons: { 
            'Ok': function() { callBackFunction(); },
            'Cancel': function() {
                $(this).dialog("destroy");
            }
        },
        overlay: { 
            opacity: 0.45, 
            background: "black" 
        } 
    });
}

Я предположил наличие div как

<div id="divConfirm"></div>

В С# code-behind вам необходимо зарегистрировать предыдущую клиентскую функцию, передав исходный asp.net callbackFunction вашего элемента управления в качестве параметра (я обобщил):

protected void AddConfirmRequest(WebControl control, string title, string message) 
{
    string postBackReference = Page.ClientScript.GetPostBackEventReference(control, String.Empty);
    string function = String.Format("javascript:showConfirmRequest(function() {{ {0} }}, '{1}', '{2}'); return false;", 
                                     postBackReference,
                                     title,
                                     message);
    control.Attributes.Add("onclick", function);
}

С помощью метода GetPostBackEventReference у вас есть возможность получить функцию обратной передачи, которую asp.net назначает элементу управления.

Теперь, в Repeater ItemDataBound, извлеките элемент управления, который выполняет удаление, и передайте его этой функции:

<asp:Repeater ID="repeater" runat="server" OnItemDataBound="repeater_OnItemDataBound">
    ...
    <ItemTemplate>
        ...
        <asp:Button ID="btnDelete" runat="server" Text="Delete" />
        ...
    </ItemTemplate>
</asp:Repeater>

и код:

protected void repeater_OnItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        WebControl btnDelete = ((WebControl)e.Item.FindControl("btnDelete"));
        AddConfirmRequest(btnDelete, "Confirm delete", "Are you sure? Really???");
    }
}

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

Ответ 2

<asp:GridView ... CssClass="mygridview"></asp:GridView>

и

$('table.mygridview td a').whatever()

Это позволит вам одновременно работать со всеми кнопками ссылки.

Ответ 3

Вы можете сделать это следующим образом:

<asp:Repeater ID="Repeater1" runat="server">
    <ItemTemplate>
        ...
        <asp:LinkButton OnClick="DoSomething" OnClientClick="return ConfirmDelete();" ID="btnConfirm" runat="server" CssClass="button" Text="Delete"></asp:LinkButton><br /><br />
    </ItemTemplate>
</asp:Repeater>

<script>
    function ConfirmDelete() {
        return confirm("Delete this record?");
    }
</script>

или я думаю, вы могли бы сделать так:

<script>
    $(function() {
        $(".button").click(function() {
            return confirm("Delete this record?");
        });
    });
</script>

в методе ConfirmDelete, вы можете определить диалоговое окно подтверждения jQuery

Ответ 4

Hy,
Сначала вы должны использовать JQuery Dialog или другие диалоги Clienside, это более круто.

У вас должен быть элемент html на странице, чтобы вызвать всплывающее диалоговое окно JQuery.

<div class="Popup"></div>

<script>
    var confirm = false;
    function ConfirmDelete(doPostback) {
        $(".Popup").dialog(){ /* threat the dialog result , set confirm variable */ };
        if(confirm) {
           __doPostback(); }
        else return false;
    }
</script>

Со стороны, где я помещаю комментируемое предложение, вы можете поместить код для обработки результата диалога. Вы можете найти информацию по ссылке выше.

Функция возвращает false и из-за этого блокирует выполнение кода на стороне сервера (async postback).
Кнопка должна выглядеть так:

<asp:Repeater ID="Repeater1" runat="server">
                <ItemTemplate>
    <asp:LinkButton OnClientClick="ConirmDelete(<#%GetPostbackReference()%>)" CommandArgument = "<%# DataBinder.Eval(Container.DataItem, "Id") %>" OnClick="btnConfirm_Click" ID="btnConfirm" runat="server"></asp:LinkButton>
    </ItemTemplate>
</asp:Repeater>

В свойстве CommandArgument я устанавливаю идентификатор элемента, который привязан к повторителю.
Таким образом, в событии btnConfirm_Click у вас есть доступ к этому параметру

void btnConfirm_Click(object sender, CommandEventArgs e)
{
   e.CommandArgument -> you will find the id an you can execute the delete
}

У вас должен быть код:

protected string GetPostbackReference()
{    
return Page.ClientScript.GetPostBackEventReference(btnConfirm, null);
}

Эта функция вызывается при привязке элемента и возвращает текущий метод обратной передачи элементов управления, который будет выглядеть как __doPostback (source, param)

 Это javascript-метод, который вы могли бы упростить, и вы полностью контролируете обратную передачу. На клиентском столе вы можете решить, следует ли называть это событие обратной передачи.

PS: Если что-то неясное сообщение здесь, вопрос, и я обновлю ответ.

Ответ 5

<asp:Repeater ID="Repeater1" runat="server">
            <ItemTemplate>
...
                <asp:LinkButton OnClick="DoSomething" OnClientClick="return ConfirmDelete();" ID="btnConfirm" runat="server" CssClass="button" Text="Delete"></asp:LinkButton><br /><br />
            </ItemTemplate>
        </asp:Repeater>
<script>
        function ConfirmDelete() {
            return confirm("Delete this record?");
        }
</script>

Ответ 6

Вопрос определенно отвечает tanathos, но у меня есть другой вариант работы, который позволяет избежать написания кода в коде, если вы так склонны. Я просто скрыл кнопку удаления asp с помощью display: none и добавил кнопку удаления, которая вызывает диалог подтверждения, и нажимает кнопку скрытого удаления asp, если подтверждение подтверждено.

HTML в ретрансляторе:

<ItemTemplate>
...
<td>
    <a href="#" class="dummy-delete-button">Delete</a>
    <asp:Button ID="DeletePolicyButton" runat="server" OnCommand="OnDeleteCommand" CommandArgument="Argument" Text="Delete" CssClass="delete-button" />
</td>
...
</ItemTemplate>

CSS:

.delete-button 
{
    display: none;
}

javascript:

// make the dummy button look like a button
$("a.dummy-delete-button").button({
    icons: {
        primary: "ui-icon-trash"
    }
});

// create the dialog
var deleteDialog = $('<div>Are you sure you want to remove this policy?</div>')
    .dialog({
        autoOpen: false,
        modal: true,
        title: 'Delete Policy'
    });

// handle click event to dummy button
$("a.dummy-delete-button").click(function (e) {
    // don't follow the href of the dummy button
    e.preventDefault();
    // get a reference to the real ASP delete button
    var button = $(this).closest('td').find('.dummy-delete-button');
    deleteDialog.dialog({
        buttons: {
            // handle delete. Note: have to defer actual button click until after close
            // because we can't click the button while the modal dialog is open.
            "Delete": function () { deleteDialog.bind("dialogclose", function () { button.click() }); $(this).dialog("close"); },
            // handle close
            "Cancel": function () { $(this).dialog("close"); }
        }
    });

    deleteDialog.dialog("open");
});