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

时间:2012-10-08 10:39:41

标签: c# jquery asp.net

我想使用jQuery Dialog 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>

1 个答案:

答案 0 :(得分:2)

看看我如何使用Jquerymodel popup插入简单的组名及其父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");
            }
        });