在 ASP.NET gridview 中打開一個 jQuery（模態表單）對話框表單

Question

我真的需要你的幫助)) 我有一個綁定到 SQL 數據庫的 gridview。 如何通過單擊表中的圖像或 SQL ID 號來打開彈出窗口？

腳本

<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