Re-sizing images with Image Resizer in .NET

Image Resizer is a Nuget package that allows resizing images in .NET in a very simple and efficient way. Hereby I am describing steps to use ImageResizer.

 

 1. Install ImageResizer from NuGet. Either search in the NuGet or run the following command in Visual Studio Package Manager Console - 

     PM > Install-Package ImageResizer

 

 2. Describe your resize settings as follows - 

 

 var imgSettings = new ResizeSettings {

    MaxWidth = maxWidthYouWant, // Can be any integer

    MaxHeight = maxHeightYouWant, // Can be any integer

    Format = formatOfYourChoice // Example - "jpg"

 };

 

// Apply resize settings to the image

// inputStream represents the original image (as FileStream/MemoryStream)

// outputStream represents the output stream after resizing

ImageBuilder.Current.Build(inputStream, outputStream, imgSettings);

 

var resized = outputStream.ToArray(); // Represents byte array of the image after resizing

 

Image resizing maynot be simpler than this and that also without performance overhead. And there are some more super cool features you can get here.

Deploying to Microsoft Azure Web Site from GIT

Microsoft Azure supports direct deployment from GIT. That is very much helpful if we have to publish our codes on a regular basis or multiple times a day.

 Following are the steps to set up the Azure deployment from source control - 

 

 1. Here I will assume you are already having a local GIT repository, if not, then get GIT and create one repository and put your source code in that.

 2. Login to Azure Portal.

 

 3. Select the web site for which you want to activate deployment.

 

 4. Goto DASHBOARD Tab.

 

 5. On quick glance section ( right side of the page ) select Set up deployment from source control - this will open up SET UP DEPLOYMENT dialog.

 

 6. Create your user name and password.

 

 7. Copy generated GIT URL.

 

 8. Open Git Bash.

 

 9. Change directory to GIT repository root.

 

 10. Run command - git remote add azure generatedGITUrl. So, for example, if the generated GIT Url ( from point #7 ) is say "xxx@yyy.scm.azurewebsites.net:445/therepository.git", then the command will be as follows - 

git remote add azure xxx@yyy.scm.azurewebsites.net:445/therepository.git

 

 11. For deploying local GIT repository content, run command -  git push azure master

 

 And that is all, every time you want a deploy, you just need to run the command of Point #11, and you are done. Easy and simple steps to make our life easy and in a better way.

Easy and quick PDF generation using Rotativa

Here are the steps to gerenarte a PDF file in MVC application using Rotativa.

 

1. Install Rotativa from NuGet package. Search it in NuGet or install from Package Manager Console by the following command -

Install-Package Rotativa

 

2. Write an action method in controller that will return a View that will contain the contents you want to have in your PDF. For example, if you want to have a static text in your PDF like "Hello World", the view will have the text into it. In the conventional way you can use ViewModels to bind data to view and create your dynamic View. The ultimate aim is to generate a View as you want to have the PDF.

 

public ActionResult PDFView()

{

   var customViewModel = new CustomViewModel();

   

   // Code to populate the ViewModel with data..

   return View(customViewModel);

}

 

3. Set href of the action link (which is clicked to generate PDF) as an action method which will inturn call the previous action (PDFView) written and return the previous action as PDF. Here is the code sample -

 

public ActionResult ExportPDF()

{

  return new ActionAsPdf("PDFView") {FileName = "GeneratedPDFName.pdf"};

} 

 

The FileName is the generated PDF file name.

 

This is all and you will get the PDF generated and downloaded to the browser.

Using Kendo validator with MVC

Kendo validator is very much useful in client-side validation and displaying error message to the user. If you are using ASP.NET MVC, then you can also take benifit of Data Annotation to validate any input field and showing custom validation message.

While we are sending form data to surver side, mainly we follow any of these two methods -

1. Submitting the complete form.
2. Using ajax 'POST' method and sending the form data to the desired action method.

In this article, I will be discussing how you can take advantage of kendo validator and data-annotation attributes for client-side validation.

First, let me give an overview of my ViewModel class and View code -

The above image shows a part of my view-model class. As you can see, I am using data-annotation attributes to define if the field is required and what should be the error message that will be displayed to the user if the validation fails.

Ok, let us now move forward and have a look at the html (cshtml) code.

The upper image shows my cshtml code (again a selected part – I am showing the code only for the required fields). This cshtml is using the View-model class (that is shown earlier) and I am defining a seaparate div (with class 'validation-error-message' – which is my custom class) to display the custom error message that I have defined in the "ErrorMessage" section of the view-model class.

Using this separate div is not mandatory, I am using this to avoid any formatting issues.

You must have references to kendo.default.min.css, jquery.min.js, kendo.all.min.js in the View as per the order.

Now, let us move into the two above mentioned cases -

Complete form post to the action -

In this case, we will have a submit button to post the form data. Call your JavaScript function for validation on click of the submit button. Like -

<input type = "submit"  id = "btnSubmit"  value = "Submit" onclick = "ValidateInputFields();">

Your function for validation should contain the following code -

function ValidateInputFields() {

     $('#formID').kendoValidator();

}

Or, you can bind the 'submit' event with the button -

$('#btnSubmit').bind('submit', function() {

     $('#formID').kendoValidator();

});

And you are done. Obviously, if the input field validation fails, the form does not get posted.

AJAX 'POST' method to post form data to action method -

In this case, there won't be a complete form post and we need to manually restrict the form posting to the action method if the input field validation fails, so, our approach will change a bit.

Unlike previous case, in this case, on button click, we can directly call our function for the ajax call to post form data and check for validation before doing the post operation.

<input type = "button"  value = "submit"  onclick = "PostFormData();">

In the PostFormData function -

function PostFormData() {

     var validator = $('#formID').kendoValidator().data('kendoValidator');

     

     // Check for input field validation
     if (validator.validate()) {

           // Your code for ajax call

     }

}

At the end, when user clicks the submit button and the input fields fail validation rules, the validation message is displayed to the user -

So, using kendoValidator, we can implement client-side validation easily – with less amount of code and can get a beautiful UI to display error message to the user.

Working with Kendo and MVC

Overview :

Kendo UI for ASP.NET MVC provides helper classes for the Kendo UI JavaScript framework. Using ASP.NET MVC one can easily configure and work with Kendo UI controls without writing big Javascript functions and all – Just with the help of these Helper classes.

Installation and Getting Started :

You can get more details and the installer here. You just need to install the installer and you are done.

To work with Kendo and MVC, you need to create a new "Kendo UI for MVC Web Application" – That is available under Templates > Visual C# > Web in the New Project window.

An alternative way is to Click on the Telerik Tab > Kendo UI for ASP.NET MVC > Create New Kendo UI Project

You can check that all the required Kendo script references are already added under Scripts > Kendo folder.

A deeper look :

In this section, I will be discussing on some very basic and widely used Kendo controls and their implementation with MVC helper classes.

1) DatePicker :

First, I will be discussing on the DatePicker control – how easily we can create a DatePicker control and how we can attach events to it.

This is how the Controller looks like -

So, the controller does nothing but returns the View. No trick we are playing with the Controller.

Let us take a look into the View -

Yes!! This is all we need to write in our View to get a nice looking Kendo DatePicker. No Javascript, nothing. Just the MVC wrapper classes.

So, how does this look in the browser? Let us have a look into the UI -

                     

We can select date from the Calender or we can type date at the text box. We can select between months and years as well.

Event attachment :

Now, if we want to attach any method to the Date-Change event, this is how we can do this.

Let's assume, if the calender date is changed, then, we will be showing a simple alert message to the user like – "Date selection has been changed!". So, here we go -

We will modify our View like -

And we will define the DateChanged method through Javascript like -

Other than Change event, we can have date-picker Open and Close events as well.

2) Grid :

Grid is one of the very powerful and widely used controls. In this section, I will be discussing how we can implement a Grid control using MVC helper classes and bind data to the Grid using Ajax.

Background – We have one Employee model like -

We need to create a Grid where we will be displaying EmployeeID, NationalIDNumber, Gender and HireDate as columns (randomly selected) – we donot need any other column to display.

This time, let us have a look into the View first -

Now, let us quickly discuss what we see in the upper code section -

• The code section shows that the Grid we are going to create is of type Employee.
• We are providing a DataSource and we are saying it should be Ajax. [ dataSource.Ajax() ]
• We are providing the Action and the Controller name for reading the data. [ .Read(read => read.Action("Employees_Read", "Grid")) ] - Here Grid is theController name and Employees_Read is the Action for reading Employees data.
• We are specifing which columns we want to display.
• We are making the Grid Pageable – The grid will be using Pagination.
• We are making the Grid Sortable – We can sort the column values.

So, in the controller, we need to write the Employees_Read method and return Employees data from that. Here is how the Controller looks like -

Here AdventureWorksEntities is the Entity I am using.

In UI, this is how the Grid looks like -

The Grid will be using Server side pagination as well, to explain, if the page size is 10 (as our upper example) this will fetch 10 results at a time only and results will come upon request.

So, when I will ask for say, Page no. 6, then only the results for Page 6 will be fetched from DataBase. This improves the application performance as well and we don't need to worry about the server side pagination.

3) Slider :

Next I would like to discuss on Slider control. This is again a simple and widely used control. Again we are not playing any trick with the Controller – the Controller will just return the View.

Let us have a look into the View -

Here we are setting the options for the Slider control -

.Min(0) –> Sets minimum value for the control.

.Max(10) -> Sets maximum value for the control.

.SmallStep(1) -> Sets small-step value.

.LargeStep(2) -> Sets large-step value.

.ShowButtons(true) -> Sets if we need to show the buttons. Default is true. If we pass false, buttons will not be shown.

.Orientation(SliderOrientation.Horizontal) -> Sets orientation for the slider – Horizontal/Vertical.

.TickPlacement(SliderTickPlacement.TopLeft) -> Sets tick placement position.

.Events(e => e.Change("OnSliderSlide")) -> Binds OnSliderSlide method to Change event. We can also have Slide event.

In UI, the slider looks like -

4) Menu :

Menu control is the next one I will discuss. As we all know, this is very very important and is almost a mandetory one in all the applications we work with. Here, I will be showing how we can create Menu control with Kendo helper classes in MVC. I will be showing the example with hard-coded data to make it simple, but as of our need, we obviously can fetch and use data from DataBase.

We can add elements and sub-elements into the Menu control just like the following code -

The code is simple and self-explanetory. This is just adding the items and sub-items into the menu.

So the UI generated with this code will be like -

The items will be on collapsed mode initially, it will expand when you hover on.

5) Editor :

The final control I would like to discuss is the Editor control. This one also we can create by a single line of code if we are using MVC helper classes for Kendo. All the Editor functionalities default to it.

Obviously we can change the defaults and create our custom functionalities etc. In the control.

Let us take a look into the View -

Believe me or not, that is the only thing we need to do to get an Editor control with all the default functionalities! The UI will look like -

We can write and edit text there, apply styles, formats and all we can do with a normal text editor.

Sometimes, we need the editor with some initial text into it. So, we can do something like this -

So, now the editor will be created with the "This is a default Value" text in it. We can remove the default tools from the editor and add our own custom tools as well if we need.

There are many more controls provided by Kendo as part of MVC helper class to make our life easier. Here I have chosen and discussed on some very basic and mostly used controls. We can get more details and demos from the Kendo site which is provided at the begining of this article.

Hope these will be helpful in reducing our effort and getting the equivallent amount of work output as before. Let us enjoy coding.