Monday, May 14, 2012

Save images in SQL server database and display in Girdview 02


හරි ඔන්න එහෙනම්  Images and gridview සෙල්ලමේ 2 කොටස.

Step 6:  Sql connection එක හදා ගන්නේ මෙහෙමයි. මුලින් අපි web.config  (see under solution explorer ) එකට connection settings දා ගන්න  ඔනේ. 

<configuration>  </configuration>  tags දෙක අතරට පහත code එක රිoගවන්න


 <connectionStrings>
 <add name="SqlConnection" connectionString="Data Source=DELL-PC\SQLEXPRESS;Initial Catalog=TestImage;Integrated Security=True"/>
 </connectionStrings>

මෙතන connectionString=  කියන එකට අපි දාන්නේ ms sql connection string එක. ඔයලගෙ connection string එක මගේ එකට වඩා වෙනස්.  Data Source එකට දාන්නේ Sql server name එක.Initial Catalog එකට දාන්නේ අපි හදපු database එකේ නම.


දැන් මේ setting එක කියවන්න ඔනේ C# code එකේ. ඒකට  C# code file එකට පහත code එක දාන්න ඔනේ.


String sqlConString = System.Configuration.ConfigurationManager.ConnectionStrings["SqlConnection"].ConnectionString;

                SqlConnection SqlCon = new SqlConnection(sqlConString);


මෙතනදි මුලින් කරන්නේ  web.config එකෙ  තිබ්බ connection name setting use කරලා connectin string ගන්න එක. ඊට පස්සෙ sqlconnection එක හදා ගන්නවා.

Step 7: මුලින් කිව්ව වගේ අපි මෙතනදි කරන්නේ web  project එකේ Image folder එක ඇතුලෙ image file path  එක save කරන අතරේ sql table එකට image එකේ path එක දා ගන්න එක. ඉතින් එකට image file  එක upload කරන්න ඔනේ. .net වල තියනවා FileUpload කියලා controller එකක්. ඉතින් අපි ඒක use  කරලා තමා වැඩේ කරන්නේ.


                        <asp:FileUpload ID="fuploadimage" runat="server" />



Step 8: UploadImage.aspx page  එකේ UploadImage  button එකේ තියෙන්නේ මෙන්න මේ code එක



 try

        {

            if (fuploadimage.PostedFile != null)
            {    
                                // මෙතන බලන්නේ image name field එක empty ද නැද්ද කියලා empty නම් msg එකක් දෙනවා.
                if (txtimagename.Text.Equals("") || txtimagename.Text == "please enter a image name here")
                {
                    txtimagename.Text = "please enter a image name here";
                    return;
                }

                //get the image path  -  මෙන්න මෙහෙමයි image එකෙ path එක ගන්නේ. මාර ලෙසී නේද?
                string _fileName = Path.GetFileName(fuploadimage.PostedFile.FileName);
                fuploadimage.SaveAs(Server.MapPath("images/" + _fileName));

                //insering to the db - හරි දැන් image එකයි image එකේ path එකයි දෙකම දාමු table එකට. 
                String sqlConString = System.Configuration.ConfigurationManager.ConnectionStrings["SqlConnection"].ConnectionString;
                SqlConnection SqlCon = new SqlConnection(sqlConString);
                SqlCon.Open();
                SqlCommand insertImg = SqlCon.CreateCommand();
                insertImg.CommandText = "insert into ImageStore (ImageName,ImagePath) values(@ImageName,@ImagePath)";
                insertImg.Parameters.AddWithValue("@ImageName", txtimagename.Text.Trim());
                insertImg.Parameters.AddWithValue("@ImagePath", "Images/" + _fileName);
                insertImg.ExecuteNonQuery();
                SqlCon.Close();

                //redirect to the image list  - gridview එකට redirect කලා.මෙහෙම කරලා අපි upload කල image එක එවෙලෙම බලා ගන්න පුලුවන්.
                Response.Redirect("ImageList.aspx",false);
            }
        }
        catch (Exception er)
        {
            Response.Write(er.Message);
        }



Step 9: ImageList.aspx  page එකේ අපි දා ගන්න ඔනේ .net  වල තියන Gridview controller එක. පහළ තියෙන්නේ ඒ code එක තමයි. මෙතන මම BoundField දෙකක් දාල තියනවා image එකෙ නම image සහ එක display කරන්න.


  <asp:GridView ID="GridViewImageList" runat="server" 
            AutoGenerateColumns = "false" Width="400px">
            <Columns>
                <asp:BoundField DataField="ImageName" HeaderText="Image Name" ItemStyle-HorizontalAlign = "Left" HeaderStyle-HorizontalAlign = "Left"  />
                <asp:ImageField DataImageUrlField="ImagePath" ControlStyle-Width="50" ControlStyle-Height="50"
                    HeaderText="Image" ItemStyle-HorizontalAlign = "Center" />
            </Columns>
        </asp:GridView>

Step 10මෙන්න මෙහෙම තමා gridview එකෙ images පෙනන්නේ. මෙ code එක තියෙන්න ඔනෙ ImageList.aspx.cs  page  එකේ  Page_Load එක ඇතුලේ.



        String sqlConString = System.Configuration.ConfigurationManager.ConnectionStrings["SqlConnection"].ConnectionString;

        SqlConnection SqlCon = new SqlConnection(sqlConString);

        SqlCon.Open();
        SqlCommand showImg = SqlCon.CreateCommand();
        showImg.CommandText = "select * from ImageStore";
        SqlDataAdapter iAdapter = new SqlDataAdapter(showImg);
        DataTable dt = new DataTable();
        iAdapter.Fill(dt);
        GridViewImageList.DataSource = dt;
        GridViewImageList.DataBind();

වැඩි දෙයක් නෑ. Sqlcommand එකේ select query එක ලිව්වා.
 SqlCommand showImg = SqlCon.CreateCommand();
        showImg.CommandText = "select * from ImageStore";

 DataAdapter එකක් දා ගත්තා.
SqlDataAdapter iAdapter = new SqlDataAdapter(showImg);

Adapter එකෙන් DataSet එක Fill  කර ගත්තා.
DataTable dt = new DataTable();
        iAdapter.Fill(dt);

Gridview  එකෙ Data source එක විදියට DataSet එක දුන්නා. 
GridViewImageList.DataSource = dt;
        GridViewImageList.DataBind();

එච්චරයි :P.. lesi wadee neda lol. 


(මම මෙතන ගොඩක් සරල විදියට කරල තියෙන්නේ තෙරුම් ගන්න ලෙසි වෙන්න ඔනේ නිසා. ඔයාලට ඔනේ විදියට ලස්සනට මේක වැඩි දියුනු කරලා ගන්න.)

එහෙනම් වෙන දවසක තව අලුත් පාඩමකින් හමු වෙමු. අපි කැපුනා. ba bye.




No comments:

Post a Comment