0

jQuery確認ダイアログでWebメソッドを呼び出そうとしています。ダイアログは、UpdatePanel の GridView の削除ボタンがクリックされると呼び出されます。

ただし、ボタンをクリックすると、「無効なポストバックまたはコールバック引数です。」というエラーが表示されます。ここでいくつかの質問/回答を検索し、Render イベントをオーバーライドして UpdatePanel を登録しようとしました。

これが私のaspxページです：

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="DoPostBack._Default" %>

<asp:Content ID="conStyles" runat="server" ContentPlaceHolderID="cphStyles">
</asp:Content>
<asp:Content ID="conMain" runat="server" ContentPlaceHolderID="cphMain">
    <asp:UpdatePanel ID="upMovies" runat="server" UpdateMode="Conditional" onload="upMovies_Load">
        <ContentTemplate>
            <asp:GridView ID="gvItems" runat="server" CssClass="tbl-movies" AutoGenerateColumns="False">
                <Columns>
                    <asp:BoundField DataField="Title" HeaderText="Title" HeaderStyle-CssClass="col-title-header" ItemStyle-CssClass="col-title"/>
                    <asp:BoundField DataField="Director" HeaderText="Director" HeaderStyle-CssClass="col-director-header" ItemStyle-CssClass="col-director" />
                    <asp:BoundField DataField="Year" HeaderText="Year" HeaderStyle-CssClass="col-year-header" ItemStyle-CssClass="col-year" />
                    <asp:TemplateField ItemStyle-HorizontalAlign="Left" ItemStyle-CssClass="table-actions">
                        <ItemTemplate>
                            <asp:ImageButton ID="btnEdit" ImageUrl="Images/edit.png" runat="server"
                                Text="Edit" UseSubmitBehavior="False" />
                            <asp:ImageButton ID="btnDelete" ImageUrl="Images/delete.png" runat="server"
                                Text="Delete" UseSubmitBehavior="False" CssClass="btn-delete-movie" />
                            <asp:HiddenField ID="hfMovieId" runat="server" Value='<%# Eval("Id") %>' />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </ContentTemplate>
    </asp:UpdatePanel>
    <div id="confirmDelete" class="popup popup-confirm">
        <div class="popup-title">
            <h4>Delete Movie</h4>
        </div>
        <div class="popup-content">
            <div class="confirm-message">
            </div>
            <div class="buttons center">
                <input id="btnDeleteConfirm" type="button" value="OK" class="button btn-confirm" />
                <input id="btnDeleteCancel" type="button" value="Cancel" class="button btn-delete-cancel btn-close-popup" />
            </div>
        </div>
    </div>
</asp:Content>
<asp:Content ID="conScripts" runat="server" ContentPlaceHolderID="cphScripts">
    <script src="Scripts/site.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var btnDelete = $('.btn-delete-movie');
            btnDelete.on('click', function (e) {
                e.preventDefault();

                var row = $(this).closest('tr'),
                    title = row.find('.col-title').text(),
                    movieId = parseInt(row.find('input[type=hidden]').val());

                showConfirmPopUp('confirmDelete',
                    'Are you sure you want to delete the movie "' + title + '"?',
                    function () { deleteMovie(movieId); }, //call the DeleteMovie web method
                    function () { }); //do nothing else
            });
        });

        function deleteMovie(id) {
            $.ajax({
                type: 'POST',
                contentType: 'application/json',
                data: '{"id":' + id + '}',
                url: 'Default.aspx/DeleteMovie',
                dataType: 'json',
                success: function (data) {
                    __doPostBack('<%= upMovies.ClientID %>', '');
                    closePopUp('confirmDelete');
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    showError(jqXHR, textStatus, errorThrown);
                }
            });
        }
    </script>
</asp:Content>

分離コード:

public partial class _Default : System.Web.UI.Page
{
    #region Events
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            PopulateMovies();
        }
    }

    protected override void Render(HtmlTextWriter writer)
    {
        ClientScript.RegisterForEventValidation(upMovies.UniqueID);

        foreach (GridViewRow row in gvItems.Rows)
        {
            var btnDelete = row.FindControl("btnDelete");
            var btnEdit = row.FindControl("btnEdit");
            ClientScript.RegisterForEventValidation(btnDelete.UniqueID);
            ClientScript.RegisterForEventValidation(btnEdit.UniqueID);
        }

        base.Render(writer);
    }

    protected void upMovies_Load(object sender, EventArgs e)
    {
        PopulateMovies();
    }
    #endregion

    #region Private Methods
    private void PopulateMovies()
    {
        var data = from m in Movie.GetAll()
                   orderby m.Year descending, m.Title ascending
                   select m;

        gvItems.DataSource = data;
        gvItems.DataBind();
    }
    #endregion

    #region Web Methods
    [WebMethod]
    public static object DeleteMovie(int id)
    {
        Movie.Delete(id);
        return UpdateItems();
    }
    #endregion
}

ModalPopupExtender を使用したくないため、jQuery アプローチを使用しています。EnableEventValidation を false に設定したくありません。

また、削除ボタンをクリックすると upMovies_Load が呼び出されるのはなぜですか? 確認ダイアログのOKボタンがクリックされたときにのみ呼び出されるべきではありませんか?

私は一種の初心者です、助けていただければ幸いです。

ありがとうございました ：）

4

1 に答える 1

0

わかりました、JavaScript を再度バインドする必要があります。

Sys.WebForms.PageRequestManager.GetInstance().add_endRequest(function(){
    //$(document).ready() code here
});
于 2013-03-06T11:49:10.080 に答える