Wednesday 31 July 2013

Asp.net select 1+ images in DataList controll

Recently there was a requirement in a project to create QR code image in one page and save it in a directory and show all images from that directory on another page in a view with a check box control , so that user can select multiple images send the email from that page.So I created a demo asp.net project and here I will share DataList code and button event code from code behind.

First have a look on datalist control code, very simple:


<asp:DataList ID="dtlist" runat="server" RepeatColumns="4" CellPadding="5"  Width="821px">
     <ItemTemplate>
            <asp:CheckBox runat="server" ID="sampleCheckbox" Visible="true" />
           <asp:Image Width="100" ID="Image1" ImageUrl='<%# Bind("Name", "~/QRImages/{0}") %>'                  runat="server" />
     </ItemTemplate>
     <itemstyle bordercolor="Brown" borderstyle="dotted" borderwidth="3px" horizontalalign="Center"
     VerticalAlign="Bottom" />
</asp:DataList>

So it looks like :


Next step is how to select images from that DataList controll , first we have to populate images to it which is done in Page_Load event:

    protected void Page_Load(object sender, EventArgs e)
        {
            if (!this.IsPostBack)
            {
                DirectoryInfo dir = new DirectoryInfo(MapPath("QRImages"));
                FileInfo[] files = dir.GetFiles();
                ArrayList listItems = new ArrayList();
                foreach (FileInfo info in files)
                {
                    listItems.Add(info);
                }
                dtlist.DataSource = listItems;
                dtlist.DataBind();
            }
        }


After DataList got populated lets do selection work , I did that in button click event something like that :

            string Email = email.Text;
            List<string> files = new List<string>();

            foreach (DataListItem dli in dtlist.Items)
            {
                string location;
                bool IsCheck = ((CheckBox)dli.FindControl("sampleCheckbox")).Checked;
                if (IsCheck)
                {
                    location = ((Image)dli.FindControl("Image1")).ImageUrl;
                    int point = location.LastIndexOf('/');
                    files.Add(location.Substring(point+1));
                }

            }

            System.Net.Mail.MailMessage mail = new System.Net.Mail.MailMessage();
            mail.From = new MailAddress("your gmail email"); // gmail is because we are using gmail smtp
            mail.To.Add(Email);
            mail.Subject = "Test";
            mail.Body = "";

            foreach (string path in files)
            {
                string attachmentPath = Server.MapPath("QRImages/");
                Attachment inline = new Attachment(attachmentPath + path);
                inline.ContentDisposition.Inline = true;
                inline.ContentDisposition.DispositionType = DispositionTypeNames.Attachment;
                inline.ContentType.MediaType = "image/png";
                inline.ContentType.Name = Path.GetFileName(attachmentPath);
                mail.Attachments.Add(inline);
            }
            var client = new SmtpClient("smtp.gmail.com", 587)
            {
                Credentials = new NetworkCredential("your gmail email here", " your password here"),
                EnableSsl = true
            };
            client.Send(mail);
            
Now you have everything , just copy paste above codes and have your one page application with multiple image selection for email attachment and sent email.

No comments:

Post a Comment