Skip to main content

Featured post

XM Cloud content sync from prod to uat or UAT to prod step by step

When working with Sitecore, it’s common to need content synchronization across environments. Today, I’ll walk you through the steps to sync content from Production to UAT/TEST and vice versa. Steps to Follow 1. Set Up Your Workspace Create a folder on your computer where you will manage the script files and exported data. Open the folder path in PowerShell to begin scripting. We need to run some scripts in PowerShell to update the folder with the basic requirements for syncing content. PS C:\Soft\ContentSync> dotnet new tool-manifest PS C:\Soft\ContentSync> dotnet nuget add source -n Sitecore https://nuget.sitecore.com/resources/v3/index.json PS C:\Soft\ContentSync> dotnet tool install Sitecore.CLI PS C:\Soft\ContentSync> dotnet sitecore cloud login If the above error occurs, you will need to run a different command to resolve the issue. PS C:\Soft\ContentSync> dotnet sitecore init now, Again run above command to open and authenticate with XM Cloud. It will be there a...
Post a Comment

insert,delete,update with angularjs and asp.net mvc

CRUD operation with Angularjs and asp.net mvc.

Some of the below point which will discuss  .

·        Create Database & Table
·        Create MVC Project using Visual studio
·        Add Web Api Controller
·        Use AngularJS to Consume WebAPI
·        Perform the CRUD Operation

CREATE TABLE [dbo].[Student](  
    [StudentID] [int] IDENTITY(1,1) NOT NULL,  
    [Name] [varchar](50) NULL,  
    [Email] [varchar](500) NULL,  
    [Class] [varchar](50) NULL,  
    [EnrollYear] [varchar](50) NULL,  
    [City] [varchar](50) NULL,  
 [Country] [varchar](50) NULL
) 



Now open Visual studio create project using mvc . Please see below image .








 Now Going to add API controller . You may see the code which is auto generated

 Select Template API Controller with entity framework.

 See the below code which is generated using api controller.
using System;  

using System.Collections.Generic;  
using System.Data;  
using System.Data.Entity;  
using System.Data.Entity.Infrastructure;  
using System.Linq;  
using System.Net;  
using System.Net.Http;  
using System.Web;  
using System.Web.Http;  
using MVC4_WEBApi_Angular_CRUD.Models;  
  
namespace MVC4_WEBApi_Angular_CRUD.Controllers  
{  
    public class StudentsAPIController : ApiController  
    {  
        private SchoolManagementEntities db = new SchoolManagementEntities();  
  
        // GET api/StudentsAPI  
        public IEnumerable<Student> GetStudents()  
        {  
            return db.Student.AsEnumerable();  
        }  
  
        // GET api/StudentsAPI/5  
        public Student GetStudent(int id)  
        {  
            Student student = db.Student.Find(id);  
            if (student == null)  
            {  
                throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.NotFound));  
            }  
  
            return student;  
        }  
   // PUT api/StudentsAPI/5  
        public HttpResponseMessage PutStudent(int id, Student student)  
        {  
            if (ModelState.IsValid && id == student.StudentID)  
            {  
                db.Entry(student).State = EntityState.Modified;  
  
                try  
                {  
                    db.SaveChanges();  
                }  
                catch (DbUpdateConcurrencyException)  
                {  
                    return Request.CreateResponse(HttpStatusCode.NotFound);  
                }  
  
                return Request.CreateResponse(HttpStatusCode.OK);  
            }  
            else  
            {  
                return Request.CreateResponse(HttpStatusCode.BadRequest);  
            }  
        }  
  
        // POST api/StudentsAPI  
        public HttpResponseMessage PostStudent(Student student)  
        {  
            if (ModelState.IsValid)  
            {  
                db.Student.Add(student);  
                db.SaveChanges();  
  
                HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Created, student);  
                response.Headers.Location = new Uri(Url.Link("DefaultApi", new { id = student.StudentID }));  
                return response;  
            }  
            else  
            {  
                return Request.CreateResponse(HttpStatusCode.BadRequest);  
            }  
        }  
  
        // DELETE api/StudentsAPI/5  
        public HttpResponseMessage DeleteStudent(int id)  
        {  
            Student student = db.Student.Find(id);  
            if (student == null)  
            {  
                return Request.CreateResponse(HttpStatusCode.NotFound);  
            }  
  
            db.Student.Remove(student);  
  
            try  
            {  
                db.SaveChanges();  
            }  
            catch (DbUpdateConcurrencyException)  
            {  
                return Request.CreateResponse(HttpStatusCode.NotFound);  
            }  
  
            return Request.CreateResponse(HttpStatusCode.OK, student);  
        }  
  
        protected override void Dispose(bool disposing)  
        {  
            db.Dispose();  
            base.Dispose(disposing);  
        }  
    }  
}  


 Now adding another empty controller
 using System;  

using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.Mvc;  
  
namespace MVC4_WEBApi_Angular_CRUD.Controllers  
{  
    public class StudentController : Controller  
    {  
        //  
        // GET: /Student/  
  
        public ActionResult Index()  
        {  
            return View();  
        }  
    }  
}


Now adding AngularJS Library  in project. See the below process.



After addition of angularjs library create some jquery file in your project  see the below code which i added some code in different file of js.

1. Create Module js and  added below code.

var app;  

(function () {  
    app = angular.module("crudModule", []);  

})()  

2. Created Service JS and added below code.

app.service('CRUD_OperService', function ($http) {  
  
    //Create new record  
    this.post = function (Student) {        
        var request = $http({  
            method: "post",  
            url: "/api/StudentsAPI",  
            data: Student  
        });  
        return request;  
    }  
  
    //Get Single Records  
    this.get = function (StudentID) {  
        return $http.get("/api/StudentsAPI/" + StudentID);  
    }  
  
    //Get All Student  
    this.getAllStudent = function () {  
        return $http.get("/api/StudentsAPI");  
    }  
  
    //Update the Record  
    this.put = function (StudentID, Student) {  
        var request = $http({  
            method: "put",  
            url: "/api/StudentsAPI/" + StudentID,  
            data: Student  
        });  
        return request;  
    }  
  
    //Delete the Record  
    this.delete = function (StudentID) {  
        var request = $http({  
            method: "delete",  
            url: "/api/StudentsAPI/" + StudentID  
        });  
        return request;  
    }  
});  

3. Now Added Controller js see below code of controller

Controller.js


app.controller('CRUD_OperController', function ($scope, CRUD_OperService) {  
    $scope.OperType = 1;  
    //1 Mean New Entry  
  
    GetAllRecords();  
    //To Get All Records  
    function GetAllRecords() {  
        var promiseGet = CRUD_OperService.getAllStudent();  
        promiseGet.then(function (pl) { $scope.Students = pl.data },  
              function (errorPl) {  
                  $log.error('Some Error in Getting Records.', errorPl);  
              });  
    }  
  
    //To Clear all input controls.  
    function ClearModels() {  
        $scope.OperType = 1;  
        $scope.StudentID = "";  
        $scope.Name = "";  
        $scope.Email = "";  
        $scope.Class = "";  
        $scope.EnrollYear = "";  
        $scope.City = "";  
        $scope.Country = "";  
    }  
  
   //To Create new record and Edit an existing Record.  
    $scope.save = function () {  
        var Student = {  
            Name: $scope.Name,  
            Email: $scope.Email,  
            Class: $scope.Class,  
            EnrollYear: $scope.EnrollYear,  
            City: $scope.City,  
            Country: $scope.Country  
        };  
        if ($scope.OperType === 1) {  
            var promisePost = CRUD_OperService.post(Student);  
            promisePost.then(function (pl) {  
                $scope.StudentID = pl.data.StudentID;  
                GetAllRecords();  
                ClearModels();  
            }, function (err) {  
                console.log("Err" + err);  
            });  
        } else {  
            //Edit the record                
            Student.StudentID = $scope.StudentID;  
            var promisePut = CRUD_OperService.put($scope.StudentID, Student);  
            promisePut.then(function (pl) {  
                $scope.Message = "Student Updated Successfuly";  
                GetAllRecords();  
                ClearModels();  
            }, function (err) {  
                console.log("Err" + err);  
            });  
        }  
    };  
  
    //To Delete Record  
    $scope.delete = function (Student) {  
        var promiseDelete = CRUD_OperService.delete(Student.StudentID);  
        promiseDelete.then(function (pl) {  
            $scope.Message = "Student Deleted Successfuly";  
            GetAllRecords();  
            ClearModels();  
        }, function (err) {  
            console.log("Err" + err);  
        });  
    }  
  
    //To Get Student Detail on the Base of Student ID  
    $scope.get = function (Student) {  
        var promiseGetSingle = CRUD_OperService.get(Student.StudentID);  
  
        promiseGetSingle.then(function (pl) {  
            var res = pl.data;  
            $scope.StudentID = res.StudentID;  
            $scope.Name = res.Name;  
            $scope.Email = res.Email;  
            $scope.Class = res.Class;  
            $scope.EnrollYear = res.EnrollYear;  
            $scope.City = res.City;  
            $scope.Country = res.Country;  
  
            $scope.OperType = 0;  
        },  
                  function (errorPl) {  
                      console.log('Some Error in Getting Details', errorPl);  
                  });  
    }  
  
    //To Clear all Inputs controls value.  
    $scope.clear = function () {  
        $scope.OperType = 1;  
        $scope.StudentID = "";  
        $scope.Name = "";  
        $scope.Email = "";  
        $scope.Class = "";  
        $scope.EnrollYear = "";  
        $scope.City = "";  
        $scope.Country = "";  
    }  
  
});  


 Now add view of by right clicking on action method inside controller.


 See the view which created by above process.

<html data-ng-app="crudModule">  

@{  
    ViewBag.Title = "Manage Student Information using AngularJs, WEB API & MVC4";  
}  
  
<body>  
    <table id="tblContainer" data-ng-controller="CRUD_OperController">  
        <tr>  
            <td>  
                <table style="border: solid 2px Green; padding: 5px;">  
                    <tr style="height: 30px; background-color: skyblue; color: maroon;">  
                        <th></th>  
                        <th>ID</th>  
                        <th>Name</th>  
                        <th>Email</th>  
                        <th>Class</th>  
                        <th>Year</th>  
                        <th>City</th>  
                        <th>Country</th>  
                        <th></th>  
                        <th></th>  
                    </tr>  
                    <tbody data-ng-repeat="stud in Students">  
                        <tr>  
                            <td></td>  
                            <td><span>{{stud.StudentID}}</span></td>  
                            <td><span>{{stud.Name}}</span></td>  
                            <td><span>{{stud.Email}}</span></td>  
                            <td><span>{{stud.Class}}</span></td>  
                            <td><span>{{stud.EnrollYear}}</span></td>  
                            <td><span>{{stud.City}}</span></td>  
                            <td><span>{{stud.Country}}</span></td>  
                            <td>  
                                <input type="button" id="Edit" value="Edit" data-ng-click="get(stud)" /></td>  
  
                            <td>  
                                <input type="button" id="Delete" value="Delete" data-ng-click="delete(stud)" /></td>  
                        </tr>  
                    </tbody>  
                </table>  
  
            </td>  
        </tr>  
        <tr>  
            <td>  
                <div style="color: red;">{{Message}}</div>  
                <table style="border: solid 4px Red; padding: 2px;">  
                    <tr>  
                        <td></td>  
                        <td>  
                            <span>Student ID</span>  
                        </td>  
                        <td>  
                            <input type="text" id="StudentID" readonly="readonly" data-ng-model="StudentID" />  
                        </td>  
                    </tr>  
                    <tr>  
                        <td></td>  
                        <td>  
                            <span>Student Name</span>  
                        </td>  
                        <td>  
                            <input type="text" id="sName" required data-ng-model="Name" />  
                        </td>  
                    </tr>  
                    <tr>  
                        <td></td>  
                        <td>  
                            <span>Email</span>  
                        </td>  
                        <td>  
                            <input type="text" id="sEmail" required data-ng-model="Email" />  
                        </td>  
                    </tr>  
                    <tr>  
                        <td></td>  
                        <td>  
                            <span>Class</span>  
                        </td>  
                        <td>  
                            <input type="text" id="sClass" required data-ng-model="Class" />  
                        </td>  
                    </tr>  
                    <tr>  
                        <td></td>  
                        <td>  
                            <span>Enrollement Year</span>  
                        </td>  
                        <td>  
                            <input type="text" id="sEnrollYear" required data-ng-model="EnrollYear" />  
                        </td>  
                    </tr>  
                    <tr>  
                        <td></td>  
                        <td>  
                            <span>City</span>  
                        </td>  
                        <td>  
                            <input type="text" id="sCity" required data-ng-model="City" />  
                        </td>  
                    </tr>  
                    <tr>  
                        <td></td>  
                        <td>  
                            <span>Country</span>  
                        </td>  
                        <td>  
                            <input type="text" id="sCountry" required data-ng-model="Country" />  
                        </td>  
                    </tr>  
                    <tr>  
                        <td></td>  
                        <td></td>  
                        <td>  
                            <input type="button" id="save" value="Save" data-ng-click="save()" />  
  
                            <input type="button" id="Clear" value="Clear" data-ng-click="clear()" />  
                        </td>  
                    </tr>  
                </table>  
  
            </td>  
        </tr>  
  
    </table>  
</body>  
</html>  
  
<script src="~/Scripts/angular.js"></script>  
<script src="~/Scripts/angular-route.js"></script>  
<script src="~/Scripts/MyAngularjsScripts/Module.js"></script>  
<script src="~/Scripts/MyAngularjsScripts/Service.js"></script>  
<script src="~/Scripts/MyAngularjsScripts/Controller.js"></script>  




Labels:

Comments

Post a Comment

Popular posts from this blog

How to create properties and use it with Generic class

Here, I have created properties in GetDetails class and use to get large amount of data which comes from database . see below code i have added lots of data in dataset make loop to add all data in list by help of properties . This is best to have good programmer. Follow this type of technique to get data. List<Details > Details = new List<Details >();          if (Ds.Tables[0].Rows.Count > 0)         {             foreach (DataRow dtrow in Ds.Tables[0].Rows)             {                 Details user = new GetDetails();                 user.RowNumber = dtrow["RowNumber"].ToString();                 user.Date = dtrow["Date"].ToString();                 user.FromTime = dtrow["FromTim...
Post a Comment
Read more

What is object in C#

Object  : - Object is a instance of class. We can create more than one object a class according to requirements. Suppose we have a class name employee then create obect name of class . In the previous section we have discuss Office Owner will access and use all the Cabinof the Office and its Items. Similarly, to access all Class Method and Variable we use Objects. Example  : Class Employee {  --------- ---------- } Employee emp = new Employee(); here emp is an object of employee Class.
Post a Comment
Read more

Homework 1.4 MongoDB for DBAs

MongoDB Homework 1.4 for DBAs. Ans is given.
Post a Comment
Read more

How to use connection string in asp.net

Here, You may learn to create connection string in asp.net . Write this code into your code behind file. SqlConnection con = new SqlConnection(ConfigurationManager.AppSettings["ConnectionString"].ToString()); Write thi code into your web config file. <appSettings>     <add key="ConnectionString" value="data source=shashi-pc; initial catalog=db_institute_newchanges;uid=sa;pwd=12345;" /> </appSettings>   
Post a Comment
Read more

Fileupload using AngularJS in asp.net c#

Fileupload using AngularJS in asp.net c# AngularJS built-in ng-model directive. I added an attribute called ng-files in to the file input element. Now, I need to  create a directive in the controller matching with the attribute  The attribute has a function named getTheFiles() with a parameter $files . I’ll initialize the parameter $files in my directive and later call the function getTheFiles() using the controller’s scope, along with $files parameter. <!DOCTYPE html> <html> <head>   <title>AngularJS File Upoad Example with $http and FormData</title>   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script> </head> <body ng-app="fupApp">     <div ng-controller="fupController">         <input type="file" id="file1" name="file" multiple        ...
Post a Comment
Read more