Thursday, 6 August 2015

Examples of all controls in mvc and angular js


Controller code:


using System;


using System.Collections.Generic;


using System.Data.Entity;


using System.Linq;


using System.Web;


using System.Web.Mvc;


using WebApplication1.Models;


namespace WebApplication1.Controllers






{


public class HomeController : Controller





{


// GET: Home


public ActionResult Index()






{


return View();






}


[OutputCache(Duration=0)]

public JsonResult Get()






{


using(Database1Entities obj=new Database1Entities())






{


return Json(obj.EMPs.ToList(), JsonRequestBehavior.AllowGet);






}


}


public JsonResult GetById(int EID)






{


using (Database1Entities obj = new Database1Entities())






{


return Json(obj.EMPs.Single(m=>m.EID==EID), JsonRequestBehavior.AllowGet);






}


}


public JsonResult GetC()






{


using (Database1Entities obj = new Database1Entities())






{


return Json(obj.COUNTRies.ToList(), JsonRequestBehavior.AllowGet);






}


}





public JsonResult GetS(int CID)






{


using (Database1Entities obj = new Database1Entities())






{


return Json(obj.STATEs.Where(m=>m.CID==CID).ToList(), JsonRequestBehavior.AllowGet);






}


}


public JsonResult GetH()






{


using (Database1Entities obj = new Database1Entities())






{


return Json(obj.HOBBies.ToList(), JsonRequestBehavior.AllowGet);






}


}


public JsonResult GetI()






{


using (Database1Entities obj = new Database1Entities())






{


return Json(obj.INTERESTs.ToList(), JsonRequestBehavior.AllowGet);






}


}


public JsonResult Gett(int id)






{


using (Database1Entities obj = new Database1Entities())






{


return Json(obj.STATEs.Single(m=>m.SID==id), JsonRequestBehavior.AllowGet);






}


}


public string save(EMP emp)






{


using (Database1Entities obj = new Database1Entities())






{


obj.Entry(emp).State = EntityState.Added;






obj.SaveChanges();


return "Data Saved";






}


}


public string update(EMP emp)






{


using (Database1Entities obj = new Database1Entities())






{


obj.Entry(emp).State = EntityState.Modified;






obj.SaveChanges();


return "Data Updated";






}


}


public string Delete(int EID)






{


using (Database1Entities obj = new Database1Entities())






{


obj.Entry(obj.EMPs.Single(m=>m.EID==EID)).State = EntityState.Deleted;






obj.SaveChanges();


return "Data Deleted";






}


}


}


}

View code :



@{


Layout = null;






}


<!DOCTYPE html>


<html>

<head>


<link href="~/bootstrap-3.3.5-dist/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" />


<link href="~/bootstrap-3.3.5-dist/bootstrap-3.3.5-dist/css/bootstrap-theme.min.css" rel="stylesheet" />


<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>


<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>


<script src="~/Scripts/angular.min.js"></script>


<script src="~/bootstrap-3.3.5-dist/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>


<style>


.sp {

padding-top:3px;






}


</style>


<meta name="viewport" content="width=device-width" />


<title></title>

</head>

<body>


<div class="container" ng-app="app" ng-controller="ctr">


<div class="row sp">


<div class="col-lg-3">EID</div>


<div class="col-lg-9"><input type="text" id="tb" ng-model="EID" /></div>


</div>


<div class="row sp">


<div class="col-lg-3">NAME</div>


<div class="col-lg-9"><input type="text" ng-model="NAME" /></div>


</div>


<div class="row sp">


<div class="col-lg-3">ADDRESS</div>


<div class="col-lg-9"><textarea ng-model="ADDRESS" cols="22" ></textarea></div>


</div>


<div class="row sp">


<div class="col-lg-3">PASSWORD</div>


<div class="col-lg-9"><input type="password" ng-model="PASSWORD" /></div>


</div>


<div class="row sp">


<div class="col-lg-3">GENDER</div>


<div class="col-lg-9">


<input type="radio" ng-model="GENDER" value="Male" name="rb" />Male

<input type="radio" ng-model="GENDER" value="Female" name="rb" />Female

</div>


</div>


<div class="row sp">


<div class="col-lg-3">DOB</div>


<div class="col-lg-9"><input type="text" ng-model="DOB" id="DB" /></div>


</div>


<div class="row sp">


<div class="col-lg-3">SALARY</div>


<div class="col-lg-9"><input type="text" ng-model="SALARY" /></div>


</div>


<div class="row sp">


<div class="col-lg-3">HOBBY</div>


<div class="col-lg-9" style="list-style:none" id="dv">


<li ng-repeat="cb in listh">


<input type="checkbox" value={{cb.HID}}>{{cb.HNAME}}

</li>


</div>


</div>


<div class="row sp">


<div class="col-lg-3">INTEREST</div>


<div class="col-lg-9">


<select id="ddl" size="3" style="width:170px" multiple="multiple">


<option ng-repeat="ib in listi" value={{ib.IID}}>{{ib.INAME}}</option>


</select>


</div>


</div>


<div class="row sp">


<div class="col-lg-3">COUNTRY</div>


<div class="col-lg-9">


<select style="width:170px" id="ddl1">


<option>Select</option>


<option ng-repeat="ic in listc" value={{ic.CID}}>{{ic.CNAME}}</option>


</select>


</div>


</div>


<div class="row sp">


<div class="col-lg-3">STATE</div>


<div class="col-lg-9">


<select style="width:170px" id="ddl2">


<option>Select</option>


<option ng-repeat="ic in lists" value={{ic.SID}}>{{ic.SNAME}}</option>


</select>


</div>


</div>


<div class="row sp">


<div class="col-lg-3"></div>


<div class="col-lg-9">


<input type="button" ng-click="save()" value="Save" class="btn-primary" />&nbsp;


<input type="button" ng-click="update()" value="Update" class="btn-primary" />&nbsp;


<input type="button" ng-click="reset()" value="Reset" class="btn-primary" />


</div>


</div>


<div class="row sp table-responsive">


<table class="table table-bordered table-hover table-striped">


<thead class="bg-primary">


<tr><th>EID</th><th>NAME</th><th>GENDER</th><th>UPDATE</th><th>DELETE</th></tr>


</thead>


<tbody >


<tr ng-repeat="em in list">


<td>{{em.EID}}</td>


<td>{{em.NAME}}</td>


<td>{{em.GENDER}}</td>


<td><a href="#" ng-click="edit(em.EID)">Edit</a></td>


<td><a href="#" ng-click="del(em.EID)">Delete</a></td>


</tr>


</tbody>


</table>


</div>


</div>

</body>

</html>

<script type="text/javascript">








angular.module("app", []).controller("ctr", function ($scope, $http) {

var m;






m = $http({


url: 'Home/GetH',

method:'Get'





});


m.then(function (d) {






$scope.listh = d.data;


});


m = $http({


url: 'Home/GetI',

method: 'Get'





});


m.then(function (d) {






$scope.listi = d.data;


});


m = $http({


url: 'Home/GetC',

method: 'Get'





});


m.then(function (d) {






$scope.listc = d.data;


});


$scope.y=function(id)






{





m = $http({


url: 'Home/GetS',






data:JSON.stringify({CID:id}),


method: 'post'





});


m.then(function (d) {






$scope.lists = d.data;


});





}


$scope.save = function ()






{


var s = "";

$('#dv li').find(':checkbox').each(function (i, j) {

if($(j).is(':checked'))

s+=$(j).val()+",";






});


var t = "";

$('#ddl>option').each(function (i, j) {

if ($(j).is(':selected'))

t += $(j).val() + ",";






});








m = $http({


url: 'Home/save',

data: JSON.stringify({ EID: $scope.EID, NAME: $scope.NAME, ADDRESS: $scope.ADDRESS, PASSWORD: $scope.PASSWORD, GENDER: $scope.GENDER, DOB: $scope.DOB, SALARY: $scope.SALARY, HOBBY: s.substr(0, s.lastIndexOf(',')), INTEREST: t.substr(0, t.lastIndexOf(',')), CID: $('#ddl1').val(), SID: $('#ddl2').val() }),

method: 'post'





});


m.then(function (d) {






alert(d.data);


z();


});


}


function z()






{


m = $http({


url: 'Home/Get',

method: 'Get'





});


m.then(function (d) {






$scope.list = d.data;


});


} z();


$scope.edit = function (n)






{


m = $http({


url: 'Home/GetById',






data: JSON.stringify({ EID: n }),


method: 'post'





});


m.then(function (d) {






$scope.EID = d.data.EID;


$scope.NAME = d.data.NAME;


$scope.ADDRESS = d.data.ADDRESS;


$scope.PASSWORD = d.data.PASSWORD;


$scope.GENDER = d.data.GENDER;


$scope.SALARY = d.data.SALARY;


var u = d.data.HOBBY.split(',');

$('#dv li').find(':checkbox').each(function (i, j) {

for (var v = 0; v < u.length; v++)

if ($(j).val() == u[v])






{


$(j).prop("checked", true);

break;






}





});


var w = d.data.INTEREST.split(',');

$('#ddl>option').each(function (i, j) {

for (var v = 0; v < w.length; v++)

if ($(j).val() == w[v]) {

$(j).prop("selected", true);

break;






}


});


$('#ddl1>option').each(function (i, j) {

if ($(j).val() == d.data.CID)






{


$(j).prop("selected", true);






$scope.y(d.data.CID);


}











});


n = $http({


url: 'Home/Gett',






data: JSON.stringify({ id: d.data.SID }),


method: 'post'





});


n.then(function (d) {

$('#ddl2 :selected').text(d.data.SNAME);






});


var d = new Date(parseInt(d.data.DOB.slice(6, -2)));

$scope.DOB = '' + (1 + d.getMonth()) + '/' + d.getDate() + '/' + d.getFullYear().toString().slice(-2);






});


}


$scope.update = function ()






{


var s = "";

$('#dv li').find(':checkbox').each(function (i, j) {

if ($(j).is(':checked'))

s += $(j).val() + ",";






});


var t = "";

$('#ddl>option').each(function (i, j) {

if ($(j).is(':selected'))

t += $(j).val() + ",";






});


 


m = $http({


url: 'Home/update',

data: JSON.stringify({ EID: $scope.EID, NAME: $scope.NAME, ADDRESS: $scope.ADDRESS, PASSWORD: $scope.PASSWORD, GENDER: $scope.GENDER, DOB: $scope.DOB, SALARY: $scope.SALARY, HOBBY: s.substr(0, s.lastIndexOf(',')), INTEREST: t.substr(0, t.lastIndexOf(',')), CID: $('#ddl1').val(), SID: $('#ddl2').val() }),

method: 'post'





});


m.then(function (d) {






alert(d.data);


z();





});


}


$scope.del = function (n)






{


if (confirm('Do you want to delete it ?'))






{


m = $http({


url: 'Home/Delete',






data: JSON.stringify({ EID: n }),


method: 'post'





});


m.then(function (d) {






alert(d.data);


z();


});


}


}


$('#ddl1').change(function () {

$scope.y($(this).val());






});


});








</script>

No comments:

Post a Comment