Insert DataList selected image and TextBox value in Database in ASP.Net

Last Reply one year ago By pandeyism

Posted one year ago

i have a datalist of image stickers, users can select any of the images then insert into table. The requirements are textbox for comment and a datalist of images coming from database then a submit button.

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        this.Getsticker();
    }
}
public void Getsticker()
{
    string constr = ConfigurationManager.ConnectionStrings["DB"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT Id,stickers FROM stickertable ORDER BY ID DESC"))
        {
            //cmd.Parameters.AddWithValue("@Date", DateTime.Today);
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                using (DataTable dt = new DataTable())
                {
                    sda.Fill(dt);
                    getstickerimg.DataSource = dt;
                    getstickerimg.DataBind();
                }
            }
        }
    }
}

html

<asp:TextBox ID="Textpost" runat="server" class="form-control" placeholder="Thoughts..."
    Style="" Rows="1" cols="20" BorderStyle="Solid" Font-Bold="False" autofocus="autofocus"
    Wrap="True" Width="100%" BorderColor="#8CC6FF" BorderWidth="1px" TextMode="MultiLine"
    onkeyup="return CountCharacters();"></asp:TextBox>
<asp:LinkButton ID="LinkButton4" runat="server" Text="Submit" CssClass="dropdown bg_none btn" />
<asp:LinkButton ID="LinkButton4" runat="server" CssClass="dropdown bg_none btn">
    <div class="  " style="">
        <i class="dropdown-toggle fa fa-smile-o" data-toggle="dropdown" style="font-size: large;
            color: #66CCFF;"></i>
        <ul class=" dropdown-menu" style="width: 70%">
            <li style="" class="">
                <asp:Panel ID="Panel4" runat="server" ScrollBars="Vertical" Height="320px" CssClass="">
                    <asp:DataList ID="getstickerimg" runat="server" CssClass=" table table-hover table-striped"
                        Width="100%">
                        <ItemTemplate>
                            <span style="">
                                <asp:Image ID="Image2" Text='<%#Eval("stickers")%>' runat="server" src='<%#getstickers2(Container.DataItem)%>  '
                                    class=" " alt="" ImageUrl='<%# ("../StickerFolder/") %>' />
                            </span>
                        </ItemTemplate>
                    </asp:DataList>
                </asp:Panel>
            </li>
        </ul>
    </div>
</asp:LinkButton>
You are viewing reply posted by: pandeyism one year ago.
Posted one year ago

Hi micah,

Please refer below sample. Take one HiddenField. When select image assign the path to HiddenField field. Then on submit insert the record in database.

HTML

<div>
    <asp:TextBox ID="Textpost" runat="server" class="form-control" placeholder="Thoughts..."
        Style="" Rows="1" cols="20" BorderStyle="Solid" Font-Bold="False" autofocus="autofocus"
        Wrap="True" Width="100%" BorderColor="#8CC6FF" BorderWidth="1px" TextMode="MultiLine"></asp:TextBox>
    <asp:LinkButton ID="LinkButton4" runat="server" Text="Submit" CssClass="dropdown bg_none btn"
        OnClick="Insert" />
    <div class="  " style="">
        <i class="dropdown-toggle fa fa-smile-o" data-toggle="dropdown" style="font-size: large;
            color: #66CCFF;"></i>
        <ul class=" dropdown-menu" style="width: 70%">
            <li style="" class="">
                <asp:Panel ID="Panel4" runat="server" ScrollBars="Vertical" Height="320px" CssClass="">
                    <asp:DataList ID="getstickerimg" runat="server" CssClass=" table table-hover table-striped"
                        Width="100%" >
                        <ItemTemplate>
                            <span style="">
                                <asp:Image ID="Image2" ImageUrl='<%#Eval("Path")%>' runat="server" class=" " alt="" />
                            </span>
                        </ItemTemplate>
                    </asp:DataList>
                </asp:Panel>
            </li>
        </ul>
    </div>
    <asp:HiddenField ID="hfFilePath" runat="server" />
</div>
<script src="jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $("[id*=getstickerimg]").find("[id*=Image2]").click(function () {
            var row = $(this).closest("tr");
            data = row.find("td [id*=Image2]").attr('src');
            $('#hfFilePath').val(data);
        });
    });
</script>

Namespaces

C#

using System.Configuration;
using System.Data.SqlClient;
using System.Data;

VB.Net

Imports System.Data.SqlClient
Imports System.Data

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {

        this.Getsticker();
    }
}

public void Getsticker()
{
    using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["constr"].ConnectionString))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT Id,Path FROM tblFilesPath"))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                using (DataTable dt = new DataTable())
                {
                    sda.Fill(dt);
                    getstickerimg.DataSource = dt;
                    getstickerimg.DataBind();
                }
            }
        }
    }
}

protected void Insert(object sender, EventArgs e)
{
    string filepath = hfFilePath.Value;
    string comment = Textpost.Text;
    using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["constr"].ConnectionString))
    {
        using (SqlCommand cmd = new SqlCommand("INSERT INTO tblName (Path, Comment) VALUES(@Path, @Comment)", con))
        {
            con.Open();
            cmd.Parameters.AddWithValue("@Path", filepath);
            cmd.Parameters.AddWithValue("@Comment", comment);
            cmd.ExecuteNonQuery();
            con.Close();
        }
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Me.Getsticker()
    End If
End Sub

Public Sub Getsticker()
    Using con As SqlConnection = New SqlConnection(ConfigurationManager.ConnectionStrings("constr").ConnectionString)
        Using cmd As SqlCommand = New SqlCommand("SELECT Id,Path FROM tblFilesPath")
            Using sda As SqlDataAdapter = New SqlDataAdapter()
                cmd.Connection = con
                sda.SelectCommand = cmd

                Using dt As DataTable = New DataTable()
                    sda.Fill(dt)
                    getstickerimg.DataSource = dt
                    getstickerimg.DataBind()
                End Using
            End Using
        End Using
    End Using
End Sub

Protected Sub Insert(ByVal sender As Object, ByVal e As EventArgs)
    Dim filepath As String = hfFilePath.Value
    Dim comment As String = Textpost.Text
    Using con As SqlConnection = New SqlConnection(ConfigurationManager.ConnectionStrings("constr").ConnectionString)
        Using cmd As SqlCommand = New SqlCommand("INSERT INTO tblName (Path, Comment) VALUES(@Path, @Comment)", con)
            con.Open()
            cmd.Parameters.AddWithValue("@Path", filepath)
            cmd.Parameters.AddWithValue("@Comment", comment)
            cmd.ExecuteNonQuery()
            con.Close()
        End Using
    End Using
End Sub