Twitter Bootstrap Tutorial Intro - First App using Templates

This is the Step by step Twitter Bootstrap Tutorial Intro - First App using Templates.

In this Bootstrap tutorial for Beginners we create in 5 minutes a First Bootstrap App , for use on all  Mobile devices :iPhone, iPad, Tablets, and also desktops, by using Bootstrap Templates.
Responsive layouts are part of the Mobile First web design approach, and can be easily created by using free templates, which you can alter at your wish , and give you a quick start for your App .
Here we'll be using the free templates from www.initializr.com , that will show this way:

And this is how it looks in a Mobile Emulator, in iPhone display:

Twitter Bootstrap Tutorial Intro - First App using Templates

In just 5 minutes , we'll have a Twitter Bootstrap web page working, so that you can customize it at your wish. We'll do that using Bootstrap templates.
Therefore, browse to http://www.initializr.com/ :

Here, choose the third Template, the one named "Bootstrap" , by making click on the button. Then, deselect or select the options at your wish:

For example, i deselected the "Google Analytics" option, to not bring the markup for Analytics.
You can see at the footer the query string that is going to be sent to the server: if you select/deselect options, this will be reflected there.
Then, click the "Download" button.

Open the .zip file and take a look at its contents:

You will notice that there is an "index.html" file, which is the Bootstrap template, and some folders which hold the javascript and CSS3 files. Opening the js folder, there is a main.js file which is your empty javascript file to write your code, and a "vendor" folder:

The  "vendor" folder is holding all javascript frameworks, like jquery, bootstrap, etc:

The same thing for the styles: you have a css folder holding all CSS3 files and also an empty  file for you : "main.css" :

Open the Index.html file with your browser, and see the desktop appearance of the template:

Using the free Ripple emulator, ( you can read a short tutorial about installing the Ripple emulator here ) , this is how the template appears at a Tablet:

And this is how it looks at a iPhone 5 :

Here you can see the Navbar:

Now take a look at the Index.html file: the Head element contains references to the CSS3 files, and checking for older browsers, as follows:

The Body tag contains a Bootstrap Navbar which also holds a Form for Login:

Then, there is a div element of the Bootstrap's CSS Class "Jumbotron":

Which is displayed this way:

Then, there is the central part of the file, wrapped in a div of Class "Container":

And finally there is a Footer:

The footer contains scripts which run only after the whole html has been loaded, and also has a check for the loading of the jQuery framework, from the CDN(Content Delivery Network). If the jquery failed to be brought, then a local file will be used, which resides at the "js/vendor" folder .

Both Contents and Footer are displayed this way:

      by Carmel Schvartzman

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

Upload a custom CSS3 Web Template to your Blogger's Blog

In this article we upload a custom CSS 3 web template to a Blogger's blog, to change the web site appearance, using the free CSS3 web templates elegantly and well designed by www.deluxetemplates.net/. DeluxeTemplates keeps creating excellent CSS templates since 2009, specially optimized for Blogger and for Wordpress.

Blogger offers several templates for your Blog, but also offers the flexibility of accepting your custom CSS template, if you found that the default templates are not enough. Blogger accepts uploading your custom CSS template, provided it is an XML file which complies with special tags used by Blogger to display menus and widgets:

To setup your template, browse to your Blog and open the "Template" tab:

There you'll see the default templates:

Locate the "Backup/Restore" button and click it:

First & very important: if you have a fairly good template installed, BACKUP it downloading the template:

Next we get an elegant CSS3 template web site from "DeluxeTemplates", browsing to the "Blogger" templates, where you can find Personal, bussiness, Tech, Music, and more templates' categories:

Select your template and download it:

Open the ZIP file, and you'll see several links to pages answering the FAQ questions, and also one XML file:

Select the XML file and upload it:

And that's it!! Just open your Blog to see the new CSS style & design:

That's all!!!!
In this post we've learned step by step how to upload a custom CSS 3 web template to a Blogger's blog, to change the web site appearance, using the free CSS3 web templates elegantly and well designed by www.deluxetemplates.net/. If you like to learn a some more customized design, you can  learn using the Twitter Bootstrap in this short tutorial. The 5 minutes Twitter Bootstrap installing instructions are here . Easy CSS3 graphical explanations for beginners can be found here.
Enjoy coding.....

By Carmel Shvartzman

עריכה: כרמל שוורצמן

Step by Step how to create an Ajax enabled Master-Details WebGrid using a Child Action and a Partial View

        By Carmel Shvartzman

In this tutorial we'll learn how to create an Ajax enabled Master-Details WebGrid using a Child Action and a Partial View  . The parental Grid will expose data dynamically loaded from database and sent by the Action method from the web server, and will offer CRUD (Create Retrieve Update Delete) functionality. Also, the Grid will send Ajax requests for paging, sorting and displaying related data in a Details <TABLE>  grid.

The Details WebGrid will fetch the Comments for the selected Posts, and will be served by a Child Action, where we could insert some Application logic and filter the data.
The webgrid will also redirect the user to another web page exposing all comments for a selected Post, web page which will use the same Partial View we're Ajax rendering in the Index web page as a Details table.
We'll want to create a Master-Details webgrid with CRUD functionality , showing as follows:

The style you see comes from a free CSS Template, that can be easely added to your application, as we already explained in this tutorial.

This tutorial will use data fetched from the Entity Framework, exposing the following classes:

For each Blog Post selected in the Master webgrid, we'll display all the related Comments in a subsidiary Details grid.

To create the Master WebGrid we must create our own View, and it will not be difficult if we take advantage of the Scaffolding capacities of the MVC environment. So first let's create a new Controller called "BlogController", automatically creating the necessary Views to cope with the CRUD functionality requirements. So right click over the Controllers folder, and add a new Controller:

Name it "BlogController", and select the template "MVC Controller with read/write actions and views, using Entity Framework":

The Context to use will be of course the one you named while creating your Entity Framework Data Model, and the Model will be the Blog class, because we'll be creating, updating and deleting Blog objects.
After you create the Controller, open it and take a look at the Action Methods created for you: there are action methods for displaying the list of Blog posts (Index method), to create new ones , to update them, and to delete:

Open the Views folder and see the Views that were created for you:

First of all, let's add a link inside the _Layout .cshtml file Menu, in order to browse to the Blog web page from the Home page:

We also add the Scripts.Render calls at the <header> of the _Layout file, in order to load the necessary jquery and CSS files:

Delete the @Scripts.Render("~/bundles/jquery") from the <footer> of the file:

If you want to perform more Ajax calls using @Ajax.ActionLink() , add also a reference to the "jqueryval" bundle: @Scripts.Render("~/bundles/jqueryval") :

Next, we'll need two new Actions in the Blog Controller:
1) a Comments Action method: for rendering the _PostComments template as a View
      at the url "/Blog/Comments/{ID}". You don't need to create a View for this Action method:

2) a DetailsGridComments Child Action method: for rendering the _PostComments  template as a Partial View while performing an Ajax call:

To create the Partial View, open the View's dialog and type the following:

Keep in mind we will use this Partial View as such, inside the Index View, and also as a regular View as the "Comments" View .
Inside the Partial View we got, there are two code areas automatically created, but which we don't need: the "Create" link and the "Edit" buttons, so delete it:

Also, customize the <table> as follows :

We want a WebGrid with paging-sorting capabilities,  instead of a table. So we'll replace the <TABLE> ta g at the Index file with an WebGrid Html Helper: open the Index View:

And comment the whole  <table> tag:

Next, we'll instantiate a WebGrid, using an overload of the extension method with the following parameters:

Back to the Index View,  create a <DIV> enclosure for the WebGrid to be Ajax replaced, and type the final code for the WebGrid  setting as its arguments the data included in the Model, the number of rows to display in each page (2) , and the container to be updated by the Ajax requests :

@{
    ViewBag.Title = "Index";
    WebGrid grid = new WebGrid(Model, rowsPerPage: 2, ajaxUpdateContainerId: "gridDIV");
}

Now we display the markup of the WebGrid using the GetHtml() WebGrid method,  and formatting the   picture field. Also we set the "BlogID" column as the one acting as the SELECTOR that will be clicked by the user in order to Ajax-load all related Comments:

Also, we set the other three columns as hyperlinks to take the user to a "Comments" web page exposing all the comments for a selected Post. We do that using the "format:" parameter, in two ways:
1) we render directly the markup with the <a> tag
2) we return an MvcHtmlString object representing the hyperlink, and enclosing the picture: clicking the    picture will take the user to the "Comments" web page:

We automatically got the paging and sorting WebGrid functionalities. We also got all CRUD functionality that was there before: deleting, editing , and so, by copying the CRUD block that you commented before(inside the <table> tag):

Now return to the Index View, to add the code that will display the Partial View. What we do is to check that some row has been selected in the WebGrid, and then we fetch the selected row, in order to get the ID of the chosen Post.
If the row is not null, we send that ID to a Child Action using the RenderAction() function and that way we got all related comments for that post:

The code (to copy-paste) is the following:

<div id="gridDIV">
@{
     
    @grid.GetHtml(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("Text",format:@<a href='/Blog/Comments/@item.BlogID'><i>@item.Text</i></a>),
        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:@<td>
            @Html.ActionLink("Edit", "Edit", new { id=item.BlogID })
            @Html.ActionLink("Details", "Details", new { id=item.BlogID })
            @Html.ActionLink("Delete", "Delete", new { id=item.BlogID })
        </td>)
    })
    if (grid.HasSelection )
    {
        MvcApplication1.Models.Blog post = grid.Rows[grid.SelectedIndex].Value;
        Html.RenderAction("DetailsGridComments", new { id = post.BlogID });
    }
     
}
</div>

Notice that we get the VALUE of the selected row as a "Blog" object and NOT as a WebGridRow. Save the project and refresh the browser:

Notice that you got all Paging-Sorting functionalities in an Ajax enabled mode. Now , if you click the ID field you get all the Comments as Ajax request:

We got all the Comments for that post. Now let's try the other Hyperlinks we added, clicking for example the Title or the Picture of some Post:

We are then redirected to the Comments web page, to see all Comments for the selected Post:

In this tutorial we've learned how to create an Ajax enabled Master-Details WebGrid using a Child Action and a Partial View .  
That's all!! 
Happy programming.....

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