Friday 30 November 2018
Wednesday 28 November 2018
Filters in Angular JS|| Basics of Angular JS || Part-6
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular.min.js"></script>
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body ng-app="myapp">
<div ng-controller="myctrl">
<h1 style="text-align:center"> {{Message}}</h1>
<select>
<option ng-repeat="x in city">{{x}}</option>
</select>
<input type="text" ng-model="test" />
<br />
<br />
<br />
<table class="table table-responsive">
<thead>
<tr>
<th>id</th>
<th>Name</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="y in employee |filter:test">
<td>{{y.id}}</td>
<td>{{y.name | lowercase}} </td>
<td>{{y.Department}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script>
var app = angular.module("myapp", []);
app.controller("myctrl", function ($scope) {
$scope.Message = "Hello to Angular JS";
$scope.city = ["karachi", "Lahore", "Islamabad"];
$scope.employee = [{ id: 101, name: 'Ali', Department: 'CS' }, { id: 102, name: 'AHMED', Department: 'MATHS' }, { id: 103, name: 'SALMAN', Department: 'CS' }];
});
</script>
Scopes in Anguls JS
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular.min.js"></script>
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body ng-app="myapp">
<div ng-controller="myctrl">
<h1 style="text-align:center"> {{Message}}</h1>
<select>
<option ng-repeat="x in city">{{x}}</option>
</select>
<table class="table table-responsive">
<thead>
<tr>
<th>id</th>
<th>Name</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="y in employee">
<td>{{y.id}}</td>
<td>{{y.name}}</td>
<td>{{y.Department}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script>
var app = angular.module("myapp", []);
app.controller("myctrl", function ($scope) {
$scope.Message = "Hello to Angular JS";
$scope.city = ["karachi", "Lahore", "Islamabad"];
$scope.employee = [{ id: 101, name: 'Ali', Department: 'CS' }, { id: 102, name: 'AHMED', Department: 'MATHS' }, { id: 103, name: 'SALMAN', Department: 'CS' }];
});
</script>
Scopes in Anguls JS
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular.min.js"></script>
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body ng-app="myapp">
<div ng-controller="myctrl">
<h1 style="text-align:center"> {{Message}}</h1>
<select>
<option ng-repeat="x in city">{{x}}</option>
</select>
<table class="table table-responsive">
<thead>
<tr>
<th>id</th>
<th>Name</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="y in employee">
<td>{{y.id}}</td>
<td>{{y.name}}</td>
<td>{{y.Department}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script>
var app = angular.module("myapp", []);
app.controller("myctrl", function ($scope) {
$scope.Message = "Hello to Angular JS";
$scope.city = ["karachi", "Lahore", "Islamabad"];
$scope.employee = [{ id: 101, name: 'Ali', Department: 'CS' }, { id: 102, name: 'AHMED', Department: 'MATHS' }, { id: 103, name: 'SALMAN', Department: 'CS' }];
});
</script>
Monday 26 November 2018
Data Annotation in ASP NET MVC C# || Code First Approach Entity Framewor...
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
namespace WebApplication1.Models
{
[Table("tbl_user")]
public class User
{
[Key]
public int UserId { get; set; }
[Display(Name="Name")]
[Required(ErrorMessage="*")]
[StringLength(50,ErrorMessage="Name should contain Atmost 50 characters")]
[MinLength(3,ErrorMessage="Name should contain Atleast 3 characters")]
[RegularExpression("^[a-z -']+$",ErrorMessage="Invalid Name")]
public string Username { get; set; }
[Display(Name = "Email")]
[Required(ErrorMessage = "*")]
[StringLength(50, ErrorMessage = "Email should contain Atmost 50 characters")]
[MinLength(15, ErrorMessage = "Name should contain Atleast 15 characters")]
[RegularExpression(@"^([\w\.\-]+)@([\w\-]+)((\.(\w){2,3})+)$", ErrorMessage = "Invalid Email")]
public string UserEmail { get; set; }
[Display(Name = "Date of Birth")]
[Required(ErrorMessage = "*")]
[DataType(DataType.Date)]
public string Userdob { get; set; }
[Display(Name = "Password")]
[Required(ErrorMessage = "*")]
[StringLength(50, ErrorMessage = "Password should contain Atmost 50 characters")]
[MinLength(6, ErrorMessage = "Password should contain Atleast 6 characters")]
public string userpassword { get; set; }
[Display(Name = "Confrim Password")]
[Required(ErrorMessage = "*")]
[Compare("userpassword",ErrorMessage="Password Does not match...")]
public string usercpassword { get; set; }
}
}
More Directives in Angular JS || Basics of Angular JS || Part-3
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular.min.js"></script>
</head>
<body ng-app="">
<div ng-init="Checked=true;Checked1=true;Checked2=true;Checked3=true">
Header<input type="checkbox" ng-model="Checked" />
Section<input type="checkbox" ng-model="Checked1" />
Footer<input type="checkbox" ng-model="Checked2" />
Read Only<input type="checkbox" ng-model="Checked3" />
<header ng-if="Checked" style="background-color:#b6ff00;width:100%;height:200px; margin:0 auto;"></header>
<section ng-if="Checked1" style="background-color: #ffd800;width:100%;height:700px; margin:0 auto;">
<div class="container">
<input type="text" ng-readonly="Checked3" class="form-control" />
<br />
<input type="text" ng-disabled="Checked3" class="form-control" />
<br />
<div class="container">
<div ng-init="employee=[{ID:1001,name:'ali',Department:'IT'} ,{ID:1002,name:'AHMED',Department:'MANAGER'},{ID:1003,name:'BASIT',Department:'HR'},{ID:1004,name:'salman',Department:'Software'}]">
<table class="table table-responsive">
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
<th>DEPARTMENT</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in employee">
<td>{{x.ID}}</td>
<td>{{x.name}}</td>
<td>{{x.Department}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<footer ng-if="Checked2" style="background-color:#ff0000;width:100%;height:200px; margin:0 auto;"></footer>
</div>
</body>
</html>
Wednesday 21 November 2018
Encrypt a Column In database , Asp.net mvc Quiz Application part-6
Download the source code
Sql query to update table schema:
alter table tbl_categroy
add cat_encyptedstring nvarchar(max)
Encryption method:
public static string Encrypt(string toEncrypt, bool useHashing)
{
byte[] keyArray;
byte[] toEncryptArray = UTF8Encoding.UTF8.GetBytes(toEncrypt);
System.Configuration.AppSettingsReader settingsReader = new AppSettingsReader();
// Get the key from config file
string key = (string)settingsReader.GetValue("SecurityKey", typeof(String));
//System.Windows.Forms.MessageBox.Show(key);
if (useHashing)
{
MD5CryptoServiceProvider hashmd5 = new MD5CryptoServiceProvider();
keyArray = hashmd5.ComputeHash(UTF8Encoding.UTF8.GetBytes(key));
hashmd5.Clear();
}
else
keyArray = UTF8Encoding.UTF8.GetBytes(key);
TripleDESCryptoServiceProvider tdes = new TripleDESCryptoServiceProvider();
tdes.Key = keyArray;
tdes.Mode = CipherMode.ECB;
tdes.Padding = PaddingMode.PKCS7;
ICryptoTransform cTransform = tdes.CreateEncryptor();
byte[] resultArray = cTransform.TransformFinalBlock(toEncryptArray, 0, toEncryptArray.Length);
tdes.Clear();
return Convert.ToBase64String(resultArray, 0, resultArray.Length);
}
Monday 19 November 2018
Wednesday 14 November 2018
Friday 9 November 2018
Delete Data In ASP.NET MVC using AJAX and POP UP MODAL
CONTROLLER CODE
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApplication30.Models;
namespace WebApplication30.Controllers
{
public class HomeController : Controller
{
dbsalmanEntities db = new dbsalmanEntities();
public ActionResult Index()
{
return View(db.tbl_student.Where(x=>x.std_isactive==true).ToList());
}
public JsonResult DeleteEmployee(int EmployeeId)
{
bool result = false;
tbl_student s = db.tbl_student.Where(x => x.std_id == EmployeeId).SingleOrDefault();
if (s!=null)
{
s.std_isactive = false;
db.SaveChanges();
result = true;
}
return Json(result, JsonRequestBehavior.AllowGet);
}
//
public ActionResult About()
{
ViewBag.Message = "Your application description page.";
return View();
}
public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";
return View();
}
}
}
Index.cshtml CODE:
@model IEnumerable<WebApplication30.Models.tbl_student>
@{
ViewBag.Title = "Index";
}
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap.min.js"></script>
<h2>Delete Data</h2>
<div class="" style="width:40%;margin-top:2%">
<table class="table table-responsive">
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
<th>ADMISSION DATE</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr id="row_@item.std_id">
<td>@item.std_id</td>
<td>@item.std_name</td>
<td>@item.std_admissiondate</td>
<td><a class="btn btn-danger" onclick="ConfirmDelete(@item.std_id)">Delete <i class="glyphicon-trash"></i> </a></td>
</tr>
}
</tbody>
</table>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal">×</a>
<h3 class="modal-title">Delete Employee</h3>
</div>
<div class="modal-body">
<h4>Are you sure ? You want to delete this. </h4>
<div style="text-align:center;display:none" id="loaderDiv">
<img src="~/Content/img/2xkV.gif" style="height:200px;width:200px"/>
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a>
<a href="#" class="btn btn-success" onclick="DeleteEmployee()">Confirm</a>
</div>
</div>
</div>
</div>
<input type="hidden" id="hiddenEmployeeId" />
</div>
<script>
var ConfirmDelete = function (EmployeeId)
{
$("#hiddenEmployeeId").val(EmployeeId);
$("#myModal").modal('show');
}
var DeleteEmployee = function ()
{
$("#loaderDiv").show();
var empId = $("#hiddenEmployeeId").val();
$.ajax({
type: "POST",
url: "/Home/DeleteEmployee",
data: { EmployeeId: empId },
success: function (result) {
$("#loaderDiv").hide();
$("#myModal").modal("hide");
$("#row_" + empId).remove();
}
})
}
</script>
Wednesday 7 November 2018
Loading Progress Bar in asp.net mvc using ajax,jquery and Bootstrap Modal
@model WebApplication28.Models.tbl_employee
@{
ViewBag.Title = "Home Page";
}
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap.min.js"></script>
<style>
td{
padding:10px;
}
</style>
<div class="container">
<br />
<a href="#" class="btn btn-block btn-success" data-toggle="modal" data-target="#myModal">Add a new Record</a>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal">×</a>
<h3 class="modal-title">Add a new Record! </h3>
</div>
<div class="modal-body">
<form id="myForm">
<table >
<tr>
<td>Name: </td>
<td>@Html.TextBoxFor(x => x.emp_name, new {@class="form-control" }) </td>
</tr>
<tr>
<td>Contact: </td>
<td>@Html.TextBoxFor(x => x.emp_contact, new { @class = "form-control" }) </td>
</tr>
</table>
</form>
<div style="text-align:center;display:none" id="loaderDiv">
<img src="~/Content/img/tenor.gif" />
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a>
<input type="reset" value="Submit" class="btn btn-success" id="btnSubmit" />
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$("#btnSubmit").click(function () {
$("#loaderDiv").show();
var myformdata = $("#myForm").serialize();
$.ajax({
type: "POST",
url: "/Home/Index",
data: myformdata,
success: function ()
{
$("#loaderDiv").hide();
$("#myModal").modal("hide");
}
})
})
})
</script>
Monday 5 November 2018
Ajax with MVC (Insert data using ajax in asp.net mvc)
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function () {
$("#btnSubmit").click(function () {
$("#loaderDiv").show();
var data = $("#myForm").serialize();
$.ajax({
type: "POST",
url: "/Home/Index",
data: data,
success: function (response) {
$("#loaderDiv").hide();
alert("Question Successfully inserted......");
}
})
})
})
</script>
Subscribe to:
Posts (Atom)
Pass Dynamically Added Html Table Records List To Controller In Asp.net MVC
Controller Code: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using ...
