Xamarin.Forms CarouselView with image indicators

Download source code

Most of us when we are very familiar with Bootstrap carousel, we expect the same output in mobile CarouselView either. But the problem with Xamarin.Form CarouselView doesn’t provide us such CarouselView with Image Indicators. 

So this article will help the crazy professionals

Step1: Create a Mobile App (Xamarin.forms) project

Open Visual Studio 2017    File    New    Project    Choose Cross-Platform template    choose Mobile App (Xamarin.Forms)    Name it as CarouselViewApp    Click on OK    choose .Net Standard    Click OK

 

Step2: Install CarouselView NuGet Package

Right click on CarouselViewApp    Manage NuGet Packages    type CarouselView.FormsPlugin and Install the package

 

Step3: Create a Model for Images as ImageModel.cs

Before that add the images in CarouselViewApp.Android    Resource    drawable

File: ImageModel.cs

 

Step4: Create ViewModel for MainPage.xaml

Right click on CarouselViewApp    Add    NewItem    Visual C#    Add new class MainPageViewModel.cs

File: MainPageViewModel.cs

 

Step5:  Adding namespace in the MainPage.xaml

 

Step6: Assign BindingContext for MainPage.xaml.cs

File: MainPage.xaml.cs

 

Step7: Creating UI for MainPage.xaml

File: MainPage.xaml

  1. By using Image.GestureRecognizers, we are firing click events using MVVM Architecture
  2. Rotation property for ListView helps us to set or get the current rotation of the element. Here we are rotating ListView to 270 deg
  3. Here the indicators row in Grid is build using RelativeLayout.
  4. RelativeLayout is used here to turn the ListView in Horizontal Direction
    1. At first we move ListView into RelativeLayout, and maintaining the RelativeLayout HeightRequest.
    2. Now we need to fit the ListView in RelativeLayout bounds, this we can do it by using RelativeLayout Constraints.
    3. RelativeLayout.XConstraint, RelativeLayout.YContraint  are used to fix the x,y positions. And then RelativeLayout.WidthConstraint is to set the width for image, RelativeLayout.HeightContraint is to set the height for image.
    4. And the final step is to rotate the ContentView. This will first rotate the cell and the fit image into it.

 

output: Now run the application

  

Authentication and Authorization in ASP.NET Web API using Custom Filters

  • Web API is a platform for building RESTful applications on DotNet Framework. 
  • These API’s can be consumed from Console, Windows, Web, Mobile Applications.
  • As Web API is a part of core ASP.NET, it can be created on either MVC applications, or any other web applications.
  • Web API’s uses all the HTTP features like Request and Response headers, caching and so on…
  • Web API’s can return the data in various formats like
    • string format
    • Json format
    • XML format
    • BSON format

Step 1: Create a  ASP.NET Web API application

Open Visual Studio –> File –> New –> Project –> choose template Web –> click on ASP.NET Web Application  and provide name of the application–> choose Web API from the below check boxes –> Click OK

Step 2: Create a Model and inherit GenericIdentity from Security.Principal assembly

File: UserModel.cs

 

Step 3: Now add a new class for Creating custom filter as MyAuthorization and inherit AuthorizationFilterAttribute and add the following assemblies MyAuthorization class.

File: MyAuthorization.cs

 

Step 4: Here is your CustomAuthorization Filter MyAutorization

 

Step 5: Now create an API Controller and add your custom filter. Here I’m adding for only one method for testing you can add it for the entire class or add it globally.

File: Global.asax 

Add the below line in Application_Start( ), this registers our custom Filter for the entire application.

 File: EmployeeAPIController.cs

 

Step 6: Now create your GUI and on a button click write a server side method. Form this method you can communicate with API. In my case I took a console application.

  1. If you run the web project you will get your local host URL, in my case it was http://localhost:58100/
  2. Here in the authorization Header I have added my username and password in the given format username:password and encoding it to Base64 so that it provides security.
  3. If you don’t pass valid credentials from here, in the method OnAuthorization it should add Unauthorized Response.

 

Step 7: Create console / windows/ web application to consume the API

Here I’ve created Console application.

File: Program.cs

  • Here HTTPClient is used to consume RESTful API’s.
  • And then creating the Authorization header to pass the username and password in format (username: password).
  • client.GetAsync consumes the API and returns the Result.
  • From the result we can check the Status Code.

 

Connected and Disconnected Architectures in DotNet

  • NET (Active x Data Object) is mediator between front end and back end that interacts with client side application and server side application which supports two types of Data Accessing models, one is Connection oriented and Disconnected oriented.
  • NET leverages the power of XML for accessing data using disconnected architecture. It was completely designed with XML classes in .NET Framework.

 

Note: Before going into this article you should have a basic understanding on SQL queries on select, insert, update and delete commands.

Connection String

Connection string plays very crucial role in connecting your front end application and back end application. It’s a normal string which contains the information to establish the connection between backend Database and application and secured information such as user Id and password.

  • Usually Data Providers uses this connection string which contains parameters that are needed for establishing the connection.
  • Let’s have a look at Data Providers that are supported by .Net Framework.

List of Data providers which is supported by .Net Framework.

SQL server Provider connection string:

OLEDB Provider connection string:

ODBC Provider connection string:

 

Connection Oriented Architecture

 

The architecture which needs an open connection to access the data from database is known as Connection Oriented Architecture.

Following are the list of classes on which Connection Oriented Arch is built on:

  • ConnectionUsed to establish the connection between front end and back end.
  • CommandEnables access to database commands to return data, modify data, run stored procedures, and send or retrieve parameter information
  • Data Reader Used to read the data from Source. Provides high performance stream of data from data source.
  • Data Adapter
  1. Mediator between front end and back end which doesn’t have feature of containing data with in this , so it uses Dataset which is a result set.
  2. Also provides bridge between DataSet and data source.
  3. Use Command Objects to execute commands.

As Connected architecture needs connection for every transaction and creates much traffic to database since it do several trips. It shows very high impact on performance when the transaction has many commands i.e. for larger transactions. If it’s doing smaller transactions it is normally much faster.

Note:  In this Connected oriented arch the application stays connected even when it’s not doing any operations on database. To overcome this ADO.NET introduced a new component called DataSet which is a central component in Disconnected Architecture.

DataSet ds = new  DataSet( );

 

Disconnection Oriented Architecture

 

The architecture in which data can be retrieved from database even when the connection gets disconnected or closed is known as Disconnected Oriented Architecture.

Following are the list of classes on which disconnected arch is built on:

  • Connection
  • Command Builder Can generate insert, update and delete commands on single data base table for a data adapter.
  • Data Adapter
  • Data Set Contains the set of Data Tables (Data Table is set of Data Rows and Data Columns)

  • Data View It’s a view of table available in Can be used to perform insert, update and delete commands as in case of Data Set. Can be used to find, sort and filter the records.

  • Disconnected architecture is a method of retrieving the result set from database and giving the user ability to perform all CRUD operations like insert, update and delete. No traffic issues will get occurred because even though connection was gone data will be get already stored into dataset object.
  • By keeping connections open for only a minimum period of time, ADO .NET conserves system resources and provides maximum security for databases and also has less impact on system performance.
  • Any changes to data in DataSet doesn’t show effect on database directly, to save the changes need to use Update() method of Data Adapter.
  • Can be used with multiple and differing data sources, used with XML data, or used to manage data local to the application.

 

Da.Update(ds,”Table Name”);

 

Differences between Connection and Disconnection Oriented Architecture

 

 


 
 

How To Upload Files In MVC Using Ajax

I Assume you have a file input control and you need to upload the files asynchronously  to your server. To do this we have FormData() i.e FormData() can be appended with the data as key-value pair.

From the following code

  1.  key: “selectedImage”, value: file
  2.  key: “userId”, value: 10

 

Step 1: Frame FormData  for passing file with  parameters (if required)

 

 

Step 2: Write Controller Action method code