SOLVED - Error " there is no package called ‘bslib’ " on Heroku deployment from GitHub repository

In this tutorial we'll learn how to solve the  error " there is no package called ‘bslib’ " on Heroku deployment from GitHub repository  . 

This error occurs while deploying an app to Heroku from a GitHub repository . Your app works perfectly on your development machine, but it would fail on deployment, like this :

Step by step how to  solve the error " there is no package called ‘bslib’ " on Heroku deployment from GitHub repository  

First of all, notice that it seems to be an ENCODING problem : something does not look good with these symbols :  " â€˜bslib’ "

So probably you just have been trying of changing the encoding for your files, also at your machine or uploading again the files to your repository at GitHub.

However, nothing seems to help.

But if you take a closer look, the error states "...NO package called..."  : the PACKAGES are not there.

And inside the word  â€˜bslib’  you can realise the name of the unknown package .

So check whether you are loading this package :

In case you are not loading it, just add it to the setup installations : 

So, redeploy and take a look again: the app is now working:

That's all.... 

In this tutorial we've seen how to solve the  error " there is no package called ‘bslib’ " on Heroku deployment from GitHub repository  .
Happy programming.....
      By Carmel Shvartzman

כתב: כרמל שוורצמן

This review brings to you a free jQuery Plugin to create Custom Animations to be used into your Website , for both mobile and desktop displays . If you need some HTML5 specific animation to show your own customized reactions to the User's interactions, you can create your own jQuery animation and use it again and again:

Custom FREE  jQuery Plugin for creating custom Animations at runtime

jQuery Plugin to create Custom Animations

1) Using the present jQuery plugin, you can create your own Custom Animations and use them in your website. 
2) This jQuery plugin includes support for all CSS3 changes
3) Also includes callback functions and speed settings.

This Plugin can be get from the following GitHub repository:
https://github.com/CarmelSoftware/jQueryPlugin_CustomAnimation


The Plugin usage is explained in the following Tutorial:

http://carmelsoft.blogspot.com/2015/12/jquery-plugin-for-custom-animations.html

Snapshots: mobile devices :

desktop machines :

Plugin Utilization:

This jQuery Plugin for Custom Animations can be used as follows:

1) Custom animation creation  :

2) How to use the custom jQuery plugin in the code:

by Carmel Schvartzman - The MVC Club - The HTML5 Club

פיתוח: כרמל שוורצמן

MVC Ajax WebGrid with Sorting and Paging

In this Step by step MVC Ajax WebGrid with Sorting and Paging in 10 Minutes 

   we see how to build an Ajax enabled WebGrid using an jQueryUI Theme  in 10 minutes, following this simple steps :

1) Use MVC scaffolding and build your Model and Views
2) Select a jQueryUI Theme & download it
3) In the "Index" View, replace the Table with a WebGrid and enable Ajax


All the code in this tutorial , can be downloaded from the following GitHub repository:
https://github.com/CarmelSoftware/MVC_WebGrid

This is how this sortable paged Ajax WebGrid is shown in the Ripple Mobile Emulator , Nexus Galaxy settings:

MVC Ajax WebGrid with Sorting and Paging in 10 Minutes

The whole process of creating an Ajax WebGrid with a jQueryUI Theme , is as following:

1) Use MVC scaffolding and build your Model and Views:

First build your MVC project using EDM & Controller scaffolding.

2) Select a jQueryUI Theme & download it

Browse to http://jqueryui.com/themeroller/  , select your Theme, and download it.
After you unzip the folder, you'll see several files in it.
You do not need all of them. Just copy the following 2 files and folder to your MVC project:

Paste the files inside your MVC project as follows:

As you can see, the ONLY files that we'll use from the jQueryUI theme are the following:

1) JS folder :
     "jquery-X.X.X.min.js" (here get the latest version of jQuery)
     "jquery-ui.min.js"

2) CSS folder :
     "jquery-ui.css"

Add the following references to the _Layout file:

There is no need of referencing the "images" folder.

Also, you get the latest version of jQuery framework : at this moment, that version is 2.1.4

3) In the "Index" View, replace the Table with a WebGrid and enable Ajax

Then go to the "Index" view, and comment the Table that was scaffolded there.
Add the following markup to replace it:

<link href="~/Content/index.css" rel="stylesheet" />

@{ var grid = new WebGrid(Model, new[] { "Title", "DatePosted", "MainPicture" }, rowsPerPage: 3, ajaxUpdateContainerId: "gridDIV"); }


<div id="gridDIV">
@grid.GetHtml(tableStyle:"webgrid-table",headerStyle:"webgrid-header",

    columns: new[] {

        grid.Column("ID",format:(item) =>  item.GetSelectLink(item.BlogID.ToString()) ) ,
        grid.Column("Title",format:@<a href='/Blog/Comments/@item.BlogID'><b>@item.Title</b></a>),
        grid.Column("DatePosted","DatePosted", (item) => String.Format("{0:dd/MM/yyyy}", item.DatePosted != null ? item.DatePosted : DateTime.Now )),
        grid.Column("Picture",format:(item) =>
        { return new MvcHtmlString("<a href='/Blog/Comments/" + item.BlogID +
            "'><img src='/Images/"+item.MainPicture+"' style='width:100px;height:100px;'></img></a>");
        }),
  
        grid.Column(
            format:@<div class="ActionsTH">
            @Html.ActionLink("Edit", "Edit", new { id=item.BlogID })
            @Html.ActionLink("Details", "Details", new { id=item.BlogID })
            @Html.ActionLink("Delete", "Delete", new { id=item.BlogID })
        </div>)
    })
</div>

This code enable Ajax on the Grid, which comes already with Sorting and Paging functionality.
Of course, customize this code with your Model's properties.

As you can see, we also reference a "~/Content/index.css" file:
Inside this file, i added background style found in the "images" folder, such as "images/ui-bg_fine-grain" corresponding to the Theme "Pepper-Grinder" .
If you select another Theme, replace the backgrounds accordingly.
Create this CSS file in the Content folder , and paste this style in it:


body {
    background: #f7f3de url("images/ui-bg_fine-grain_15_f7f3de_60x60.png") 50% 50% repeat;
}

.webgrid-table {
    font: italic 11px Verdana;
    width: 100%;
    display: grid;
    border-collapse: separate;
    border: solid 1px #98BF21;
    background: #f8f7f6 url("images/ui-bg_fine-grain_10_f8f7f6_60x60.png") 50% 50% repeat;
    padding: 5px 5px 5px 5px;
    text-align: center;
}

.webgrid-header th {
    width: 150px;    
    background: #eceadf url("images/ui-bg_fine-grain_10_eceadf_60x60.png") 50% 50% repeat;
    color: #FFFFFF !important;
    font: 900 14px Verdana !important;
    padding: 5px 5px 5px 5px;
    text-align: center;
}

.ActionsTH {
    width: 50px;
    background: #eceadf url("images/ui-bg_fine-grain_10_eceadf_60x60.png") 50% 50% repeat;
    color: #FFFFFF !important;
    font: 900 14px Verdana !important;
    padding: 5px 5px 5px 5px;
    text-align: center;
    width: 180px;
}

.webgrid-footer, .webgrid-footer a {
    background-color: #c67f1c;
    color: #FFF;
    font: 900 14px Verdana;
    padding: 3px 3px 3px 3px;
}

.webgrid-alternating-row {
    background-color: #e5d773;
    padding: 5px 5px 5px 5px;
}

.title-column {
    font: 900 13px Verdana;
    text-align: center;
}

.webgrid-img {
    width: 150px;
    height: 150px;
}

.webgrid-table a {
    text-decoration: none;
    color: #808080;
}

Important:
If you do not see the Ajax working (), it is because the jQuery scripts are lacking.
Just cut the jQuery.js file from the _Layout file to the <head> tag :
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
</head>

THE END

To use a Mobile devices Emulator, take a look at this short tutorial on installing the FREE Ripple Emulator.

That's all. Our WebGrid will be displayed this way:

      by Carmel Schvartzman

כתב: כרמל שוורצמן

Make a WCF RESTful Web Service with CRUD operations in 5 minutes

In this Step by step we Make a WCF RESTful Web Service with CRUD operations in 5 minutes 

   we see how to build a WCF REST web service with all CRUD operations to be Ajax called, all this   in just 5 minutes, following this simple steps :

1) Use Visual Studio templates and build an Ajax WCF web service
2) Customize it to support RESTful calls in JSON format (can also be XML)
3) Code all C.R.U.D. (Create Read Update Delete) operations


The whole code for this tutorial , can be downloaded from the following GitHub repository:
https://github.com/CarmelSoftware/WCF_RESTful_WebService
To build this service, we use a demo class which will be exposed by the REST service through HTTP calls, that you can later replace with your own EDM data model classes.
This an HTTP GET response from this RESTful WCF service :

And this other is an HTTP PATCH request-response from this WCF REST service:

Make a WCF RESTful Web Service with CRUD operations in 5 minutes

The whole process for making this REST service , is as follows :

1) Use Visual Studio templates and build an Ajax WCF web service:

First build an ASP.NET Web Application using this Visual Studio template:

Then, add an AJAX enabled WCF web service to the project:

You'll get the following usable skeleton for the WCF service:

Take a look at the web.config file to see the WCF service configuration:

As you can see , there is an endpoint which wears the name of the Web service class.

The "enableWebScript " behavior sets that the service will respond to AJAX calls.

2) Customize it to support RESTful calls in JSON format (can also be XML)

First thing we do, is to change the endpoint behavior to turn it into a REST service, using the "webHttp" directive, as follows:

Notice that this directive replaces the "enableWebScript" one.

To make run this service, we design a demo class called "Data", which will be exposed by the REST service through HTTP calls:

This data will be decorated with the DataContract directive, and the properties will be DataMembers.

We also add some constructors to create some records and return them by the service.

After you have your WCF RESTful service working, you will replace this demo class with some EDM data model classes of your own.

Remember to declare "serializable" your model.

3) Code all C.R.U.D. (Create Read Update Delete) operations

Then go to the WCF class and replace the "DoWork" method with the HTTP GET method to return ALL  items:


HTTP GET :

We specify the handle for HTTP GET requests, by using the attribute "WebGet".

Also, we stipulate the response format as JSON, since the default is XML.

And we set an UriTemplate as "/Get" , which will differentiate this method from the second GET one, which will return only one item according to the ID, which you will code as follows:

Notice that the return value is an array of Data objects and a single Data object, accordingly:

HTTP POST :

The POST HTTP verb is used to CREATE a new item, and we define it using the WebInvoke attribute:

We only want to check that our REST service works, so that just return the same Data object from the request (here i'm using POSTMAN to send HTTP requests. You can also use FIDDLER for that):

Important: the JSON object in the request's body must hold the field's data with exactly the same field names set in the DataMembers in your service: it is case-sensitive ("Id" means "Id", and no "id", got it?).

HTTP PUT:

The PUT HTTP VERB is used to update the entire item, i.e. to replace it with an updated one, and we do so by using the WebInvoke PUT option as follows:

The binder will give you the Date object from the request, if the names of the fields being the same as the class in a case-sensitive way, and also will give you the ID of the item to update. Check that you wrote EXACTLY the same variable name for this : "Put/{id}" == string "id" .

Test this method from POSTMAN sending an PUT request with a JSON object in the body:

Important: the JSON object inside the request's body must contain the field's data with exactly the same field names set in the DataMembers in your service: it is case-sensitive ("Id" means "Id", and no "id").

HTTP PATCH :

The HTTP PATCH verb is used in REST for updating just some of the object's fields:

Again, test it using this REST call with the HTTP PATCH verb:

HTTP DELETE :

Finally, create the method to handle HTTP DELETE requests, as follows:

THE END

That's all. Now you have a working WCF RESTful web service , and you can replace the Data model with your own.

      by Carmel Schvartzman

כתב: כרמל שוורצמן

MVC Ajax WebGrid with Administrator Buttons

This article is about an MVC Ajax WebGrid with Administrator Buttons and Sorting and Paging . 

  Here we see how to build an Ajax enabled WebGrid , which in case of an User Administrator will display management buttons (Edit - Delete) , and otherwise will not.

In case of an Administrator, the WebGrid will be displayed like this:

In case of a common User, the WebGrid will be displayed this way:




All the code in this tutorial , can be downloaded from the following GitHub repository:
https://github.com/CarmelSoftware/MVC_WebGrid_Admin

This is how this Administrator's Ajax WebGrid is shown in a Mobile Emulator :

In the case of a common User:

MVC Ajax WebGrid with Administrator Buttons

The whole code for creating this Ajax WebGrid with Management functionality , can be obtained from the following GitHub rep:
https://github.com/CarmelSoftware/MVC_WebGrid_Admin

Add the following markup  to the "Index" view:

@model IEnumerable<MyGrid_BL.Blog>

@{
    ViewBag.Title =  "Ajax WebGrid with Administrator Role Check";
    WebGrid grid = new WebGrid(Model, new[] { "Title", "Text", "DatePosted", "MainPicture", "Blogger" },
        rowsPerPage:2,ajaxUpdateContainerId:"GridDiv");

    IEnumerable<WebGridColumn> oColumns = new[] {

        grid.Column("ID",format:(item) =>  item.GetSelectLink(item.BlogID.ToString()) ) ,
        grid.Column("Title",format:@<a href='/Blog/Details/@item.BlogID'><b>@item.Title</b></a>),
        grid.Column("DatePosted","DatePosted", (item) => String.Format("{0:dd/MM/yyyy}", item.DatePosted != null ? item.DatePosted : DateTime.Now )),
        grid.Column("Picture",format:(item) =>
        { return new MvcHtmlString("<a href='/Blog/Details/" + item.BlogID +
            "'><img src='/Images/"+item.MainPicture+"' style='width:100px;height:100px;'></img></a>");
        })
    };

    if (User.IsInRole("Admin"))
    {
        oColumns = oColumns.Concat(new[] {grid.Column(
            format:@<div class="ActionsTH">
            @Html.ActionLink("Edit", "Edit", new { id=item.BlogID })<br />
            @Html.ActionLink("Details", "Details", new { id=item.BlogID })<br />
            @Html.ActionLink("Delete", "Delete", new { id=item.BlogID })
        </div>) });
    }
    
}

<h2>@ViewData["Title"]</h2>

<div id="GridDiv">
    @grid.GetHtml(tableStyle:"webgrid-tableStyle",headerStyle:"webgrid-headerStyle",footerStyle:"webgrid-footerStyle",alternatingRowStyle:"webgrid-alternatingRowStyle",columns: oColumns) </div>
<p style="text-align:center;">
     
    <input type="button"   value="Create New" onclick="javascript:location='/Blog/Create'" class="btn btn-default"/>
</p>

This code enable the Management Buttons on the Grid, only in case of a Power User such as an Administrator.

The code to set some User to the "Admin" Role, must be added to the "Acount" Controller, at the Register Action, and is as follows:

[HttpPost]
        [AllowAnonymous]
        [ValidateAntiForgeryToken]
        public ActionResult Register(RegisterModel model)
        {
            if (ModelState.IsValid)
            {
                // Attempt to register the user
                try
                {
                    if (!Roles.RoleExists("Admin"))
                    {
                        Roles.CreateRole("Admin");
                    }
                    WebSecurity.CreateUserAndAccount(model.UserName, model.Password);

                    string sAdmins = ConfigurationManager.AppSettings["Admins"];
                    string[] oAdmins = sAdmins.Split(';');

                    WebSecurity.Login(model.UserName, model.Password);

                    foreach (string sAdmin in oAdmins)
                    {
                        if (string.Compare(model.UserName, sAdmin) == 0
                                                &&
                            !Roles.IsUserInRole("Admin"))
                        {
                            Roles.AddUserToRole(model.UserName, "Admin");
                        }
                    }



                    return RedirectToAction("Index", "Home");
                }
                catch (MembershipCreateUserException e)
                {
                    ModelState.AddModelError("", ErrorCodeToString(e.StatusCode));
                }
            }

            // If we got this far, something failed, redisplay form
            return View(model);
        }

And these are the AppSettings to the Web.config file:


<appSettings>
    <add key="Admins" value="sa;sa1;sa2;sa3"/>
  </appSettings>

As you can see, we also reference a "~/Content/WebGrid.css" file:


body {
    background: #f7f3de url("images/ui-bg_fine-grain_15_f7f3de_60x60.png") 50% 50% repeat;
}

.webgrid-tableStyle {
    font: italic 11px Verdana;
    width: 100%;
    display: grid;
    border-collapse: separate;
    border: solid 1px #98BF21;
    background: #f8f7f6 url("images/ui-bg_fine-grain_10_f8f7f6_60x60.png") 50% 50% repeat;
    padding: 5px 5px 5px 5px;
    text-align: center;
    border-radius:10px;
}

.webgrid-headerStyle th {
    width: 250px;    
    background: #c67f1c url("images/ui-bg_fine-grain_10_eceadf_60x60.png") 50% 50% repeat;
    color: #FFFFFF !important;
    font: 900 14px Verdana !important;
    padding: 5px 5px 5px 5px;
    text-align: center;
    height:50px;
}

.ActionsTH {    
    background: #eceadf url("images/ui-bg_fine-grain_10_eceadf_60x60.png") 50% 50% repeat;
    color: #FFFFFF !important;
    font: 900 14px Verdana !important;
    padding: 5px 5px 5px 5px;
    text-align: center;
    width: 180px;
}

.webgrid-footerStyle, .webgrid-footerStyle a {
    background:#c67f1c url("images/ui-bg_fine-grain_10_eceadf_60x60.png") 50% 50% repeat;
    color: #FFF;
    font: 900 14px Verdana;
    padding: 3px 3px 3px 3px;
    height:50px;
}

.webgrid-alternatingRowStyle {
    background: #f8f7f6 url("images/ui-bg_fine-grain_10_f8f7f6_60x60.png") 50% 50% repeat;
    padding: 5px 5px 5px 5px;
}

.title-column {
    font: 900 13px Verdana;
    text-align: center;
}

.webgrid-img {
    width: 150px;
    height: 150px;
}

.webgrid-tableStyle a {
    text-decoration: none;
    color: #808080;
}
select {
      width: 200px;
    }

Important:
If you do not see the Ajax working  , it can be because some jQuery scripts are missing.
Just cut the jQuery.js file from the _Layout file to the <head> tag :
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
</head>

To install a Mobile Emulator, take a look at this tutorial on installing the FREE Ripple Emulator.

That's all. Our Administrator WebGrid will be displayed this way:

      by Carmel Schvartzman

כתב: כרמל שוורצמן

jQueryMobile using Ajax to load Json data to a Table

Here we review Step by step jQueryMobile using  Ajax  to load Json data to a Table For Android and BlackBerry

In this article we create in 20 minutes a jQuery Mobile App to load Json data to a toggle Table , where you can hide or display its columns,  via Ajax calls . This App is for use on all kind of Mobile devices : Nexus , iPad, iPhone, BlackBerry, Nokia,  Acer ,  ...
The data will be loaded in Json format via Ajax, in order to be displayed on this table .
This jQuery Mobile App looks like this:

jQueryMobile using  Ajax  to load Json data to a Table For Android and BlackBerry

For this article on jQuery Mobile , we'll be using the  jQuery and jQueryMobile Frameworks, so  browse to http://jquerymobile.com/ and jQuery , and obtain the latest versions of the frameworks via CDN  . If you want to use a Mobile Emulator, please refer to the following short tutorial on the Ripple Emulator.

After you got the files , add them to the Head of the HTML5 file:

First, add a Header with a NavBar , by making use of the data-role="page" and the data-role="header" , adding also a "fixed" attribute to fix the header in its place when the user scrolls the screen :

Create a "main" div element containing our table.  Use the data-role=table and the data-mode=columntoggle directives, which allow to display/hide the columns. However , if you don't write "columntoggle", the table will be shown in "Reflow" mode, then ALL columns will be displayed, and all the data will be grouped in chunks per row.

Inside the table,  define to each field a data-priority directive from 1 (most priority field) to 6 (less important column).

Notice that if you do not set a data-priority for a field, it will always be displayed:

We also write a button to call the function that brings the table data.

Finally, we code the markup for making a Footer with a Navbar :

The javascript which brings the data includes using the jQuery  $.ajax function, sending requests to the URL where is stored a file containing JSON data .

This HTTP GET request  tells the server that the data is expected in JSON format, so that the request's "Accept" header will include "application / json".

In case of successful performance, we do an $.each() loop on the received JSON data in the response, which includes key/value pairs, where the Key is the "id"  , and the Value is the Customer  JSON object.

Then, for each customer, we add to the tbody of the Table a Row with a Cell per column:

Is imperative that you REFRESH the Table after adding the Rows, therefore the table's Toggle functionality will work on the new rows.

We added also some style to this Mobile using the following  CSS3 file:

All the code can be downloaded from the following GitHub repository:

https://github.com/CarmelSoftware/jQueryMobile_Ajax_Json_Table

This is how the jQuery Mobile Toggle Table looks :

We hope that this article was helpful for you...

Happy programming.....

      by Carmel Schvartzman

כתב: כרמל שוורצמן