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

AngularJS best practice with WebAPI and MVC

Angular-Js with MVC + Web API
Pagination + Sorting with Angular JS

 You may also check : Insert,delete,update,select using angularjs with mvc

Here in this tutorial, we will try to show, How to create ASP.Net MVC project using Angular JS, Create Database in Sql Server and Create WebApi.
I wil going to describe in proper way to Binding the Data in Angular Grid. Here, I am using Entity framework 5.0 .

Step 1:- Create ASP.Net MVC Project with VS2013
       
           1. Open your VS IDE 2013
           2. Go to file menu and select New  
           3. Click on create Project
           4. Asp.Net Web Application
               Select MVC template, Click on Add button, Give name as DemoApp.

               Now your MVC project is ready to go for next process.

Step 2:- Create Database and Demo Table Student with some data.

1.    Open your Sql Server
2.    Create a database name as DemoDb by using command Create database DemoDb
3.     Now your database is ready.
4.    Create a table into database by clicking on table folder from DemoDb(Database).

To create table use the following below code.

CREATE TABLE [dbo].[Student](
 [StudentId] [nvarchar](10) NOT NULL,
 [FirstName] [nvarchar](50) NULL,
 [LastName] [nvarchar](50) NULL,
 [Age] [int] NULL,
 [Gender] [nvarchar](50) NULL,
 [Batch] [nvarchar](50) NULL,
 [Address] [nvarchar](50) NULL,
 [Class] [nvarchar](50) NULL,
 [School] [nvarchar](50) NULL,
 [Domicile] [nvarchar](50) NULL,

) 






To insert some data in table use the following below code.


INSERT INTO [dbo].[Student]
           ([StudentId]
           ,[FirstName]
           ,[LastName]
           ,[Age]
           ,[Gender]
           ,[Batch]
           ,[Address]
           ,[Class]
           ,[School]
           ,[Domicile])
     VALUES
           (1,
           'Rahul','Patankar',
           24,'Male','27','Sambhajinagar','10','Godavari Public School','Sambhajinagar'),
     (2,
           'Dnyanesh','Kunde',
           24,'Male','15','Hyderabad','10','Hyderabad Public School','Hyderabad'),
     (3,
           'Shailesh','Wagh',
           24,'Male','10','Sambhajinagar','10','Godavari Public School','Sambhajinagar'),
     (4,
           'Arjun','Shinde',
           26,'Male','17','Sambhajinagar','10','A.K Waghmare','Sambhajinagar'),
     (5,
           'Sayali','Wavikar',
           23,'Female','27','Sambhajinagar','10','Godavari Public School','Sambhajinagar'),
     (6,
           'Sumeet','Chautmal',
           24,'Male','22','Sambhajinagar','10','Godavari Public School','Sambhajinagar')
         
GO



Step 3:- Add Entity Data Model into your project 

1. Select and Right click on Model folder
2. Select  Add
3. Go to New Item
4. In search box, enter Entity Data Model and add it by giving Name as StudentModel.
5. After clicking on add button you able to see one window, Now click on EF designer from   database and press Next.
6. Now you need to create new database connection and fill the information reqd. by clicking on New Db connection.
7. Click on test connection.
   

Step 4:- Creating Web Api project in the same solution name as DemoApp

1. Right Click on Solution Name
2. Click on Add
3. New Project
4. Select Asp.Net Web app
5. Create Name as DemoApp.Api

Select Web API Template and Click on OK.

Here, I am binding the data from Our Database DemoDb with Angular Grid into our MVC Application DemoApp by using Web Api.
So it is required to write some logic to interact with our Database DemoDb and Performing reqd. operations.

Add the reference of DemoApp MVC projects ref.to DemoApp.Api.
By Right Clicking on refereces => add ref. => select reqd. project =>click on Ok.

Note:- Plese Copy the Connection string from your DemoApp web.config file and Paste it into web.config of DemoApp.Api Project.

So, to implement this follow below steps.
                     1. Right Click on Controller Folder into DemoApp.Api project
                     2. Click on Add Controller
                     3. Select Empty Controller and click on add.
                     4. Give name as DemoApiController. Just Copy and Paste the below Code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;

namespace DemoApp.Api.Controllers
{

    [RoutePrefix("api/DemoApi")]
    public class DemoApiController : ApiController
    {
        Private DemoDbEntities db = new DemoDbEntities();
        [Route("GetStudents")]
        public IEnumerable GetStudents()
        {
            return db.Students.AsEnumerable();
        }
        [Route("GetStudentsAsc")]
        public IEnumerable GetStudentsAsc()
        {
            return db.Students.AsEnumerable().OrderBy(x=>x.StudentId);
        }
        [Route("GetStudentsDesc")]
        public IEnumerable GetStudentsDesc()
        {
            return db.Students.AsEnumerable().OrderByDescending(x => x.StudentId);
        } 
    }
}

config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));

Step 5 :- Using Web Api (DempApp.Api) into Web Application (DemoApp).

Now move to DemoApp( MVC web app project),
              1. In DemoApp, Right click on Controller Folder
              2. Add Controller
              3. Select Empty Controller Give name as DemoController
              4. Your controller Should look like below :-

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace DemoApp.Controllers
{
    public class DemoController : Controller
    {
        // GET: Demo
        public ActionResult Index()
        {
            return View();
        }
    }
}
  5. Right Click on Index Action and Add Empty View.
               6. Right Click on Scripts folder into DemoApp
               7. Add new Javascript file Give name as App.js and add below code into it.
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pagination']);
app.controller('MainCtrl', [
'$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
    var paginationOptions = {
        pageNumber: 1,
        pageSize: 10,
        sort: null
    };
    $scope.gridOptions = {
        paginationPageSizes: [10, 20, 30,40,50,60,70,80,90],
        paginationPageSize: 10,
        useExternalPagination: true,
        useExternalSorting: true,
        columnDefs: [
        { name: 'StudentId' },
        { name: 'FirstName', enableSorting: false },
        { name: 'LastName', enableSorting: false },
        { name: 'Age', enableSorting: false },
        { name: 'Gender', enableSorting: false },
        { name: 'Batch', enableSorting: false },
        { name: 'Address', enableSorting: false },
        { name: 'Class', enableSorting: false },
        { name: 'School', enableSorting: false },
        { name: 'Domicile', enableSorting: false },
        ],
        onRegisterApi: function (gridApi) {
            $scope.gridApi = gridApi;
            $scope.gridApi.core.on.sortChanged($scope, function (grid, sortColumns) {
                if (sortColumns.length == 0) {
                    paginationOptions.sort = null;
                } else {
                    paginationOptions.sort = sortColumns[0].sort.direction;
                }
                getPage();
            });
            gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
                paginationOptions.pageNumber = newPage;
                paginationOptions.pageSize = pageSize;
                getPage();
            });
        }
    };
    var getPage = function () {
        var url;
        switch (paginationOptions.sort) {
            case uiGridConstants.ASC:
//URL of your Web Api running Path.
                url = 'http://localhost:57868/api/DemoApi/GetStudentsAsc';
                break;
            case uiGridConstants.DESC:
//URL of your Web Api running Path.
                url = 'http://localhost:57868/api/DemoApi/GetStudentsDesc';
                break;
            default:
//URL of your Web Api running Path.
                url = 'http://localhost:57868/api/DemoApi/GetStudents';
                break;
        }

        $http.get(url)
        .success(function (data) {
            $scope.gridOptions.totalItems = 100;
            var firstRow = (paginationOptions.pageNumber - 1) * paginationOptions.pageSize;
            $scope.gridOptions.data = data.slice(firstRow, firstRow + paginationOptions.pageSize);
        });
    };

    getPage();
}
]);

After adding the Script as App.js into your scripts folder, add the below code into your view i.e. Index.cshtml.








  


              


        

            

        

  





Now everything is done.
Just need to do some settings as below.

1. Set Multiple project Startup to start WebApp and WebApi project parallel.

    1. Now Right click on solution
    2. Set as startup project
    3. Click on button multiple project
    4. Choose both project as start.
2. To Give Cross Origin Resource Sharing (CORS)




<system.webServer>


<httpprotocol>


      <customheaders>


        <add name="Access-Control-Allow-Origin" value="*">


        <add name="Access-Control-Allow-Headers" value="Content-Type">


        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS">


      </add></add></add></customheaders>


    </httpprotocol>


</system.webServer>
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

Homework 2.2 MongoDB for .Net Development

Download JSON data from homework 2.2 MongoDB of .Net development and use it to restore in MongoDB Database. Dataset contains four scores which each has two hundred students. First confirm that you have restored data correctly. Use below command to check your restored data. Data count should be 800. use students db.grades.count() Now , Lets find student who holds 101st across among grades. See the below query to find. db.grades.find().sort( { 'score' : -1 } ).skip( 100 ).limit( 1 ) Correct result is given below by executing the above query. { "_id" : ObjectId("50906d7fa3c412bb040eb709"), "student_id" : 100, "type" : "homework", "score" : 88.50425479139126 } Use below query for sorting of  data, Here I have use limit of 5 show it will show five record. db.grades.find( { }, { 'student_id' : 1, 'type' : 1, 'score' : 1, '_id' : 0 } ).sort( { 'student_id' : 1, ...
Post a Comment
Read more

How to upload image in asp.net using file upload control

Here i am going to explain how to upload image on server. First add one file upload control on your page  and button give the suitable name of both file upload control and button control. Click on button control it will fire event on the name of button and it will redirect it to code behind file. It will also check the image content length and type of image Now see below code of code behind file. protected void Button1_Click( object sender, System. EventArgs e)     {         if (fu1.HasFile)         {             if (fu1.PostedFile.ContentLength <= 2097152)             {                 string fileexe = Path .GetExtension(fu1.FileName);        ...
Post a Comment
Read more

How to use Nmap with example

  Nmap is a popular open source network scanning tool used for network exploration, security auditing, and vulnerability testing. Here's an example of how to use Nmap: Open a command prompt or terminal window on your computer. Type "nmap" followed by the IP address or domain name of the target network or device that you want to scan. For example, to scan a website, you might enter: nmap www.example.com Hit enter to start the scan. Nmap will begin probing the target network or device and will display information about the discovered hosts and open ports. You can use various options and flags to customize the scan. For example, the "-sS" flag specifies a TCP SYN scan, which is a stealthy scan method that can bypass some firewall configurations. The "-p" flag specifies the ports to scan. For example, to scan only ports 80 and 443 on a website, you might enter: nmap -sS -p 80,443 www.example.com Hit enter to start the customized scan. Nmap will d...
Post a Comment
Read more

Network hacking & scanning tools

NETWORK SCANNING Network scanning is very easy to understand and use but don’t do this in any other network. It’s illegal .so I can’t suggest it do . You may see below protocol and tools to be use for network scanning. Tools to be use to be use for scan and hack network : ·         HTTPort ·         Nmap :- port scan counter measure ·         Pinger ·         WS_Ping_Pro ·         HPING2 ·         KingPing ·         Icmpenum ·         SNMP Scanner ·         Detecting ping sweeps ICMP Queries ·         IPEye ·         IPSECScan ·      ...
Post a Comment
Read more