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

CRUD operation 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

Sitecore pipeline implementation

 Sitecore pipeline implementation Sitecore pipelines are a key concept in Sitecore architecture, allowing developers to add custom logic and process data at specific points during a request. Here's a general guide for implementing Sitecore pipelines: 1.        Create a custom class that inherits from the Sitecore.Pipelines.PipelineProcessor class. 2.        Override the Process method to add your custom logic. 3.        Register the pipeline processor in the Sitecore configuration file (usually the Web.config or Sitecore.config file). 4.        Determine the appropriate point in the pipeline to insert your custom logic. Sitecore provides many predefined pipelines, such as the httpRequestBegin pipeline, that you can use to insert your custom logic. 5.        Add a new node to the pipeline in the configuration file, specifying the cla...
Post a Comment
Read more

How to send mail in c# asp.net

Here, I have created method to send mail. Just call this method by passing suitable value in method . It will deliver at you send mail id. apply your email id and password to send mail.      public static string SendMail( string from= "" , string to= "" , string cc= "" , string bcc= "" , string subject= "" , string body= "" , string pass= "" , string host= "" )     {         string strret = "" ;         try         {             string username = from.ToString();             System.Net.Mail. MailMessage MyMailMessage = new System.Net.Mail. MailMessage ();             MyMailMessage.Subject = subject;          ...
Post a Comment
Read more

What is System hacking ?

  System hacking refers to the practice of gaining unauthorized access to a computer system or network in order to steal or manipulate data, disrupt operations, or cause other types of damage. System hacking can be carried out for a variety of reasons, including financial gain, revenge, or political or ideological motives. System hacking techniques can vary widely, but some common methods include: Password cracking: This involves using software tools or brute-force methods to guess or crack passwords in order to gain access to a system. Malware: This involves using malicious software such as viruses, worms, or Trojan horses to gain unauthorized access to a system or network, or to cause damage or steal data. Social engineering: This involves using psychological manipulation techniques to trick people into divulging sensitive information or performing actions that compromise system security. Network scanning: This involves using software tools to scan a network for vulnerabiliti...
Post a Comment
Read more

Field Types in sitecore

  Sitecore is a popular Content Management System (CMS) that uses a flexible and extensible data model called the Sitecore Data Model (SDM) to manage and organize content. The SDM provides a way to define and organize content types in a structured way, and it includes several different types of fields that can be used to store and manage data. Here are some of the most common field types in Sitecore: Single-Line Text - This field type is used for simple text inputs such as a name or a title. Rich Text - This field type is used to enter formatted text with options for adding links, images, and other multimedia. Multi-Line Text - This field type is used for longer blocks of text, such as a description or a summary. Number - This field type is used to store numeric values. Date - This field type is used to store a date. Checkbox - This field type is used for boolean values, such as yes or no. Droplist - This field type is used for a list of predefined options, where the user can s...
Post a Comment
Read more

Sitecore Personalization and Experience Optimization

 Sitecore Personalization and Experience Optimization Sitecore Personalization: Sitecore Personalization is the process of delivering targeted and personalized content to individual users based on their behavior, preferences, and demographic information. This is achieved by using Sitecore's personalization features to create targeted segments and rules based on user behavior and personal data, and then delivering customized content to those users. For example, a clothing retailer might use Sitecore Personalization to show different product recommendations to users based on their previous purchases, the weather in their location, or their browsing behavior. Sitecore Experience Optimization: Sitecore Experience Optimization is the process of using data and analytics to optimize the user experience on a website. This is achieved by using Sitecore's optimization features to test and evaluate different variations of content, layouts, and designs, and then using that data to improve ...
Post a Comment
Read more