在jQuery对话框小部件中插入更新删除

Question

我想使用jQuery对话框WIDGET在我的SQL Server数据库中插入数据。在jQuery小部件中，我有多个字段和一个提交按钮，如果用户按提交，记录将被输入到数据库中，对话框会自动关闭。 Reference Link的代码可以帮助很多，但我想将它插入到我的数据库中。请让我通过这个问题，我真的坚持了这从几天。我甚至不具有示例代码张贴在这里，但我已经做了，直到为：

function linkbtnTest(abc) { 
    $(abc).dialog({ 

     modal: true, 
     buttons: { "OK": function() { $(this).dialog("Close") } }, 
     open: function (type, data) { $(this).parent().appendTo("form") }, 

     height: 600, 
     width: 800 
    }); 
} 


<div id='<%# Eval("LCID") %>' style="display: none;"> 
          <table> 
           <tr> 
            <td> 
             <asp:Label ID="lblInvoiceNumber" runat="server" Text="Invoice Number"> 
             </asp:Label> 
            </td> 
            <td> 
             <asp:Label ID="lblInvoiceDate" runat="server" Text="Invoice Date"> 
             </asp:Label> 
            </td> 
            <td> 
             <asp:Label ID="lblBLNumber" runat="server" Text="B/L Number"> 
             </asp:Label> 
            </td> 
            <td> 
             <asp:Label ID="lblBLDate" runat="server" Text="B/L Date"> 
             </asp:Label> 
            </td> 
           </tr> 
           <tr> 
            <td> 
             <asp:TextBox ID="txtInvoiceNumber" runat="server"></asp:TextBox> 
            </td> 
            <td> 
             <asp:TextBox ID="txtInvoiceDate" runat="server"></asp:TextBox> 
            </td> 
            <td> 
             <asp:TextBox ID="txtBLNumber" runat="server"></asp:TextBox> 
            </td> 
            <td> 
             <asp:TextBox ID="txtBLDate" runat="server"></asp:TextBox> 
            </td> 
           </tr> 
           <tr> 
            <td> 
             <asp:Label ID="lblVesselName" runat="server" Text="Invoice Number"> 
             </asp:Label> 
            </td> 
            <td> 
             <asp:Label ID="lblVoyageNumber" runat="server" Text="Invoice Date"> 
             </asp:Label> 
            </td> 
            <td> 
             <asp:Label ID="lblDueDate" runat="server" Text="B/L Number"> 
             </asp:Label> 
            </td> 
            <td> 
             <asp:Label ID="lblShipmntSchedule" runat="server" Text="B/L Date"> 
             </asp:Label> 
            </td> 
           </tr> 
           <tr> 
            <td> 
             <asp:TextBox ID="txtVesselName" runat="server"></asp:TextBox> 
            </td> 
            <td> 
             <asp:TextBox ID="txtVoyageNumber" runat="server"></asp:TextBox> 
            </td> 
            <td> 
             <asp:TextBox ID="txtDueDate" runat="server"></asp:TextBox> 
            </td> 
            <td> 
             <asp:TextBox ID="txtShipmntSchedule" runat="server"></asp:TextBox> 
            </td> 
           </tr> 
          </table> 
         </div> 

Answer 1

看我如何使用Jquerymodel弹出插入简单的组名和父ID。

$("#create-group") 
     .button() 
     .click(function() { 
      $("#dialog-form").dialog("open"); 
     }); 

     $("#dialog-form").dialog({ 
      autoOpen: false, 
      height: 150, 
      width: 260, 
      modal: true, 
      buttons: { 
       "Add": function() { 

       //start validation 
        var bValid = true; 
        allFields.removeClass("ui-state-error"); 
        //add all ur validation here     
       //end validation 
        if (bValid) { 

         //var pid = $('#<%=hfInstrumentid.ClientID %>').val(); // gat the value from asp.net form 

         var grouppname = $("#name").val();//get the value from html form 
         var dlg = $(this); 


         $.ajax({ 
          async: false, 
          type: "POST", 
          url: "Config.asmx/AddGroup", //asp.net web method AddGroup(int parentid,string gpname) 
          data: JSON.stringify({ parentid: pid, gpname: grouppname }), 
          contentType: "application/json; charset=utf-8", 
          dataType: "json", 
          success: function (data) { 
           var models = data.d; 
           alert('data inserted...') 
           dlg.dialog("close"); 
          }, 
          complete: function (data) { }, 
          error: function (req, status, error) { alert(error.toString()) } 
         }) 
        } 
       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
       } 
      }, 
      close: function() { 
       allFields.val("").removeClass("ui-state-error"); 
      } 
     });