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


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 client–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.
Prerequisites
Development Environment Software Package
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
  1. 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.
  1. In your Web app project, give a unique name as uniquein net domain.
  2. Now, you need to enter to create a different project.
  3. The URL for your Application name plus .azurewebsites.net. For example, if the name is Logesh, the URL is logesh.azurewebsites.net.
  4. 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.
  5. Click New button, which is next to the app Service plan but don’t create new app Service plan.
  6. To configure app Service plan, dialog and enter your plan name, if you are preferred.
  7. 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).
  8. In the size-> drodown click.
  9. 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.

Simple Table View in Xamarin iOS


Introduction
Hello guys, in this blog, we can create a simple table view in Xamarin iOS. Table View is a view for displaying the list of data in the scroll function. But, Xamarin iOS doesn’t have an option to directly give the data, so we need to create a custom table view Source class and configure row cell view or layout.

iOS output:



Prerequisites

  • Visual Studio 2017 or Above
  • XCode 10.0 or Above
  • IOS Device or Simulator
  • This Project created in Visual Studio 2019 with Mac Machine

Let’s Start

Step 1:

Open Visual Studio and create Xamarin iOS Single View Application by going to Visual Studio >> New Solution >> In the dialog left side, select iOS under App >> forward by select Single View Application and click Next


Step 2:
In the next dialog window, give your app name, organization name, and target version, choose devices then click Next. 


a few seconds, the project is created and you get the solution folder structure like below.






Step 3:
Now, open Main.Storyboard by going to Solution Pad >> Main.StoryBoard >> right-click to select Choose iOS Designer or XCode Interface Builder >> Afterwards, the storyboard will be opened. here, drag and drop UITableView and set Constraints. Top, Bottom, Leading and Trailing Constraints are Zero. 


Setting up constraints, you get a view like below.


Now , you can set the UITableView identifier is tableviewId and View Controller is ViewController.Cs. We should set Source and all other properties for this layouttableviewId. Otherwise, we can’t have access to this Table View.

Step 4:
Next, Create a New Class named ListTableViewSource.cs. By going to the right-click Solution and Add >> New File >> Class and give name ListTableViewSource.cs. This class Inherit from UITableViewSource and extract the Abstract Class. In the first “RowsInSection” lost count and Configure “GetCell” method. The page code is given below.


1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
class TableViewSimpleSource : UITableViewSource
        {
            private List<string> listItems = new List<string>() { "List Item", "List Item", "List Item", "List Item", "List Item", "List Item", "List Item", "List Item", "List Item", "List Item", "List Item", "List Item", "List Item", "List Item", "List Item", "List Item" };

            public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)
            {
                var cell = new UITableViewCell(CGRect.Empty);
                cell.TextLabel.Text = listItems[indexPath.Row];
                return cell;
            }

            public override nint RowsInSection(UITableView tableview, nint section)
            {
                return listItems.Count;
            }
        }

Step 5:
Now, open ViewController.cs file and set the Table View Source Class to Table View. The Code is given below.


1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
using System;
using System.Collections.Generic;
using CoreGraphics;
using Foundation;
using UIKit;

namespace TableViewDemo
{
    public partial class ViewController : UIViewController
    {
        public ViewController(IntPtr handle) : base(handle)
        {
        }

        public override void ViewDidLoad()
        {
            base.ViewDidLoad();

            tableviewId.Source = new TableViewSimpleSource();
            // Perform any additional setup after loading the view, typically from a nib.
        }

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


Step 6:
Now, run your Xamarin iOS application and we get output like below.




Get Source From Github
Feedback: Thank you for reading this, if you have any suggestions, feel free to write in the command section.

Custom Popup Dialog in Xamarin Android


Introduction:
               In this article, we go step by step to build a custom popup dialog for Xamarin android. The popup dialog is just a window that prompts to enter additional details. Where we can use the popup dialog means, in some cases, we want some decision from the user without changing the activity or screen. 

Output:

  
Let start;  
Step 1:  
          First, create a simple Xamarin Android Application by going to New >> Select Android >> followed by clicking Next.  


  
Step 2:  
        Here gives the project name, organization name, app compatibility, and app theme, then click Create project.  


  
Step 3:  
After the project creation, double click to open Main.axml. For that, Solution Explorer >> expand the Resources folder and Layout folder, double click to open Main.axml. Now, drag and drop to place one button, this page code given below.  


1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 <Button
  android:text="Show Popup"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:textAllCaps="false"
  android:id="@+id/btnPopup" />

</LinearLayout>

Step 4:  
Now, add a new Layout named Popup.axml. For that, right-click the Layout Folder and select Add >> New and the new popup window will appear, select Layout and name as Popup.axml and click Add.    


1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
         <android.support.constraint.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp"
                    android:background="@android:color/white">
                
                    <TextView
                        android:id="@+id/allocate_collector"
                        app:layout_constraintTop_toTopOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        android:layout_width="wrap_content"
                        android:layout_height="18dp"
                        android:layout_marginTop="15dp"
                        android:layout_marginLeft="10dp"
                        android:text="Custom Title"
                        android:textStyle="bold"
                        android:textSize="16dp"
                        android:maxLines="1"
                        android:textColor="@android:color/black"/>

                    <TextView
                        android:id="@+id/patient"
                        app:layout_constraintTop_toBottomOf="@+id/allocate_collector"
                        app:layout_constraintStart_toStartOf="parent"
                        android:layout_marginTop="20dp"
                        android:layout_marginLeft="10dp"
                        android:layout_width="wrap_content"
                        android:layout_height="14dp"
                        android:text="My Name"
                        android:textSize="12dp"/>

                    <android.support.design.widget.TextInputLayout
                            android:id="@+id/collector_name_txt_lyt"
                            app:layout_constraintTop_toBottomOf="@+id/patient"
                            app:layout_constraintStart_toStartOf="parent"
                            android:layout_width="match_parent"
                            android:layout_height="51dp"
                            android:layout_marginTop="15dp"
                            android:layout_marginLeft="10dp"
                            android:layout_marginRight="10dp">
                          <AutoCompleteTextView  
                                android:layout_width="match_parent"  
                                android:layout_height="wrap_content"
                                android:id="@+id/autocomplete"
                                android:inputType="textAutoComplete"
                                android:completionThreshold="1"
                                android:singleLine="true"
                                android:gravity="bottom"
                                android:hint="Name"
                                android:textSize="14dp"
                                android:paddingRight="20dp"
                                android:textColor="@android:color/black"/> 
                    </android.support.design.widget.TextInputLayout>

                    <View
                  android:id="@+id/topview_of_logout"
                  app:layout_constraintTop_toBottomOf="@+id/collector_name_txt_lyt"
                  app:layout_constraintStart_toStartOf="parent"
                  app:layout_constraintEnd_toEndOf="parent"
                  android:layout_width="match_parent"
                  android:layout_height="1dp"
    android:background="#000000"
                                android:layout_marginTop="30dp"/>

                 <View
                  android:id="@+id/midview_of_logout"
                  app:layout_constraintTop_toBottomOf="@+id/topview_of_logout"
                  app:layout_constraintStart_toStartOf="parent"
                  app:layout_constraintEnd_toEndOf="parent"
                  android:layout_width="1dp"
                  android:layout_height="37dp"
                  android:layout_marginLeft="1dp"
                  android:layout_marginRight="1dp"
    android:background="@android:color/black"/>

                 <Button
                                android:id="@+id/btnCancel"
                  app:layout_constraintTop_toBottomOf="@+id/topview_of_logout"
                  app:layout_constraintStart_toStartOf="parent"
                  app:layout_constraintEnd_toStartOf="@+id/midview_of_logout"
                  android:layout_width="0dp"
                  android:layout_height="43dp"
    android:background="@null"
                  android:text="Cancel"
                                android:textAllCaps="false"
                  android:textSize="12dp"/>

                 <Button
                                android:id="@+id/btnOk"
                  app:layout_constraintTop_toBottomOf="@+id/topview_of_logout"
                  app:layout_constraintStart_toEndOf="@+id/midview_of_logout"
                  app:layout_constraintEnd_toEndOf="parent"
                  android:layout_width="0dp"
                  android:layout_height="43dp"
                  android:text="Submit"
                  android:textSize="12dp"
                  android:textColor="@android:color/black"
                                android:textAllCaps="false"
                  android:background="@android:color/white"/>

            </android.support.constraint.ConstraintLayout>
</FrameLayout>


Step 5:  
Next open, MainActivity.cs and add the following code to Invoke the popup dialog in the UI. For that, open Solution Explorer >> MainActivity.cs. This page code gives below. In that code, we are initializing the Alert Dialog object and set up the layout. We can access the layout widget properties by using the “window.FindViewById<TextView>(Resource.Id.widgetId)”, otherwise you’re trying to access directly, NullException will be thrown.


1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
using Android.App;
using Android.OS;
using Android.Support.V7.App;
using Android.Views;
using Android.Widget;
using static Android.App.ActionBar;

namespace CustomPopupLayout
{
    [Activity(Label = "@string/app_name", Theme = "@style/AppTheme", MainLauncher = true)]
    public class MainActivity : AppCompatActivity
    {
        private Button btnshowPopup;
        private Button btnPopupCancel;
        private Button btnPopOk;
        private Dialog popupDialog;

        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.Main);
            btnshowPopup = FindViewById<Button>(Resource.Id.btnPopup);
            btnshowPopup.Click += BtnshowPopup_Click;
        }

        private void BtnshowPopup_Click(object sender, System.EventArgs e)
        {
            popupDialog = new Dialog(this);
            popupDialog.SetContentView(Resource.Layout.activity_main);
            popupDialog.Window.SetSoftInputMode(SoftInput.AdjustResize);
            popupDialog.Show();

            // Some Time Layout width not fit with windows size
            // but Below lines are not necessery
            popupDialog.Window.SetLayout(LayoutParams.MatchParent, LayoutParams.WrapContent);
            popupDialog.Window.SetBackgroundDrawableResource(Android.Resource.Color.Transparent);

            // Access Popup layout fields like below
            btnPopupCancel = popupDialog.FindViewById<Button>(Resource.Id.btnCancel);
            btnPopOk = popupDialog.FindViewById<Button>(Resource.Id.btnOk);

            // Events for that popup layout
            btnPopupCancel.Click += BtnPopupCancel_Click;
            btnPopOk.Click += BtnPopOk_Click;

            // Some Additional Tips 
            // Set the dialog Title Property - popupDialog.Window.SetTitle("Alert Title");
        }

        private void BtnPopOk_Click(object sender, System.EventArgs e)
        {
            popupDialog.Dismiss();
            popupDialog.Hide();
        }

        private void BtnPopupCancel_Click(object sender, System.EventArgs e)
        {
            popupDialog.Dismiss();
            popupDialog.Hide();
        }
    }
}

Additional Tip: 
In here, you can easily set alert dialog Title by using “AlertDialog.SetTitle” property. 

Step 6:  
Now run your Xamarin android, your output like below.  



Download Source Github 

Conclusion:
    Finally, we have successfully created a custom dialog, I think it helps full for you if you have any suggestions feel free to write in the command section. 



Featured Post

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

This article covers the topics given below. What is a Web App? Deployment environment Software packages. Create Web app. Azure Resour...