Hindi Video : Create Azure based ASP.NET MVC application in 30 minutes

 

Subscribe here to YouTube channel for all episodes

image

Cloud has been a buzz word for a while now. As a developer, we focus on converting the customer requirements to the code and sometimes find ourselves behind with the industry buzz words. The cloud is everywhere and perhaps the future. However as a developer, you won’t have to write very different code for cloud than codes you have been writing for the in-premise applications. In this post, I assume that you are already aware about MVC applications, hence I will focus on demonstrating how building for cloud is not very much different. I will follow step by step approach and create end to end MVC application completely hosted in the cloud (data and application both).

In this article, we will follow the following steps,

  • Setting up the database in the SQL Azure
  • Creating the MVC application
  • Building the application using MVC and the Entity framework
  • Publishing the application to Azure web site

Read full article on Infragistics blog

Subscribe here to YouTube channel for all episodes

 

 

 

 

 

Read article based on this video here

Subscribe here to YouTube channel for all episodes

I hope you like this video. Do not hesitate to leave comment or any feedback. Happy coding.

How to create a Container in Azure Storage from MVC application

I am working on a MVC application in which I need to work with Microsoft Azure storage .I had a requirement to create An Azure storage container from the MVC application. In this post I will share my learning that how I created a container programmatically.

I created the view as shown in below image. User has to enter the azure storage account name, azure storage key and the name of the container to be created.

image

Above View is MVC razor view, and it is created using the cshtml as shown below:

 


@{
    ViewBag.Title = "BLOB Manager";
}
<div class="jumbotron">
    <div class="row">
        <div class="col-md-8">
            <section id="loginForm">
                @using (Html.BeginForm("AzureInfo", "Manage", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
                {
                    @Html.AntiForgeryToken()
                    <h2> Manage BLOB Container</h2>
                    <hr />
                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                    <div class="form-group">
                        <div class="col-md-10 input-group input-group-lg">
                            @Html.TextBox("AccountName", "", new { @class = "form-control", @placeholder = "Account Name" })
                            @Html.ValidationMessage("AccountName", "", new { @class = "text-danger" })
                        </div>
                    </div>
                    <div class="form-group">

                        <div class="col-md-10 input-group input-group-lg">
                            @Html.TextBox("AccountKey", "", new { @class = "form-control", @placeholder = "Account Key" })
                            @Html.ValidationMessage("AccountKey", "", new { @class = "text-danger" })
                        </div>
                    </div>
                    <div class="form-group">

                        <div class="col-md-10 input-group input-group-lg">
                            @Html.TextBox("ContainerName", "", new { @class = "form-control", @placeholder = "Container Name" })
                            @Html.ValidationMessage("containername", "", new { @class = "text-danger" })
                        </div>
                    </div>
                    <div class="form-group input-group input-group-lg">
                        <div class="col-md-offset-2 col-md-10">
                            <input type="submit" value="Create Container" class="btn btn-lg btn-success" />
                        </div>
                    </div>

                }
            </section>
        </div>
    </div>
</div>

Above I am creating,

  • Three text boxes with the placeholder and the class set to bootstrap form-control
  • A submit button with the class set to bootstrap btn-lg and btn-success
  • All the controls are inside the form.
  • On form post operation, AzureInfo action of the Manage controller will be called.

Once the View is ready, let us go ahead and create an azure utility class. In this class we will put all the operations related to the azure storage. But before that you need to add Azure storage library to the project. Either you can use NuGet package manager or console to add the library. I am using console to install Azure storage library. I have taken the 4.3 version because at the time of writing this post, this was the latest stable version available.

image

Once package is successfully installed, add following namespaces.

 


using Microsoft.WindowsAzure.Storage;
using Microsoft.WindowsAzure.Storage.Auth;
using Microsoft.WindowsAzure.Storage.Blob;
using Microsoft.WindowsAzure;

To create the container in the Azure storage, I have created a function CreateContainer. This function takes three input parameters, account name, account key and the container name.

 


public static class AzureUtility
    {
        public static string  CreateContainer(string AccountName, string AccountKey, string ContainerName)
        {

            string UserConnectionString = string.Format("DefaultEndpointsProtocol=https;AccountName={0};AccountKey={1}", AccountName, AccountKey);
            CloudStorageAccount storageAccount = CloudStorageAccount.Parse(UserConnectionString);
            CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();
            CloudBlobContainer container = blobClient.GetContainerReference(ContainerName.ToLower());
            if (container.CreateIfNotExists())
            {
                container.SetPermissions(new BlobContainerPermissions { PublicAccess = BlobContainerPublicAccessType.Blob });
                return container.Name;
            }
            else
            {
                return string.Empty;
            }
        }
    }

Now let us examine the above code line by line.

  • In first line I created the connection string for the azure storage. It takes two parameters, account name and the account key. These values are passed as input parameter to the function. I am using these two parameter to create connection string.
  • Using CloudStorageAccount to parse the connection string from the constructed string.
  • Creating the CloudBlobClient
  • Getting the container reference of the BLOB.
  • If container reference does not exist, creating new container.
  • On successful creation of the container function returns name of the container else empty string.

 


[HttpPost]
        public ActionResult AzureInfo(string AccountName, string AccountKey, string ContainerName)
        {

           var result= AzureUtility.CreateContainer(AccountName, AccountKey, ContainerName);

           if (result != string.Empty)
             {

                 return RedirectToAction("Index", "Home");
             }
             else
             {
                 return RedirectToAction("Index");
             }
        }

In the action we are using the utility class to create the container. In this way an azure container can be created from the MVC application.

I hope it is useful. Thanks for reading. Happy Coding.

What is Azure DocumentDB

Read full article on Falafel blog here

Recently I attended Cloud Camp by Microsoft India in Delhi. I had good time learning at the event. Besides other Microsoft Azure services like Azure Websites, Azure Mobile Services and Azure DocumentDB impressed me lot. In this post, I am sharing first level learning on Azure DocumentDB.

Azure DocumentDB is a NoSQL document database service offering on cloud from Microsoft. It allows us to work with schema free JSON documents using JavaScript and the HTTP protocol. It is a fully managed JSON document database service.

Some of the important points about the DocumentDB is as follows:

  • It is a schema free database
  • It has support of rich query and transaction processing
  • It uses JavaScript for the query
  • It works with JSON based data model
  • It works on HTTP protocol

Read full article on Falafel blog here

No Data tab in portal in Azure Mobile Services: Solved

Azure Mobile Service supports two platform for the backend. They are

  1. .NET backend
  2. JavaScript backend

I worked with JavaScript backend many times but with .NET backend it was my first attempt. So while creating Azure Mobile Service, I selected .NET platform as backend. To my surprise there is no Data tab available when you choose .NET backend.

clip_image002

Reason behind this is if you choose .NET backend data access becomes part of the .NET project and should be deployed from there. And in JavaScript backend Data tab would be visible in portal and scripts can run at the portal.

Fetching Windows Azure Mobile Services Data in XAML based Windows Store Application

In last post we started learning about Windows Azure Mobile Service in XAML based Windows Store Application. Read it here

In last post we learnt

  • Configuring Window Azure Mobile Service in portal
  • Consuming Windows Azure Mobile Service in Windows Store Application
  • Insert a record from application in Windows Azure Mobile Service data table.

In this post we will take a look on fetching records from table. I recommend you to follow Part 1 of this series here . I will start from where I left in part 1.

Let us design application page. There are two buttons. On click of first button we will fetch all data. On click of second button filtered data will fetched. Let us design application page as following


<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" >
 <Grid.RowDefinitions>
 <RowDefinition Height="*" />
 <RowDefinition Height="*" />

 </Grid.RowDefinitions>

<StackPanel Orientation="Vertical" Grid.Row="0">
 <Button x:Name="btnFetch" Click="btnFetch_Click_1" Content="Get Data" Height="72" Width="233"/>
 <GridView x:Name="lstBloggers" >
 <GridView.ItemTemplate>
 <DataTemplate>
 <StackPanel Orientation="Horizontal">
 <TextBlock Text="{Binding Name}" />
 <TextBlock Text="{Binding Technology}" />
 </StackPanel>
 </DataTemplate>
 </GridView.ItemTemplate>
 </GridView>
 </StackPanel>
 <StackPanel Orientation="Vertical" Grid.Row="1">
 <StackPanel Orientation="Horizontal">
 <TextBox x:Name="txtSearch" Height="59" Width="436" />
 <Button x:Name="btnFilterfetch" Click="btnFilterfetch_Click_1" Content="Get Filtered Data" Height="72" Width="233"/>
 </StackPanel>
 <ListView x:Name="lstFilterBloggers" Margin="368,20,271,-599">
 <ListView.ItemTemplate>
 <DataTemplate>
 <StackPanel Orientation="Horizontal">
 <TextBlock Text="{Binding Name}" />
 <TextBlock Text="{Binding Technology}" />
 </StackPanel>
 </DataTemplate>
 </ListView.ItemTemplate>
 </ListView>
 </StackPanel>
 </Grid>

Yes this is not one of the best UI we can create but any way creating highly immersive UI is not purpose of this post. Right now UI will look like below image

image

Now to fetch all the records you need to follow following steps

Define Global variables


MobileServiceClient client;
 MobileServiceCollectionView<TechBloggers> items;
 MobileServiceCollectionView<TechBloggers> filteredItems;
 IMobileServiceTable<TechBloggers> bloggerstable;


You need to create mobile service table client in application. That can be created as following


public MainPage()
 {
 this.InitializeComponent();
 MobileServiceClient client = new MobileServiceClient("https://youappurl", "appkey");
 bloggerstable = client.GetTable<TechBloggers>();

 }

&nbsp;

Next you need to create entity class representing table from the Windows Azure Mobile Service. Let us create entity class as following. We are creating entity class TechBloggers.


public class TechBloggers
 {
 public int id { get; set; }
 [DataMember(Name="name")]
 public string Name { get; set; }
 [DataMember(Name = "technology")]
 public string Technology { get; set; }

}

On click event of button you can fetch all data from Mobile Service Table as following


private void btnFetch_Click_1(object sender, RoutedEventArgs e)
 {

items = bloggerstable.ToCollectionView();
 lstBloggers.ItemsSource = items;

}

You can fetch filtered data as following. We are filtering data on search term given in textbox.

private void btnFilterfetch_Click_1(object sender, RoutedEventArgs e)
 {
 filteredItems = bloggerstable.Where
 (blogger => blogger.Technology == txtSearch.Text)
 .ToCollectionView();
 lstFilterBloggers.ItemsSource = filteredItems;

 }

&nbsp;

When you run application you will find all data and filtered data as following

image

In this way we can fetch data from Windows Azure Mobile Service. In next post we will get into update and deletion of record. I hope this post useful. Thanks for reading.