get value by jquery in c# Asp.net by newtonsoft plugin

HTML


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="row">

            <div class="container">
                <h1>Product Details</h1>
                <div class="row">
                    <div class="col-sm-2">
                        <asp:DropDownList ID="ddlproducts" runat="server" CssClass="form-control"></asp:DropDownList>
                    </div>
                    <div class="col-sm-2">
                        <asp:TextBox ID="t1" runat="server" CssClass="form-control"></asp:TextBox>
                    </div>
                    <div class="col-sm-2">
                        <asp:TextBox ID="t2" runat="server" CssClass="form-control"></asp:TextBox>
                    </div>
                    <div class="col-sm-2">
                        <asp:TextBox ID="t3" runat="server" CssClass="form-control"></asp:TextBox>
                    </div>
                    <div class="col-sm-2">
                        <asp:TextBox ID="f4" runat="server" CssClass="form-control"></asp:TextBox>
                    </div>
                    <div class="col-sm-2">
                        <%--<asp:Button ID="btnsubmit" runat="server" Text="Add" />--%>
                        <button type="button" class="btnAdd">Add</button>
                    </div>

                </div>

                <div class="table-responsive">
                    <table class="table" id="tblData">
                        <thead>
                            <tr>
                                <th>th1</th>
                                <th>th2</th>
                                <th>th3</th>
                                <th>th4</th>
                                <th>th5</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                    <br />
                    <br />
                    <asp:Button runat="server" ID="btnSubmit" Text="Submit" OnClick="btnSubmit_Click" />
                    <asp:HiddenField runat="server" ID="hfData" />
                </div>


            </div>
        </div>
        <script>
            $(document).ready(function () {
                $(".btnAdd").click(function () {
                    $("#tblData").append(
                   "<tr><td>" + $("#ddlproducts").val() + "</td><td>" + $("#t1").val() + "</td><td>" + $("#t2").val() + "</td><td>" + $("#t3").val() + "</td><td>" + $("#f4").val() + "</td></tr>"
                   )
                })

                $("form").submit(function () {
                    var data = [];
                    $("#tblData").find("tbody").find("tr").each(function () {
                        data.push(
                            {
                                th1: $(this).find("td").eq(0).text(),
                                th2: $(this).find("td").eq(1).text(),
                                th3: $(this).find("td").eq(2).text(),
                                th4: $(this).find("td").eq(3).text(),
                                th5: $(this).find("td").eq(4).text()
                            }
                            );
                    })
                    var myVal=JSON.stringify(data);
                    $("#hfData").val(myVal);
                })
            })
        </script>
    </form>
</body>
</html>

C#:-

 using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using Newtonsoft.Json;
using System.Xml;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            binddropdown();
        }
    }
    protected void binddropdown()
    {
        SqlConnection con = new SqlConnection("Data Source=DESKTOP-S3ABELM;Initial Catalog=check;Integrated Security=True");
        string query = "select * from products";
        SqlCommand cmd = new SqlCommand(query, con);
        SqlDataAdapter sda = new SqlDataAdapter(cmd);
        DataTable dt = new DataTable();
        sda.Fill(dt);
        if (dt.Rows.Count > 0)
        {
            ddlproducts.DataSource = dt;
            ddlproducts.DataTextField = "productname";
            ddlproducts.DataValueField = "pid";
            ddlproducts.DataBind();
        }
    }

    protected void btnSubmit_Click(object sender, EventArgs e)
    {
       // XmlDocument doc = new XmlDocument();
        List<DataClass> _lst = new List<DataClass>();
        string valData = hfData.Value;
        JavaScriptSerializer s = new JavaScriptSerializer();
        var a=s.DeserializeObject(valData);
       //  doc = JsonConvert.DeserializeXmlNode(a.ToString());
    }  
}



Class:-

public class DataClass
{
    public string th1 { get; set; }
    public string th2 { get; set; }
    public string th3 { get; set; }
    public string th4 { get; set; }
    public string th5 { get; set; }
}

Comments

Popular posts from this blog

Grideview on row command

Image Show on change of fileupload

Encription Manager In Asp.net