HTML to PDF using Asp.Net MVC and Rotativa.AspNetCore

We are going to learn Rotativa.AspNetCore tool to use to generate PDF file from View.

Its very simple to create pdf using Rotativa.AspNetCore tool.

Prerequisite
1. Visual Studio 2017 with ASP.NET CORE 2.0
2. Rotativa.AspNetCore 1.0.6

Let's start with step by step.

1. Creating Asp.Net Core MVC application.

2. During the Asp.Net Core MVC project creation.


3. Once Asp.Net Core MVC application configuration done then we are ready to install Rotativa.AspNetCore to the project.

4. Install Rotativa.AspNetCore nuget package

 
Install-Package Rotativa.AspNetCore -Version 1.0.6

5. After installing NuGet package Rotativa.AspNetCore. Let's do some configuration on startup.cs class.

- Add this setting to a startup.cs class inside the configure method to set a relative path to the wkhtmltopdf.exe file to access.

 
RotativaConfiguration.Setup(env);

6. Time to add few exes under the "wwwroot\Rotativa" folder. Going to add following files to the "Rotativa" folder.
- wkhtmltopdf.exe
- wkhtmltoimage.exe



Once done with file adding. Let's move the final step.

7. We have Home Controller, so going to utilize that controller and use it.
An Index Action will be like this.

 

public IActionResult Index()
        {
            var customers = GetCustomers();
            return new ViewAsPdf("Index", customers);
        }

        private List GetCustomers()
        {
            return new List()
            {
                new Customer(){ Name="Kalpesh", City="Ahmedabad"},
                new Customer(){ Name="Vijay", City="Surat"},
                new Customer(){ Name="John", City="New York"},
                new Customer(){ Name="Smith", City="Parth"},
            };
        }

We are passing customer object into view. so we are getting an output pdf with the customer list.


You can do more configuration and get various output.

Download source code from my Github

How to create controller using artisan syntax in Laravel 5

We know, Laravel framework is current technology trend. I am facing the issue to create controller in laravel 5.

When I was following along with Learning Laravel 4 Application Development

I attempt to create my first controller with artisan by doing the following:

 
php artisan Usercontroller:make users

But when I did for Larvel 5 application controller, getting an error:

 
  [InvalidArgumentException]                                        
  There are no commands defined in the "Usercontroller" namespace.  

  Did you mean this?                                                
      controller 

What is happening here?

Because of above mention artisan use for the Larvel 4 and not for Larvel 5.

So there is the way in Laravel 4, but in Laravel 5 you should use it backwards php artisan

Solution for controller creation in Laravel 5.

 
php artisan make:controller Usercontroller

Hope it will help to you to controller creation in Laravel 5 application.

Vue.js Data Binding Syntax

We know, Vue.js is the hot topic as per the current technology trend. Trying to cover Vue.js data binding syntax with the example.

Vue.js uses a DOM-based templating implementation. This means that all Vue.js templates are essentially valid, parsable HTML enhanced with some special attributes.

Interpolations

1. Text
The most basic form of data binding is text interpolation using the “Mustache” syntax (double curly braces):

It a simple variable value display withing HTML.

Here msg is the property of data object. It will also be updated value whenever the data object's msg property changes.

You can also perform one-time interpolations that do not update on data change:

 
This will never change: {{* msg }}

2. Raw HTML
When we need to display real HTML then you will need to use triple mustaches because we have seen double mustaches use for plain text display.

using triple mustaches contents are inserted as plain HTML.

3. Attributes
Mustaches can also be used inside HTML attributes:

When required dynamic ids or any attributes that time attributes binding useful.

Note that attribute interpolations are disallowed in Vue.js directives and special attributes. Don’t worry, Vue.js will raise warnings for you when mustaches are used in wrong places.

Binding Expressions
The text we put inside mustache tags is called binding expressions. In Vue.js, a binding expression consists of a single JavaScript expression optionally followed by one or more filters.

1. JavaScript Expressions
We have seen simple property key binding so far. But Vue.js actually supports the full power of JavaScript expressions inside data bindings:

Make sure whatever inside the mustaches it's one single expression. so you can't declare the variable or flow control condition inside the mustaches.

Vue.js is smart to raise the error if you put something in the wrong place.

2. Filters
Vue.js support optional "filters". Append to the end of an expression, denoted by the “pipe” symbol:

Vue.js provides a number of built-in filters so we can pick one of if here.

Here we are “piping” the value of the message expression through the built-in capitalize filter

Directives
Directives are the special attributes with v- prefix. I think each client-side framework have directives.
Vue.js has also provided the same with v- prefix. Directive attribute values are expected to be binding expressions, so the rules about JavaScript expressions and filters mentioned above apply here as well. A directive’s job is to reactively apply special behavior to the DOM when the value of its expression changes.

Here, the v-if directive would remove/insert the element based on the truthiness of the value of the expression greeting.

1. Arguments
Some directives can take an “argument”, denoted by a colon after the directive name. For example, the v-bind directive is used to reactively update an HTML attribute:

Here href is the argument, which tells the v-bind directive to bind the element’s href attribute to the value of the expression url. You may have noticed this achieves the same result as an attribute interpolation using href="{{url}}": that is correct, and in fact, attribute interpolations are translated into v-bind bindings internally.

Shorthands
Vue.js provides special shorthands for two of the most often used directives, v-bind and v-on:

1. v-bind Shorthand

2. v-on Shorthand

Hope you like it. Next blog also be on Vue.js