ASP.Net : Delete files from folder | Neha Sharma

Introduction:

This article explains how to delete a file consisting in your folder. Requirement:

Add below namespaces in .cs file:

using System;

using System.Drawing;

using System.IO;

code.aspx :

I have files in my application folder named “files”. i want to delete some file from  those so first i bind all file name  in to a dropdown list. Write below code in the .aspx page.

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<title>how to delete a file from a folder in asp.net using c#</title>

    <style type="text/css">

        .auto-style1 {

            width: 88px;

        }

    </style>

</head>

<body>

<form id="form1" runat="server">

<div>

<table>

<tr>

<td>Select file to delete</td>

<td class="auto-style1">

    <asp:DropDownList ID="DropDownList1" runat="server" Height="16px" Width="88px">

        <asp:ListItem>Select file</asp:ListItem>

        <asp:ListItem>file1.txt</asp:ListItem>

        <asp:ListItem>file2.pdf</asp:ListItem>

        <asp:ListItem>file3.doc</asp:ListItem>

        <asp:ListItem></asp:ListItem>

    </asp:DropDownList>

    </td>

</tr>

<tr><td></td><td class="auto-style1"><asp:Button ID="btnDelete" runat="server" Text="Delete" OnClick="btnDelete_Click" /> </td></tr>

<tr><td colspan="2"><asp:Label ID="lbl_output" runat="server"/></td></tr>

</table>

</div>

</form>

</body>

</html>

Code.cs :

When dropdown have all file names now you can select any file which you want to delete and click on button “Delete” it ll check if your file is existing or not if exist it ll delete file else show you a message that your file is     not existing in the lbl_output.

Write below code on the button delete:

protected void btnDelete_Click(object sender, EventArgs e)

    {

        string file_name = DropDownList1.SelectedItem.Text;

        string path = Server.MapPath("files//" + file_name);

        FileInfo file = new FileInfo(path);

        if (file.Exists)//check file exsit or not

        {

            file.Delete();

            lbl_output.Text = file_name + " file deleted successfully";

            lbl_output.ForeColor = Color.Green;

        }

        else

        {

            lbl_output.Text = file_name + " This file does not exists ";

            lbl_output.ForeColor = Color.Red;

        }

    }

Save all and view the page in browser it ll work fine.

Thanks.

Neha Sharma

ASP.Net : Tooltip in Datalist | Neha Sharma

In this article I am going to explain how to add tool-tip  Here I have taken an example to show tool-tip on the profile images. Like the below image :

First I bound a datalist from database containing the details of users.i bound two fields name and image only image to display in the datalist and name to show in tooltip.

Follow below steps :

1.  Add plugin jquery.tooltip.You can download it .
2. Write the below code in aspx page :

    

            <html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Show Gridview Rows Details in tooltip with jQuery</title>

<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>

<%--<script src="jquery.tooltip.min.js" type="text/javascript"></script>--%>

    <script src="jquery-tooltip/jquery.tooltip.min.js" type="text/javascript"></script>

<script type="text/javascript">

    function InitializeToolTip() {

        $(".datalistToolTip").tooltip({

            track: true,

            delay: 0,

            showURL: false,

            fade: 100,

            bodyHandler: function () {

                return $($(this).next().html());

            },

            showURL: false

        });

    }

</script>

<script type="text/javascript">

    $(function () {

        InitializeToolTip();

    })

</script>

<style type="text/css">

#tooltip {

position:absolute;

z-index: 1000;

border:none;

background-color:white;

padding: 0px;

opacity: 0.50;

}

#tooltip h3, #tooltip div { margin: 0; }

</style>

</head>

<body>

<form id="form1" runat="server">

<div>

    <br />

    <br />

    <br />

    <br />

    <asp:DataList ID="DataList1" runat="server" RepeatDirection="Horizontal">

        <ItemTemplate>

                        <asp:Label ID="Label1" runat="server" Text='<%# Eval("Name")%>' Visible="false"></asp:Label>

           <a href="#"> <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("image_path")%>' Width="50px" Height="50px" CssClass="datalistToolTip" />

            <div id="tooltip" style="display: none;">

<table>

<tr>

<td><%# Eval("Name")%></td>

</tr>

</table>

</div></a>

        </ItemTemplate>

       

    </asp:DataList>

    <br />

&nbsp;</div>

   

</form>

</body>

</html>

      3.       Do not forget to bind a datalist from your database.When you done all save the page and view the page in browser I tll work perfectly.Here when you download plugin describe that in the head section as I did just to fetch the information of tooltip on mouse over.When you done with the declarations on head section in the aspx page and bind the datalist. Now add a table in datalist item template field so that tooltip can show the data you want .like I added a div with the id “tooltip”

<div id="tooltip" style="display: none;">

<table>

<tr>

<td><%# Eval("Name")%></td>

</tr>

</table>

</div>

So, on mouse over this div ll show you the data which you want.

Thanks.

Neha Sharma

ASP.net : Image zoom using Jquery and Elevate plug-in | Neha Sharma

Introduction:

This article is about to explain how to create Image zoom in ASP.Net using Jquery and Elevate plug-in.

Requirement:

1.       Download Elevate plug-in

Code :

Write the below code in to your page :

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Image zoom</title>

    <script src='http://code.jquery.com/jquery-1.9.1.min.js'></script>

       <script src='jquery.elevateZoom-2.5.3.min.js'></script></head>

    <%--<script src='jquery.fancybox.js'></script>--%>

 

<body>

<div>

    <asp:Image ID="Image1" runat="server" ImageUrl="small/image_1.jpg" data-zoom-image="large/image_1.jpg"/>

 </div>

<script>

    $("# Image1").elevateZoom({ gallery: 'gallery_01', cursor: 'pointer', galleryActiveClass: 'active' });

    //pass the images to Fancybox

    $("# Image1").bind("click", function (e) {

        var ez = $('# Image1).data('elevateZoom');

        return false;

    });

</script>

</body>

</html>

Save all and run view the page in browser it ll work perfectly.

Thanks

Neha Sharma