Hi rani,
Using the below article i have created the example.
Check this example. Now please take its reference and correct your code.
Database
I have made use of the following table tblFilesPath with the schema as follows.
I have already inserted few records in the table.
Namespaces
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.IO;
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
public JsonResult GetFiles()
{
List<object> files = new List<object>();
string sql = "SELECT Id,Name,Path FROM tblFilesPath";
using (SqlConnection conn = new SqlConnection())
{
conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlCommand cmd = new SqlCommand(sql))
{
cmd.Connection = conn;
conn.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
files.Add(new
{
Id = sdr["Id"],
Name = sdr["Name"],
Path = sdr["Path"]
});
}
}
conn.Close();
}
return Json(files, JsonRequestBehavior.AllowGet);
}
}
public JsonResult Update()
{
HttpPostedFileBase postedFile = Request.Files[0];
postedFile.SaveAs(Server.MapPath("~/Images/") + Path.GetFileName(postedFile.FileName));
int id = Convert.ToInt32(Request.Form["Id"]);
string name = Request.Form["ImageName"];
string query = "UPDATE tblFilesPath SET Name=@Name, Path=@Path WHERE Id=@Id";
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand(query))
{
cmd.Parameters.AddWithValue("@Id", id);
cmd.Parameters.AddWithValue("@Name", name);
cmd.Parameters.AddWithValue("@Path", "Images/" + Path.GetFileName(postedFile.FileName));
cmd.Connection = con;
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}
}
return Json("");
}
}
View
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DataTable AngularJS</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.0/angular.js"></script>
<script type="text/javascript" src="https://rawgithub.com/vivendi/angular-datatables/master/src/angular-datatables.js"></script>
<script type="text/javascript" src="https://rawgithub.com/vivendi/angular-datatables/master/src/angular-datatables.directive.js"></script>
<script type="text/javascript" src="https://rawgithub.com/vivendi/angular-datatables/master/src/angular-datatables.factory.js"></script>
<script type="text/javascript" src="https://rawgithub.com/vivendi/angular-datatables/master/src/angular-datatables.bootstrap.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', ['datatables'])
app.controller('MyController', function ($scope, $http, $timeout) {
PopulateFiles();
function PopulateFiles() {
$http.post("Home/GetFiles", { headers: { 'Content-Type': 'application/json'} })
.then(function (response) {
$scope.Files = response.data;
}, function (response) {
$window.alert(response.responseText);
});
}
$scope.ShowHide = false;
$scope.EditData = function (file) {
$scope.Id = file.Id;
$scope.Name = file.Name;
$scope.ShowHide = true;
};
$scope.Upload = function () {
var formData = new FormData();
formData.append("Id", $scope.Id);
formData.append("ImageName", $scope.Name);
formData.append(file, document.getElementById("file").files[0]);
$http({
method: "POST",
url: "Home/Update",
data: formData,
transformRequest: angular.identity,
headers: { 'Content-Type': undefined }
}).success(function (data, status) {
$timeout(function () {
PopulateFiles();
$scope.ShowHide = false;
});
}).error(function (data, status) {
$window.alert(data.Message);
});
};
});
</script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyController">
<table ng-show="ShowHide" class="table table-bordered table-responsive">
<tr>
<td>Id</td>
<td><input type="text" readonly="readonly" ng-model="Id" /></td>
</tr>
<tr>
<td>Name</td>
<td><input type="text" ng-model="Name" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="file" id="file" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="Update" ng-click="Upload()" />
</td>
</tr>
</table>
<br />
<div class="table table-bordered">
<table datatable="ng" class="table table-bordered table-responsive">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Image</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr dt-rows ng-repeat="file in Files">
<td>{{file.Id}}</td>
<td>{{file.Name}}</td>
<td><img ng-src="{{file.Path}}" alt="{{file.Name}}.jpg" style="height: 100px; width: 100px" /></td>
<td><input type="button" id="btnEdit" class="btn btn-primary" value="Edit" ng-click="EditData(file)" /></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Screenshot
