Wednesday, 31 July 2013 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 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">
            <asp:CheckBox runat="server" ID="sampleCheckbox" Visible="true" />
           <asp:Image Width="100" ID="Image1" ImageUrl='<%# Bind("Name", "~/QRImages/{0}") %>'                  runat="server" />
     <itemstyle bordercolor="Brown" borderstyle="dotted" borderwidth="3px" horizontalalign="Center"
     VerticalAlign="Bottom" />

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)
                dtlist.DataSource = listItems;

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('/');


            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.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);
            var client = new SmtpClient("", 587)
                Credentials = new NetworkCredential("your gmail email here", " your password here"),
                EnableSsl = true
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.