Insert Update Delete in jQuery dialog widget

Question

I want to insert a data in my SQL Server database using jQuery Dialog WIDGET. In jQuery widget, i have multiple fields and a submit button, if the user press Submit, The record will be entered into the database and dialog automatically gets closes. The code at Reference Link can help pretty much, but i want to insert it into my Database. Please get me through this issue, i`m really stuck into this from quite a few days. I don't even have sample code to Post here, but what i have done up-til is:

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

see how i use Jquerymodel popup to insert simple group name and its parent 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");
            }
        });