1

我是 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 对话框之前从数据库中获取一些数据。所以我认为最好的方法是从代码后面调用 Dialog 函数。

我怎样才能做到这一点？

我尝试了这种方法，但没有奏效，我不确定我是否做错了什么。

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

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

编辑：

我注意到每个人都在给出解决这个问题的方法，而不是告诉我这是否可能仅通过从代码背后调用 jQuery 函数来实现。尽管我很欣赏其他解决方案，但如果我能以尽可能少的努力通过背后的代码使其工作，我将不胜感激，因为我已经以这种方式准备好了一切。

4

3 回答 3

1

与其直接绑定click事件处理程序，不如尝试使用live（自 jquery 1.7 起已弃用）或on.

这样，你应该改变这个：

$(".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是服务器端控件，则应将 替换为#sliderPopupASP .NET 生成的客户端 ID（使用sliderPopup.ClientID）。

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

$("#sliderPopup").dialog().dialog("open");
于 2013-03-18T01:46:34.197 回答
0

我认为在这种情况下，您最好使用普通的旧<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;
        }

$(文档).ready(函数 () {

        $("#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();
                }
            });

        });
    });
于 2013-03-18T01:35:46.497 回答
0

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

<asp:TemplateField>
    <ItemTemplate>
        <input type="button" onclick='jsFunctionThatShowsTheDialog()'/>
    </ItemTemplate>
</asp:TemplateField>
于 2013-03-18T01:42:08.423 回答