在 ASP.NET gridview 中打开一个 jQuery（模态窗体）对话框窗体

Question

我需要你的帮助））我有一个绑定到 SQL 数据库的 gridview。如何通过单击表格中的图像或 SQL ID 号打开弹出窗口？

脚本 v

<script>
  $(function () {
    var dialog, form,

    // From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29
    emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
    name = $("#name"),
    email = $("#email"),
    password = $("#password"),
    allFields = $([]).add(name).add(email).add(password),
    tips = $(".validateTips");

    function updateTips(t) {
      tips
      .text(t)
      .addClass("ui-state-highlight");
      setTimeout(function () {
        tips.removeClass("ui-state-highlight", 1500);
      }, 500);
    }

    function checkLength(o, n, min, max) {
      if (o.val().length > max || o.val().length < min) {
        o.addClass("ui-state-error");
        updateTips("Length of " + n + " must be between " +
        min + " and " + max + ".");
        return false;
      } else {
        return true;
      }
    }

    function checkRegexp(o, regexp, n) {
      if (!(regexp.test(o.val()))) {
        o.addClass("ui-state-error");
        updateTips(n);
        return false;
      } else {
        return true;
      }
    }

    function addUser() {
      var valid = true;
      allFields.removeClass("ui-state-error");

      valid = valid && checkLength(name, "username", 3, 16);
      valid = valid && checkLength(email, "email", 6, 80);
      valid = valid && checkLength(password, "password", 5, 16);

      valid = valid && checkRegexp(name, /^[a-z]([0-9a-z_\s])+$/i, "Username may consist of a-z, 0-9, underscores, spaces and must begin with a letter.");
      valid = valid && checkRegexp(email, emailRegex, "eg. ui@jquery.com");
      valid = valid && checkRegexp(password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9");

      if (valid) {
        $("#users tbody").append("<tr>" +
        "<td>" + name.val() + "</td>" +
        "<td>" + email.val() + "</td>" +
        "<td>" + password.val() + "</td>" +
      "</tr>");
        dialog.dialog("close");
      }
      return valid;
    }

    dialog = $("#dialog-form").dialog({
      autoOpen: false,
      height: 400,
      width: 350,
      modal: true,
      buttons: {
        "Create an account": addUser,
        Cancel: function () {
          dialog.dialog("close");
        }
      },
      close: function () {
        form[0].reset();
        allFields.removeClass("ui-state-error");
      }
    });

    form = dialog.find("form").on("submit", function (event) {
      event.preventDefault();
      addUser();
    });

    $("#create-user").button().on("click", function () {
      dialog.dialog("open");
    });
  });
</script>

这是我的网格视图：

<asp:GridView id="Objektkatalog" runat="server" OnClick = "Page_Changed" 
     AllowPaging="true" PageSize="4" DataSourceID="SqlDataSource2" 
     DataKeyNames="ObjektID" AutoGenerateColumns="false" 
     OnRowDataBound="GridView1_RowDataBound">   
    <columns>
        <asp:TemplateField>
            <ItemTemplate>
            Nr. <%#Eval("ObjektID")%>
            </ItemTemplate>               
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>   
                <asp:ImageButton ID="ImageButton1" runat="server" Height="55px" Width="55px" ImageUrl='<%# Eval("Picture","~/Objekte/{0}") %>'  />    //it comes to a second itemTemplate, dono why i cant add this in code section...
            </ItemTemplate>               
        </asp:TemplateField>
    </columns>
</asp:GridView>

好吧，如果我使用这个按钮

<button id="create-user">Create new user</button>

然后它工作正常，我打开我的 EditTmplate，我可以在其中更改我的 SQL 数据库中的所有数据，但我必须通过单击表的每个元素来执行相同的弹出操作；我知道它只需要几行或 1 个命令即可更改，但在 JS、jQuery 等中 id 非常糟糕。=）我会很高兴为您提供帮助。

我还是做了一些图片来更好地解释它=）http://ipic.su/img/img7/fs/dsadsadsada.1406036339.jpg

Answer 1

将打开弹窗的代码放在下面的函数中 -

$(document).on("click", "[id*=idViewPopup]", function () {

});

这里的 [id*=idViewPopup] 只是 GridView 中对象的 ID。因此，当我单击 ID = idViewPopup 的图像时，将显示模型弹出窗口。

查看以下链接以获取详细示例 - http://www.aspsnippets.com/Articles/Display-GridView-Row-details-inside-jQuery-Dialog-Modal-Popup-in-ASPNet.aspx