Thursday, August 30, 2018

JQuery Auxiliaries

Capture drop down selection change.
Here my drop down control's id is : SessionList

$(document).ready(function () {
.
.
.

    $("#SessionList").on('change', function () {
        if ($(this).val() == 'selectionKey') {
            DoSomething();
        } else {
            DoSomethingElse();
        }
    });
.
.
.
});

Do a Call to Web API and capture the results

$(document).ready(function () {
.
.
.

    $.getJSON("API/Feedbacks/GetEventFeedbacks/",
    function (Data) {
        
        var questionListing = [];
        for(var i=0; i<Data.length; ++i){
            questionListing[i] = Data[i];
        }
.
.
.
});

Wednesday, August 8, 2018

Angular UI Grid ui-grid.woff file not found When Published to Azure

A typical scenario goes like  you have been using the Angular UI Grid in your local server. All the images in the grid were looking good (including the down & up arrows etc..). You published your web application to Azure and suddenly instead of the down & up arrows you get some text similar to Chinese fonts.

When you open up the developer console in the web browser, you get a 404 file not found error for ui-grid.woff.

The reason behind is that Azure does not have MIME types configured for several font file formats. Whereas, if you check on your local IIS the MIME file types are already configured


So the below entry must be added to web.config to include the mime types. If not Azure will simply return a 404 error even though the files are actually published to Azure.

<system.webServer>
    <staticContent>
        <mimeMap fileExtension="woff" mimeType="application/font-woff" />
    </staticContent>
</system.webServer>

Monday, August 6, 2018

Create Azure Storage and store images as blobs

1. Create a Storage Account

Connect to Azure portal.
In the left pane you can see the "Storage accounts". Click on the link.

On the top left hand side you can click on "Add" and add new storage account. Specify the storage name and etc.. You can either create a new resource group or use an existing group for your storage's resource group.

once created you get the below page, listing your storage accounts. click on the newly created storage account.

Note that you get a list of storage options which you can modify and add. You can  also get the connection string to the storage account under the "Access keys" section.

The next step is to create a container inside the storage to hold the blobs, in my care its going to be the images.


2. Create the container to store the blobs
Click on containers. create a new container. I have named it as "Images"


3. Now is the fun part. Coding to upload the images to Azure Blob Storage

        public string UploadImageUsingByteArray(byte[] byteArray, string fileNamewithGuid)
        {
            string blobUrl = string.Empty;
            try
            {
                CloudStorageAccount storageAccount = CloudStorageAccount.Parse(storageConnectionString); //here the storageConnectionString you can obtain from the storage properties under Access keys

                //Create a blob client
                CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();
                CloudBlobContainer container = blobClient.GetContainerReference(imageContainerName); //my container name is image
                container.CreateIfNotExists();

                if (container.Exists())
                {
                    CloudBlockBlob blockBlob = container.GetBlockBlobReference(fileNamewithGuid);
                    blockBlob.Properties.ContentType = "image/jpeg";
                    blockBlob.UploadFromByteArray(byteArray, 0, byteArray.Length);


                    blobUrl = blockBlob.Uri.AbsoluteUri; //returns the blob's URL. How awesome is that
                }
            }
            catch (Exception)
            {
                throw;
            }
            return blobUrl;
        }

Here I have used the option to upload a byte array using the method UploadFromByteArray(). You can also use the method UploadFromStream() if your input is a stream. It works for a file stream as well.

Refresh the container when your code has run, and you get your images in Azure blob

Thursday, August 2, 2018

Publishing to Azure and view added files

1. Create a Web App in Azure

In Azure select Web App under app service's selection and create an app service

Once the Web App is created, download the publish profile available under the Overview section of the App Service.



2. Publish project from Visual Studio

Use the downloaded publish profile to do the publishing. Import it while doing the publishing


During initial publishing it will ask for the connection string for the Azure database. When you do the following deployments you can go to the Connection tab in the publishing window and check the settings, and even validate the connection prior to the publishing.

From the second publishing on wards you can even do a preview on the changes which are going to Azure



3. Viewing added files

Once the publishing is done and if you need to check on the items which were uploaded to Azure Web App, you can simply use the Azure Kudu service Dashboard.

For this example lets say my web app URL is "http://mysite.azurewebsites.net". Then you can simply navigate through the file system by using the Azure Kudu service Dashboard. For our example the dashboard  URL would be something like : "http://mysite.scm.azurewebsites.net"