Insert Modal popup data into Database table using jQuery in ASP.Net

Last Reply on Jun 05, 2017 09:00 AM By dharmendr

Posted on May 23, 2017 04:20 AM

The link below selects data using jquery then display it by button click on modal, but i want to
include a textbox that will submit both displayed data on modal and a textbox insert into a table using jquery

http://www.aspforums.net/Threads/132953/Open-different-Modal-Popup-based-on-DataList-Button-clicked-using-jQuery-Ajax-in-ASPNet/

You are viewing reply posted by: dharmendr on Jun 05, 2017 09:00 AM.
Posted on Jun 05, 2017 09:00 AM Modified on on Jul 11, 2017 08:11 AM

Hi micah,

I have modified your code. Refer the below sample.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <!-- Bootstrap -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript">
        $(function () {
            $('[id*=Button1]').on('click', function () {
                var id = $(this).closest('tr').find($('[id*=ProdID]')).text();
                $.ajax({
                    type: "POST",
                    url: "Default.aspx/GetNameUserName",
                    data: '{id:"' + id + '"}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        var table = $("#modalbody").find('table').eq(0).clone(true);
                        var customers = response.d;
                        $("#modalbody").find('table').eq(0).remove();
                        $(customers).each(function () {
                            $(".id", table).html(this.Id);
                            $(".username", table).html(this.UserName);
                            $(".name", table).html(this.Name);
                            $(".senddate", table).html(this.SendDate);
                            $(".contentpost", table).html(this.ContentPost);
                            $("#modalbody").append(table);
                            table = $("#modalbody").find('table').eq(0).clone(true);
                        });
                        $("#txtComments").val('');
                        $('#myModal').modal('show');
                    },
                    failure: function (response) {
                        alert(response.d);
                    },
                    error: function (response) {
                        alert(response.d);
                    }
                });
                return false;
            });

            $("#btnSaveComments").on("click", function () {
                var tableModal = $(".tblCustomer").html();
                var id = $(tableModal).find('.id').html().trim();
                var name = $(tableModal).find('.name').html().trim();
                var username = $(tableModal).find('.username').html().trim();
                var contentPost = $(tableModal).find('.contentpost').html().trim();
                var comments = $("#txtComments").val();
                $.ajax({
                    type: "POST",
                    url: "Default.aspx/InsertCommenttype",
                    data: '{id:"' + id + '",name:"' + name + '",username:"' + username + '",contentpost:"' + contentPost + '",comments:"' + comments + '"}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        alert(response.d);
                    },
                    failure: function (response) {
                        alert(response.d);
                    },
                    error: function (response) {
                        alert(response.d);
                    }
                });
                return false;
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:DataList ID="dlstProducts" runat="server" RepeatColumns="3" CellSpacing="10"
            RepeatDirection="Horizontal" RepeatLayout="Table">
            <ItemTemplate>
                <table>
                    <tr>
                        <td>
                            <b>ID : </b>
                            <asp:Label ID="ProdID" runat="server" Text='<%#Eval("Id") %>' /><br />
                            <b>Name : </b>
                            <asp:Label ID="lblName" runat="server" Text='<%#Eval("Name") %>' /><br />
                            <b>UserName : </b>
                            <asp:Label ID="Label2" runat="server" Text='<%#Eval("UserName") %>' />
                        </td>
                        <td>
                            <asp:Button ID="Button1" runat="server" Text="Show" class="btn btn-primary btn-sm" />
                        </td>
                    </tr>
                </table>
            </ItemTemplate>
        </asp:DataList>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div class="container">
            <div class="row">
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <asp:Label ID="Label1" runat="server" Text=""></asp:Label><br />
                        <%--Modal 1 Start--%>
                        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                            aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title" id="myModalLabel">
                                            Name UserName Details</h4>
                                    </div>
                                    <div id="modalbody" align="center" class="modal-body">
                                        <table class="tblCustomer" cellpadding="2" cellspacing="0" border="1">
                                            <tr>
                                                <td>
                                                    <b>ID: </b><span class="id">
                                                        <%# Eval("ID") %></span>
                                                    <br />
                                                    <b>Name: </b><span class="name">
                                                        <%# Eval("Name") %></span>
                                                    <br />
                                                    <b>UserName: </b><span class="username">
                                                        <%# Eval("UserName")%></span><br />
                                                    <br />
                                                    <b>ContentPost: </b><span class="contentpost">
                                                        <%# Eval("ContentPost")%></span><br />
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div class="modal-footer">
                                        <center>
                                            <asp:TextBox runat="server" ID="txtComments" TextMode="MultiLine" />
                                            <br />
                                            <asp:Button ID="btnSaveComments" Text="Save Comments" runat="server" />
                                        </center>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <%--Modal 1 End--%>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("UserName") });
        dt.Rows.Add(1, "Micah", "Mic22");
        dt.Rows.Add(2, "Brown", "brown44");
        dt.Rows.Add(5, "Dharmendra Das", "das");
        dlstProducts.DataSource = dt;
        dlstProducts.DataBind();
    }
}

[WebMethod]
public static List<Customer> GetNameUserName(int id)
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT Id,UserName Name,UserName,SendDate,ContentPost FROM USERPost WHERE Id = @ID"))
        {
            cmd.Connection = con;
            cmd.CommandType = CommandType.Text;
            cmd.Parameters.AddWithValue("@ID", id);
            List<Customer> customers = new List<Customer>();
            con.Open();
            SqlDataReader sdr = cmd.ExecuteReader();
            while (sdr.Read())
            {
                customers.Add(new Customer
                {
                    Id = sdr["Id"].ToString(),
                    Name = sdr["Name"].ToString(),
                    UserName = sdr["UserName"].ToString(),
                    SendDate = sdr["SendDate"].ToString(),
                    ContentPost = sdr["ContentPost"].ToString()
                });
            }
            con.Close();
            return customers;
        }
    }
}

// Insert into Customer Choice Description Table
[WebMethod]
public static string InsertCommenttype(string id, string name, string username, string contentpost, string comments)
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand("INSERT INTO [customerchoice&description](ID,Name,UserName,ContentPost,Comments) VALUES(@ID,@Name,@UserName,@ContentPost,@Comments)"))
        {
            cmd.Connection = con;
            cmd.CommandType = CommandType.Text;
            cmd.Parameters.AddWithValue("@ID", id);
            cmd.Parameters.AddWithValue("@Name", name);
            cmd.Parameters.AddWithValue("@UserName", username);
            cmd.Parameters.AddWithValue("@ContentPost", contentpost);
            cmd.Parameters.AddWithValue("@Comments", comments);
            con.Open();
            cmd.ExecuteNonQuery();
            con.Close();
        }
    }
    return "Saved";
}

public class Customer
{
    public string FriendUserName { get; set; }
    public string ShareContent { get; set; }
    public string ShareTodayDate { get; set; }
    public string Comments { get; set; }
    public string SharePostDate { get; set; }
    public string UserName { get; set; }
    public string ContentPost { get; set; }
    public string Name { get; set; }
    public string fName { get; set; }
    public string Image { get; set; }
    public string Image2 { get; set; }
    public string SendDate { get; set; }
    public string Id { get; set; }
}

Screenshot