Question

我需要你的帮助））我有一个与sql数据库绑定的gridview。如何通过单击表格中的immage或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>

和我的gridview

<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，Qjerry等身份非常糟糕=）我将非常高兴你的帮助。我还是做了一些图片来更好地解释它=）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

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

1 个答案: