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.




Save images in SQL server database and display in Girdview 01


ඔන්න හා හා පුරා කියල පළවෙනි POST එක දාන්න හදන්නේ. 


මේක ගොඩක් අයට වැදගත් වෙයි කියලා මම හිතනවා. මෙකෙදි මම කියල දෙන්නේ image එකක් database  එකේ  save කරලා gridview  එකක පෙන්නන විදිය. gridview  control එක එක්ක ප්‍රශ්න තියන අයට උදව්වක් විදියට මම ඊලග post  එකේ  gridview සමග වැඩ කරන හැටි දාන්නම්. මෙතන මම use කරල තියෙන්නේ SQL server 2008R2 and VS 2010  .  Image එක කිව්වට ඇත්තටම මෙතන save වෙන්නෙ Image එකේ path එක. හරි ලෙසීයි. එහෙනම් පටන් ගමු. 

(සෑම පාඩමක් අවසානයේම. ඒ පාඩමට අදාලව develop කල sample project එකේ downloading link එක බලාපොරොත්තු වන්න.)

Step 1: මුලින්ම sql server  open කරගෙන databse එකක් හදා ගන්න.




මම හදා ගත්ත database එකේ  නම TestImage 


Step 2දැන් එහෙනම් table එකත් හදා ගමු.

                                 
                                         මම හැදුව  table එකේ නම ImageStore




Step 3හරි ඊට පස්සේ තියෙන්නේ table එක design කර ගන්න එක. පහල රූපයේ විදියට  column දාල data types  එහෙම set කර ගන්න. ImageKey  column එක  auto increment වෙන්න ඔනේ. ( ms sql server වෙන්න ඔනේම නෑ access,mysql උනත් use කරන්න පුලුවන්).





Step 4:  ඒකත් හරි එහෙනම් දැන් Visual Studio open කර ගන්න වෙලාව. Open කරගෙන අලුත් website  එකක් හදා ගන්න. file > new > website




ASP.NET Empty Web Site එකක් හදා ගන්න. මගෙ  website project එකේ නම් Imagez


Step 5:  ඊට පස්සේ මේ විදියට  .aspx  Pages 2 k හදා ගන්න ඔනේ.


ImageList.aspx and UploadingImage.aspx


මෙතනදි අපි Images  කියල folder  එකකුත් හදා ගන්න ඔනේ. අපි upload කරන images save වෙන්නෙ මේ folder එක ඇතුලේ.




          මෙන්න මේ විදියට තමයි මම UploadImage.aspx   design කලේ.


    
        මෙන්න ImageList.aspx



ඔකේ. design එක වගේම මේ පාඩමේ මුල් කොටස මෙතනින් ඉවරයි. 2 වැනි කොටසත් ඉක්මනටම දාන්නම්. එහෙනම් අපි කැපුනා.




2 කොටසට යන්න මෙතන කරන්න >>

 C#.Net , ASP.NET වලින් වැඩ කරන අය දන්නවා Programming  කර කර ඉන්නකොට සමහර වෙලාවට හිර වෙන තැන් එනව නේ. ඒ වෙලාවට නම් ඉතින් අපිට පිහිට වෙන්නේ Google දෙයියෝ තමයි. මමත් දැන් ගොඩක් කාලෙක ඉඳලා C#, ASP වලින් වැඩ කරන කෙනෙක්. ඉතින් මට Job එක කරන අතරේ Set වෙන පොඩි පොඩි C#,ASP වැඩ , Programming ඉගෙන ගන්න නන්ගිලා මල්ලිලා එක්ක බෙදා ගන්න හිතුනා.
මේ Blog  එක ඉලක්ක කරලා තියෙන්නේ C#,ASP පිලිබද යම්කිසි දැනුමක් තියන අයට. මුල ඉදලා ඉගැන්වීමක් නම් කරන්නෙ නෑ.
මාත් Job කරන අතරේ තාම ඉගෙන ගන්නවා.ඒක නිසා  ඔයාලගෙ දැනුම මාත් එක්ක බෙදාගන්නත් මම ආරධනා කරනවා. ඔයාලට තියන ප්‍රශ්නත් මෙතන 
Post කරන්න. මම හැකි අයුරින් උදව් කරන්නම්. එහෙනම් අපි කැපුනා. අලුත් Post එකකින් හමුවෙමු,