DEV Community: Logesh Palani

Xamarin.Forms - DataGrid

Logesh Palani — Thu, 14 May 2020 17:33:00 +0000

Introduction
The DataGrid is format or architecture to show a set of data in the user interface. In Xamarin Forms there is no default DataGrid control, so we need to install “Xamarin.Forms.DataGrid” dependency.

*Let’s start :) *

create new Xamarin.Forms application in Visual Studio for Mac

| |
| New Xamarin.Forms |

Once Project created, install “Xamarin.Forms.DataGrid” dependency by going, the Solution Explorer >> right-click and select “Manage NuGet Packages” >> in the new dialog, top right corner search “Xamarin.Forms.DataGrid” and Install it.

| |
| Nuget Package Install |

Create an MVVM folder structure, create a Professional.cs model class under the Model folder. For that, open Solution Explorer >> right-click the Model folder and select Add > new class and give name as Professional.cs. The class code is given below.

Now, create another DummyProfessionalData.cs class under the Utils folder for dummy data. This class used for creating dummy data and code is given here.

Next, Create MainPageViewModel.cs class under ViewModel folder and write given below code. Here, List and IsRefreshing properties and refresh commend are written, and when the user swipe top to bottom, the refresh command will execute and refresh the UI with updated data. INotifyPropertyChanged property also implemented to invoke the UI with new Data. The Professional Property for single data selection.

After that open MainPage.xaml page and start our UI design. First, we call DataGrid namespace as dg and design our columns with Title, bind the PropertyName, width size. Bind ItemSource, SelectedItem, refershCommand. This page design code is given below.

Next open MainPage.xaml.cs and set BindingContext is MainPageViewModel as we done already. The source code here.

Finally, initialize DataComponent in App Startup of App.xaml.cs class as below code.

Now, run your application and output like the below screenshot.

The Full Source Code is here - GitHub

Conclusion

            I hope you all understand how to use DataGrid in Xamarin.Forms and this blog is helpful for all and thanks for reading

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'Helvetica Neue'; color: #dca10d}

HotReload with Wi-Fi Debugging gives more power to Xamarin Forms

Logesh Palani — Thu, 27 Feb 2020 19:20:00 +0000

The Wi-Fi debugging is another way to deploy and debug your application in Android and iOS devices. A couple of months back Microsoft released Xamarin HotReload for continuous change the values in the editor, instantly it will reflect in your running device without requiring to rebuild and restarting the application. Now, we going to check this HotReload and Wi-Fi deployment works at the same time. Before starting this, we need to configure our IDE and mobile for Wi-Fi debug configuration.

Configure iOS

Open XCode and navigate to Window menu >> select Device and Simulator >> check to Connect via Network checkbox as shown below image.

Note: your iPhone and Mac must be in the same network connection.

Back to Visual Studio and select dropdown device list, Through Wi-Fi via connected devices will be shown with a small Wi-Fi icon in front of the device name.

Now select iPhone that connected via Wi-Fi.

Configure Android

Open Terminal in Mac and run the following commands for adding the _ adb _ path.

| echo 'export PATH=$PATH:/Users/*thisismyaccount*/Library/Android/sdk/platform-tools/' >> ~/.bash_profile source ~/.bash_profileNote: first connect your android device via USB After adding the path, enter below command

_ adb devices _ Next, execute the _ TCP _ command to say the adb listen to the network port to connect a device. adb tcpip 5555 Copy your Wi-Fi IP from your Android device by doing>> Settings >> Wi-Fi >> Connected Wi-Fi settings >> note the IP address

Next, connect your adb to an IP address by running below command. adb connect 192.165.12.1

The device connected established successfully, unplug your USB and deploy your application over the Wi-Fi. After the unplug USB this IP device will be shown your ide drop-down list and select and deploy it

End of debugging change the adb listen port to USB mode by executing below command. adb USB |

HotReload

Enable your HotReload by going Visual Studio Preferences >> Xamarin Hot Reload left menu and check the Enable Hot Reload checkbox.

Now the time to check your HotReload, set your startup project and running the application, you can edit the values and Save it, instantly your application will flash and loaded into a newly changed design.

That was awesome, thanks to Xamarin Forms Team.

The blog post not good blog post without comment, give a comment

How To Use Oxyplot Chart in Xamarin iOS

Logesh Palani — Sat, 22 Feb 2020 15:45:00 +0000

Introduction

Showing data in a chart/graph is much easier to understand. In Xamarin iOS no default option to show the chart. We must use a third-party plugin to show charts. A lot of third-party plugins are paid like Syncfusion, Telerik. I recommend using Oxyplot charts because it's full of open-source and easy to use this in your project. In this article, we are going to learn how to use and understand the Oxyplot chart in Xamarin.iOS Project.

Let's start,

Create Xamarin iOS Single View Application in Visual Studio for Mac

Before start designing, we must install an Oxyplot chart plugin from NuGet Manager in your project_._

Now, open Main.Storyboard in Visual Studio designer, and drag the View from Toolbox and place as per your requirement and apply class as PlotView in the properties window and set identity Name [Eg - plotview]

Next, write your code in ViewController.cs file. Here the many different types of chart API will be available for use like Bar, Stack, Function, Pie Chart and etc,. Create PlotModel and set required properties as per your requirement and create the X, Y-axis, position, labels, zoom, angle, Max, Min, and other properties. The Zoom property for the zoom level of the chart. The Max, Min properties for avoiding more scrolling in the non-data representation in the chart, I mean you set min level is a zero, it will avoid minus(-) side-scrolling, because, we don't have data representation on minus side. Position property used to set the position of chart in the top, bottom, left or right side. Afterward, create Axis and Data Column Series. In the Column series also have different properties like color, width and etc,. Apply this X, Y-Axis and Column series to this PlotModel as we created first. Finally set this plotModel to PlotView as we designed in the Storyboard scene. Here is the full source code.

Now, you can execute the project and the output like below.

Next, create another type of chart. Create a new Model named item.cs and write the below-given code. As usual use bar Charts and apply item model values to this plot chart. The code is given below.

Run your project by pressing F5, you will get output like below.

The Full source code in Github

Summary

Install Xamarin.iOS.Oxtplot Plugin
Place View and apply PlotView class
Create PlotModel, Column Series, X and Y-Axis
Apply to PlotView

Thanks for reading.

SideMenu in Xamarin iOS

Logesh Palani — Sat, 15 Feb 2020 14:21:00 +0000

Introduction

This blog demonstrates how to use a sidemenu or navigation drawer in Xamarin iOS. since there is no default future for the sidemenu or navigation drawer view. We can archive this view using _Xamarin.Sidemenu _NuGet with putting a lot of effort.

Let's start

Create a new Xamarin iOS Single View Application in Visual Studio for Mac.

After the project creation, install Xamarin.Sidemenu Nuget package by going to Solution Explorer >> right-click and select Manage NuGet Package and search Xamarin.Sidemenu and select install the plugin.

Now, open your Main.Storyboard and design two scenes for the right and left navigation drawer as per your required design and one more ViewController for the Main or Root ViewController. Here, I don't want any more design, just gave background color for these scenes and Create two ViewController classes for these scenes and this controller should be inherited from UIViewController.

Next, open your View Controller and create SideMenuManager instance and configure right and left side ViewController. Here, I created the ViewController instance and configure these ViewController with SideMenuManager. Now, we can add gestures for these sidemenu controllers. Here, I wrote PanGesture and EdgePanGesture _and added these gestures to the direct added into _NavigationController, incase you want to add for a specific scene you can. Next, we can set this instance to the toolbar left and right button. By default, the left, and right drawer ViewController scene Navigation bar TitleView is enabled. if you want to disable the NavigationBar title view. First, create an instance for that ViewController _and set false for _NavigationBarHidden property true. Some cool effects based properties are available for use as a blur, background image. These effects code is given in the SetDefault method. Yah! we have one more useful and lovely effect is available, which is the Sidemenu Navigation Animation type and Its types are Slide In, Slide Out, Dissolve, SlideInOut.

Now, run your application, you will get output like below.

Source code in Github

Summary

Install Xamarin.SideMenu plugin
Configure the left and right view controller scene to SideMenu Manager
Add Gestures

Thanks for reading !!!

Custom Table View in Xamarin iOS

Logesh Palani — Sat, 15 Feb 2020 02:02:00 +0000

Introduction

In my previous article, we discussed the TableView and their default cell behaviors. Now, we going to learn about how to use a custom table view cell in TableView. I won't like writing a lot of theory we can directly go with code.

Let's start.

Create Xamarin iOS Single View Application by going Visual Studio >> New >> Project >> Single view Application under iOS section.

After the project creation open Main.StoryBoard and place UITableView. Set the TableView frame size equal to view size and set constraints.

Now, create new Table View Cell by doing, right-click the project and select Add >> followed by select new File. In the dialog window left plane select iOS and center plane select Table View Cell template and give the file a name then click New [Eg- MyTableViewCell].

Afterward, the new XIB and cs extension file will be created with your given name. Now, open the XIB file in your designer (my favorite and recommend XCode). Next, the drag a button from the toolbox and place the starting of the cell. As well as place another label after the button. Apply corner radius and other properties in the property window.

Note - you must give Cell reuse identifier, otherwise you won't have access for the cell

Next, open MyTableViewCell.cs file and create a new static method named UpdateData. This method used to update the content of the cell. because we couldn't access the cell subviews from another class

Now, create a new Table View Source Class named MyTableViewSource.cs. This class should be inherited from UITableViewSource and override GetCell, RowSelect and RowInSelection method.

Finally, open ViewController class and apply source class to the TableView source. Here, you should call ReloadData static method. Create an array of string and pass-through constructor and apply the values to the cell.

Here, we have one problem, if the user selects the row, the event will trigger in the source class, but I need to navigate to another view controller based on selection, there is no option to navigate ViewController. So, I need to write an interface and pass it to the source class. now user select row, the view controller method will be invoked using Interface and write your navigate code logics here.

It's time to run our application and our application output like below.

Full Source Code Here - https://github.com/logeshpalani98/Xamarin.iOS-Samples

Summary

Create a new Table View
Add new Table View Cell and design the cell
Create a TableView source class
Apply source class toTableView
Create a new Navigate interface and use it.

Thanks for reading !!!

How To Pick Document In Xamarin.iOS

Logesh Palani — Fri, 31 Jan 2020 18:24:00 +0000

Introduction

This blog demonstrates, how to pick a file in the iOS device in the Xamarin iOS application. In-default must enable the iCloud provisioning certificate, however, I need pick from the local device, not in iOS Cloud, so provisioning profile is not necessary.

Prerequisites

Visual Studio for Mac
XCode (optional)
Simulator or Physical Device

Step 1:

Open Visual Studio for Mac >> New >> In the left plane select App under iOS >>

center plane select Single View App >> click Next.

Step 2:

Next, give your Application Name, Device type, Identifier, select Target Version and click Ok.

followed by check the app name and solution name, then click Create.

Step 3:

Now, open Storyboard in your interface builder using the right click of Main.Storyboard >> in the context menu select Open with >> followed by XCode Interface Builder (because of my favorite designer is XCode). Afterward, drag Button from Toolbox and place in the center of the scene. by doing >> Solution Explorer >> open Main.Storyboard >> drag to place Button in the center of the scene and set perfect constraints and Create a click event for this button.

Now, open ViewController.cs file and write the code given below, by going to Solution Explorer >> double click and open ViewController.cs file. In the code, I created the Document View Controller and Present in the popview inside the event, we created before. In case the controller was canceled the WasCancelled event will be invoked or DidPickDocumentAturls delegate will be invoked.

partial void BtnDirectPick\_TouchUpInside(UIButton sender)  
{
var picker = new UIDocumentPickerViewController(allowedUTIs, UIDocumentPickerMode.Open);
            picker.WasCancelled += Picker\_WasCancelled;
            picker.DidPickDocumentAtUrls += (object s, UIDocumentPickedAtUrlsEventArgs e) =>
            {
                Console.WriteLine("url = {0}", e.Urls[0].AbsoluteString);
//bool success = await MoveFileToApp(didPickDocArgs.Url);
var success = true;
string filename = e.Urls[0].LastPathComponent;
string msg = success ? string.Format("Successfully imported file '{0}'", filename) : string.Format("Failed to import file '{0}'", filename);
// Some invaild file url returns null
                NSData data = NSData.FromUrl(e.Urls[0]);
if(data!=null){
byte[] dataBytes = new byte[data.Length];

                System.Runtime.InteropServices.Marshal.Copy(data.Bytes, dataBytes, 0, Convert.ToInt32(data.Length));

for (int i = 0; i < dataBytes.Length; i++)
                {
                    Console.WriteLine(dataBytes[i]);
                }
                }

                Console.WriteLine(data + "Completed");

var alertController = UIAlertController.Create("import", msg, UIAlertControllerStyle.Alert);
var okButton = UIAlertAction.Create("OK", UIAlertActionStyle.Default, (obj) =>
                {
                    alertController.DismissViewController(true, null);
                });
                alertController.AddAction(okButton);
                PresentViewController(alertController, true, null);
            };
            PresentViewController(picker, true, null);
        }

        private void Picker\_WasCancelled(object sender, EventArgs e)  
{
            Console.WriteLine("Picker was Cancelled");
        }

If you need to filter a specific format file, use below URI filters

private string[] allowedUTIs = {
                    UTType.UTF8PlainText,
                    UTType.PlainText,
                    UTType.RTF,
                    UTType.PNG,
                    UTType.Text,
                    UTType.PDF,
                    UTType.Image
                };

Step 4:

Press F5 or run the project, you will get output like below.

Summary

Create _UIDocumentPickerViewController _
Implement picker delegate
Convert NSData to byte.

In this article, we learned how to use the document view controller in Xamarin iOS.

OTP View In Xamarin iOS

Logesh Palani — Fri, 24 Jan 2020 18:38:00 +0000

Introduction

In this demonstration, I will explain how to create OTP View in Xamarin iOS without using third party plugins.

Issue

First, I'm using a third-party plugin to archive my required view, but there is some issue to customize the view.

Solution

Prerequisites

Visual Studio for Mac
XCode ( Optional )
Simulator or Physical Device

Step 1:

          Open Visual Studio for Mac >> New >> In the left plane select App under iOS >> center plane select Single View App >> click Next.

Step 2:

         Next, give your Application Name, Device type, Identifier, select target Version and click OK.

Followed by check the app name and solution name, then click Create.

Step 3:

              Now, open Storyboard in your interface builder using the right click of Main.Storyboard >> In the context menu select _Open with  >>_ followed by XCode Interface Builder because my favorite designer is Xcode.

          Afterward, Drag Horizontal Stack View from Toolbox and place Storyboard as per your requirement and set perfect Constraint to this view. Next, drag TextField from Toolbox and place inside the StackView and set height and width of TextField. Create an outlet for this TextField to access from code-behind. Here, I set field names are fieldOne, fieldTwo, fieldThree, fieldFour.

| |
| Stack View |

| |
| OTP View Xamarin iOS |

Step 4:

          Next, open ViewController.cs file by going >> Solution Explorer >>  double click ViewController.cs file. Implement the ViewController class in IUITextFieldDelegate interface and override ShouldChangeCharacters method. Here, I did simple logic to change the focus of one field to another field. In case you need to validate input in runtime, you can write your validation code before the ResignResponder method.

Step 5:

Let's run your application, you will get output like below.

The full source code is here.

Summary

We created StackView
StackView inside placed TextField
Create an outlet for Textfield
Implement IUXTextFieldDelegate to your View Controller and write some logic

Share, your comment below.

Xamarin Santa Talk Challenge with Azure Functions Winner in Microsoft

Logesh Palani — Sat, 11 Jan 2020 17:58:00 +0000

I'm very much happy to receive my winner swag from Microsoft. Thanks to this community that I was selected as a member of better usage of Azure Function with Xamarin. I feel very happy and Thanks for your support and guidance.

Here is a link my for PR - Github Repos PR

All the participants PR here - https://github.com/codemillmatt/santa-talk/pulls

Once again Thank you

How to use Multiple View Controller in Single Page in Xamarin iOS

Logesh Palani — Thu, 09 Jan 2020 17:30:00 +0000

Introduction

In this blog, I will explain how to handle multiple view controllers on a single page in Xamarin iOS. If you're interested in learning this, just read the entire post. Since there is no default functionality for showing multiple view controllers in iOS. Some of the application designs are complicated too. In such circumstances hiding & showing views in single ViewController is really not the smart way. So, we need to separate the views. This sample, I have created multiple _ViewController'_s and to present on a single page. Here, I will show you to present multiple view controllers in a single page.

iOS output

Prerequisites

Visual Studio 2019
XCode 10.0 or above
Physical device or simulator
This project created in Visual Studio 2019 for Mac

Let's start

Step 1:

Create Xamarin iOS Single View Application by navigating to Visual Studio File Menu >> New Project >> In the dialog window >> select left plane App under iOS and center plane select Single View Application and click Next.

Step 2:

In the next window, give your application a name, target version & device type (tab or mobile), organize & bundle identifier and click OK.

Step 3:

After the project creation, you will get a folder structure like below.

Now, open storyboard in you interface builder using the right click of Main.Storyboard >> in the context menu select Open with >> forwarded by XCode Interface Builder.

Step 4:

It's time to design our interface. Default one view controller will be there, We should place Navigation Controller in-front of Initial View Controller. Drag and drop the UICollectionView and View. _ Here, collection view for creating a tabbed page and view for set another controller view to this view. Because there is no default control for the tabbed page and set this collection view height and constraints as per your requirements. Create an outlet for _CollectionView and View as collectionView and baseView

Next, select collection view and open properties plane and set the size is None.

Add First View Controller

Next, drag and drop the new view controller and set the background color as red and add label view in the center of the page. Create a new ViewController class named as FirstViewController to assign this ViewController.

Add Second View Controller

Similarly, create another view controller and set the background color as yellow and place one label in the center of the page. As well as create another view controller class named SecondViewController to assign to this View Controller.

finally, your storyboard looks like below

Step 5:

Now, add new Collection View Cell for tab design using right-click the solution >> add >> new File >> new dialog window will appear, in the left plane select iOS,>> center plane, select Collection View Cell _and give the name as _TabCollectionViewCell and then click Add.

Design Collection View Cell

Next, open this Collection View Cell in an Interface builder. Add the following views in the collection view cell.

Label - Tab title
View - Active tab indicator

The label in the center of the cell and view height 5. Set the perfect constraint for this view. If the constraint are missing, no view will be present in the view controller. Create an outlet for this view to access from the code behind.

There is one problem to apply data to view, you couldn't access this outlet's from any other class, so we can create one method to update data for views

internal void UpdateCell(string title, bool visible)  
{
            titleLabel.Text = title;
            titleLabel.TextColor = UIColor.White;

if (visible)
                indicatorline.Hidden = false;
else
                indicatorline.Hidden = true;
        }

Step 6:

Next moving into the coding part. First, we are going to write a code for the collection view. The view needs CollectionView needs collection view source and delegate class. The collection view there is no way to give input directly, so we need to write source class and pass your data to this class. The delegate class for cell item sizing and handle the item click event. Afterward, apply these two classes to this collection view.

Add Collection View Source Class

First, create a source class named _CollectionViewSource _and this class should be inherited from _UICollectionViewSource _and pass the data through the contractor. This page code is given below.

public class CollectionViewSource : UICollectionViewSource
    {
private List<string> titles;
public static int selectedIndex;

public CollectionViewSource(List<string> titles, int Index)  
{
this.titles = titles;
            selectedIndex = Index;
        }
public override UICollectionViewCell GetCell(UICollectionView collectionView, NSIndexPath indexPath)  
{
var cell = collectionView.DequeueReusableCell("TabCollectionViewCell", indexPath) as TabCollectionViewCell;

if (indexPath.Row == selectedIndex)
                cell.UpdateCell(this.titles[indexPath.Row], true);
else
                cell.UpdateCell(this.titles[indexPath.Row], false);

return cell;
        }
public override nint GetItemsCount(UICollectionView collectionView, nint section)  
{
return titles.Count;
        }
    }

Add the Collection View Delegate Class

Create another delegate class named CollectionViewSourceDelegate and this class should be inherited from UICollectionViewDelegateFlowLayout. In this class, constructor is passing one ITab interface to the view controller.

public class CollectionViewSourceDelegate : UICollectionViewDelegateFlowLayout
    {
int listCount;
        ITab iTab;
public CollectionViewSourceDelegate(int count, ITab iTab)  
{
this.listCount = count;
this.iTab = iTab;
        }
public override nfloat GetMinimumInteritemSpacingForSection(UICollectionView collectionView, UICollectionViewLayout layout, nint section)  
{
return 0;
        }
public override CGSize GetSizeForItem(UICollectionView collectionView, UICollectionViewLayout layout, NSIndexPath indexPath)  
{
var size = new CGSize();
            size.Width = collectionView.Frame.Width / 2;
            size.Height = collectionView.Frame.Height;
return size;
        }
public override void ItemSelected(UICollectionView collectionView, NSIndexPath indexPath)  
{
            iTab.OnTabChange(indexPath.Row);
            CollectionViewSource.selectedIndex = indexPath.Row;
            collectionView.ReloadData();
        }
    }

Create ITab interface

Create a new Interface named ITab.cs by going to Solution Explorer >> Add new file >> select Interface and give the name as ITab and click Add. Add one method OntabChange and one integer parameter value.

public interface ITab
    {
void OnTabChange(int indexPath);
    }

Next, open ViewController.cs file. First, we need to setup view controllers and present them into view. Add the FirstViewController and SecondViewController _as _Child View Controller of this class and set the bounds equal of baseView view. Load the view controller based on Index selection. In the OnTabMethod _ call the _LoadViewMethod and pass the index. create a static string list and pass to collection view source class.

using Foundation;
using System;
using System.Collections.Generic;
using UIKit;

namespace ManageChildVC
{
public partial class ViewController : UIViewController, ITab
    {
private FirstChildViewController firstController;
private SecondChildViewController secondController;

public ViewController(IntPtr handle) : base(handle)  
{
        }

public override void ViewDidLoad()  
{
base.ViewDidLoad();
// Perform any additional setup after loading the view, typically from a nib.

var tabTitles = new List<string>() { "Tab 1 💝", "Tab 2 👨🏻‍💻" };

            SetUpChildViewControllers();

            collectionView.RegisterNibForCell(TabCollectionViewCell.Nib, "TabCollectionViewCell");
            collectionView.Source = new CollectionViewSource(tabTitles, 0);
            collectionView.Delegate = new CollectionViewSourceDelegate(tabTitles.Count, this);
            collectionView.ReloadData();

            LoadController(0);
        }

private void SetUpChildViewControllers()  
{
            AddViewControllerAsChildViewController(FirstTabViewController());
            AddViewControllerAsChildViewController(SecondTabViewController());
        }
public UIViewController FirstTabViewController()  
{
            firstController = this.Storyboard.InstantiateViewController("FirstChildViewController") as FirstChildViewController;
return firstController;
        }
public UIViewController SecondTabViewController()  
{
            secondController = this.Storyboard.InstantiateViewController("SecondChildViewController") as SecondChildViewController;
return secondController;
        }

private void AddViewControllerAsChildViewController(UIViewController viewController)  
{
this.AddChildViewController(viewController);
            View.AddSubview(viewController.View);
            viewController.View.Frame = ViewControllerSpace.Frame;
            viewController.DidMoveToParentViewController(this);
            viewController.View.Hidden = true;
        }

public override void DidReceiveMemoryWarning()  
{
base.DidReceiveMemoryWarning();
// Release any cached data, images, etc that aren't in use.
        }

public void OnTabChange(int indexPath)  
{
            LoadController(indexPath);
        }

private void LoadController(int indexPath)  
{
            collectionView.ReloadData();

if (indexPath == 0)
            {
                firstController.View.Hidden = false;
                secondController.View.Hidden = true;
            }
else if (indexPath == 1)  
{
                firstController.View.Hidden = true;
                secondController.View.Hidden = false;
            }
        }
    }
}

Step 7:

Now, run the application, you will get a view like below, select the tabs, based on tab selection the view will change.

The full source code is here -

Conclusion

In this blog, we learned to handle the view controllers in iOS. Thanks for reading and share your comments.

Table View in Xamarin iOS - Part 2

Logesh Palani — Sun, 15 Dec 2019 06:58:00 +0000

Liquid syntax error: Unknown tag 'endraw'

ASP.NET Web Application To Deploy Microsoft Azure Service, Using Microsoft Visual Studio

Logesh Palani — Sun, 08 Dec 2019 17:20:00 +0000

This article covers the topics given below.

What is a Web App?
Deployment environment Software packages.
Create Web app.
Azure Resources.
The Azure resources in Visual Studio 2015 Update 3.
Deploy Azure project.
Creating WebpProject.

What is a Web App?

Web Application or Web app is a c lient–Server software Application in which the client or the client interface runs in a Web Browser. Common Web Applications are used as a Web Application.

e.g.

webmail, wikis, instant messaging services, Flipkart, Amazon.

Prerequisites

Getting started with ASP.NET MVC 5 in Microsoft Visual Studio 2015.
If you have Microsoft Azure Account & activate Visual studio subscriber benefits.
Sign up with Azure account.
Getting started in Azure app Service before
Azure SDK.
Visual Studio 2015 update 3.

Development Environment Software Package

Azure SDK for .NET 2.9.
Download the latest Azure SDK for Visual Studio 2015, if you don’t have it already.
If you have Visual Studio 2013, you can download the latest Azure SDK for Visual Studio 2013.

Create Web app

Step 1

Open Visual Studio 2015 Update 3 enterprise.

Create File>New>Project.
New Project-> click Visual C#> Web> ASP.NET Web app & select .NET Framework 4.5.2.
Selected the Azure Application Insights (Insight Application is used for the monitor and your Web app availability, performance and usage).
Enter your Application name.
Click OK.

Step 2

New NET Project Box-> select MVC and then click Change Authentication.

Step 3

Change authentication and click No Authentication.

Step 4

Click Host Azure.
App Service is selected in the dropdown list.

Click OK.

Create Azure resources

Create the app Service dialog box, followed by clicking Add account and sign in your Microsoft Azure ID & Password. Click Manage your account subscription or if you are already signed in, skip that step.

In your Web app project, give a unique name as uniquein net domain.
Now, you need to enter to create a different project.
The URL for your Application name plus .azurewebsites.net. For example, if the name is Logesh, the URL is logesh.azurewebsites.net.
Click New button, which is next to the resource group box and enter your resource group name or if you have already have resource group, select any one.
Click New button, which is next to the app Service plan but don’t create new app Service plan.
To configure app Service plan, dialog and enter your plan name, if you are preferred.
In the location, dropdown list, choose the location, which is close to your location (The setting specifies Azure datacenter and your Application will run at a speed for the closed location (Server and client possible) accessing).
In the size-> drodown click.
In the Configure app Service plan dialog box, click in the Create app Service dialog box, click create.

Azure Resources in Visual Studio
Solution Explorer shows your project files, references, JSON file, fonts and Controllers. If you want another page, go to the Web Application right click, followed by clicking Add >Web form or HTML form. Write the Web page name, followed by clicking Add to the link for Main page to New page and New page to Main page.

Azure app Service activity is shown on app Service resources, which have been credited in Azure and click the link to publish your app immediately.
Go to Cloud Explore Window, manage your Azure resources, including the Web app, which you just created and your app Services will be shown below on Logesh, as your website is there.

Build Azure Web Project

In Solution Explorer, choose Publish
Go to Publish Profile, which has setting to deploy Web project.
To establish connection to publish Web, click Next and accessing publishing packages will be uploaded. Before you check your setting, build your API.
Click next and check your Publish method. Prior to it, validate the connection, followed by clicking Next and before it, the Server name, site name, user name, password and destination URL are automatically inserted.

You may have your Web API Preview, click next and click Preview button. Now, go to Azure Activity Application and the application is created successfully and the local browser automatically opens. See your website and the link will be given below on the activity dialog box and there is no authentication, so no databases are available.

Web Project is created

It automatically opens your website given below.

Conclusion

Finally, the Application has been created successfully and I will explain how to host it in Azure portal for the Web Application in my next article.

Custom Popup Dialog in Xamarin Android

Logesh Palani — Tue, 01 Oct 2019 18:50:00 +0000

Liquid syntax error: Unknown tag 'endraw'