Hi mahesh213,
You are just deleting the file from Database. But not deleting the file from server path.
Check this example. Now please take its reference and correct your code.
Database
For this example i have used table named tblFilesPath whose schema and data are defined as follows.
SQL
CREATE TABLE [dbo].[tblFilesPath]
(
Id INT IDENTITY(1,1) PRIMARY KEY NOT NULL,
Name NVARCHAR(50) NOT NULL,
Path NVARCHAR(200) NOT NULL
)
GO
INSERT INTO tblFilesPath VALUES('Chrysanthemum.jpg','Images/Chrysanthemum.jpg')
INSERT INTO tblFilesPath VALUES('Desert.jpg','Images/Desert.jpg')
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
public JsonResult GetFiles()
{
FilesEntities entities = new FilesEntities();
try
{
List<tblFilesPath> files = entities.tblFilesPaths.ToList();
return Json(files, JsonRequestBehavior.AllowGet);
}
catch (Exception exp)
{
return Json("Error in getting record !", JsonRequestBehavior.AllowGet);
}
}
public JsonResult DeleteFile(int id)
{
FilesEntities entities = new FilesEntities();
try
{
// Get details of File to be Delete.
tblFilesPath file = entities.tblFilesPaths.Where(x => x.Id == id).FirstOrDefault();
// Delete file from Server Path.
if (System.IO.File.Exists((Server.MapPath("~/") + file.Path).Replace("/", "\\")))
{
System.IO.File.Delete(Server.MapPath("~/") + file.Path.Replace("/", "\\"));
}
// Delete record from Database.
entities.DeleteObject(file);
entities.SaveChanges();
return Json(file.Name, JsonRequestBehavior.AllowGet);
}
catch (Exception exp)
{
return Json("Error in getting record !", JsonRequestBehavior.AllowGet);
}
}
}
View
<html>
<head>
<title>Index</title>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', ['$scope', '$http', '$filter', 'FileService', function ($scope, $http, $filter, FileService) {
GetAllFiles();
function GetAllFiles() {
// Bind Files.
var getFiles = FileService.GetFiles();
getFiles.then(function (response) {
$scope.Files = response.data;
}, function (response) {
alert("Records gathering failed!");
});
}
// Delete File.
$scope.DeleteData = function (Id) {
var deleteFiles = FileService.DeleteFile(Id);
deleteFiles.then(function (response) {
GetAllFiles();
$scope.apply();
}, function (response) {
alert("Records delete failed!");
});
}
} ]);
app.service("FileService", function ($http) {
//Get all Files.
this.GetFiles = function () { return $http.get("/Home/GetFiles"); };
// Delete File By Id.
this.DeleteFile = function (id) {
var response = $http({ method: "POST", url: "/Home/DeleteFile", params: { id: JSON.stringify(id)} });
return response;
}
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<table class="table table-striped table-bordered table-hover table-condensed">
<tr>
<th>Id</th>
<th>Name</th>
<th>Photo</th>
<th>Action</th>
</tr>
<tbody ng-repeat="m in Files">
<tr>
<td>{{m.Id}}</td>
<td>{{m.Name}}</td>
<td><img alt="{{m.Name}}" ng-src="{{m.Path}}" style="height: 100px; width: 100px" /></td>
<td><input type="button" value="Delete" ng-click="DeleteData(m.Id)" class="btn btn-danger" /></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Screenshot
