c# - jQueryダイアログウィジェットに更新削除を挿入

Question

jQueryDialogWIDGETを使用してSQLServerデータベースにデータを挿入したい。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");
            }
        });