替代

Question

我是jQuery和JavaScript的新手，我遇到了一个问题。

我在Gridview中从ButtonField打开jQuery UI对话框时遇到一些问题：

<asp:ButtonField ButtonType="link" Text="Modify Deadline" Visible="true" runat="server" CommandName="modifyDeadline" ControlStyle-CssClass="button" ItemStyle-CssClass="sliderPopupOpener"/>

首先我尝试给上面的一个类并将其命名为sliderPopupOpener，并在点击时打开jQuery Popup：

$(".sliderPopupOpener").click(function () {
  $("#sliderPopup").dialog("open");
});

然而，由于回发，这不起作用，除此之外，它也不适用于我的方法。因为我想在显示jQuery UI对话框之前从数据库中获取一些数据。所以我认为最好的方法是从Code Behind调用Dialog函数。

我该怎么做？

我尝试过这种方法，但它没有用，我不确定我做错了什么。

if (e.CommandName == "modifyDeadline")
{
     string sliderPopupFunction = @" <script type=""text/javascript""> 
                                        $(function () { 
                                            jQuery(function () {
                                                $(""#sliderPopup"").dialog(""open""); 
                                            }
                                         });
                                    </script>";
    ClientScript.RegisterStartupScript(typeof(Page), "key", sliderPopupFunction);
}

以上可能吗？如果是这样，我做错了什么？

编辑：

我注意到每个人都在解决这个问题，而不是通过从Code Behind调用jQuery函数来告诉我这是否可行。虽然我很欣赏其他解决方案，但如果我能通过后面的代码尽可能少地工作，我将不胜感激，因为我已经准备好了这一切。

Answer 1

您应该使用live（自jquery 1.7以来不推荐使用）或on尝试委派事件，而不是直接绑定click事件处理程序。

那样，你应该改变这个：

$(".sliderPopupOpener").click(function () {
    $("#sliderPopup").dialog("open");
});

这样的事情：

$(body).on("click", ".sliderPopupOpener", function(){
    $("#sliderPopup").dialog("open");
});

替代

如果代码隐藏方法更适合您，您应该尝试直接在脚本中调用该方法，即更改此内容：

string sliderPopupFunction = @" <script type=""text/javascript""> 
                                    $(function () { 
                                        jQuery(function () {
                                            $(""#sliderPopup"").dialog(""open""); 
                                        }
                                     });
                                </script>";

简单地说：

string sliderPopupFunction = @" <script type=""text/javascript""> 
                                    $(""#sliderPopup"").dialog(""open""); 
                                </script>";

此外，如果您的sliderPopup是服务器端控件，则应将#sliderPopup替换为ASP .NET生成的客户端ID（使用sliderPopup.ClientID）。

另一件需要考虑的事情是，如果您的sliderPopup位于更新面板内，您应该首先尝试重新初始化Jquery UI对话框，如下所示：

$("#sliderPopup").dialog().dialog("open");

Answer 2

我认为在这种情况下，最好使用普通的<input type="button/>按钮并使用ajax来执行对服务器的调用，然后将返回的数据附加到您的html并使用对话。 Ajax将在不回发整个页面的情况下执行您的代码。

编辑：这是我之前做过的一个例子

//declaring the web method annotation allows this method to be accessed by ajax calls
//scriptmethod tells this method to take the data that we're returning, and encode it as a json so we can use it in javascript
        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
        public static List<Person> getPeople() {
            List<Person> people = null;
            using (testDataEntities context = new testDataEntities()) {

                people = context.People.ToList();

            }
            return people;
        }

$（document）.ready（function（）{

        $("#getPeople").click(function () {

            $.ajax({
                type: "POST",
                data: {},
                url: "Default.aspx/getPeople", //getPeople is the name of the method
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                  var data = msg.d;
                  var $table = $("<table></table>");
                   $.each(data,function(){
                    $table.append("<tr><td>"+this.MyProperty+"</td></tr>")
                    });
                  $table.dialog();
                }
            });

        });
    });

Answer 3

只需将<asp:ButtonField替换为<asp:TemplateField写入您想要的内容：

<asp:TemplateField>
    <ItemTemplate>
        <input type="button" onclick='jsFunctionThatShowsTheDialog()'/>
    </ItemTemplate>
</asp:TemplateField>

从Code Behind打开jQuery UI对话框

3 个答案:

替代