Paul Sheriff's Blog for the Real World

Manipulating HTML Tables – Part 5 (Editing Rows using an ID)

Tue, 03 Mar 2015 08:02:13 GMT

While we have been concentrating on just working with client-side code, at some point you are going to have to send the data back to the server. In addition, you will most likely get data from a server as well. Most of us assign a primary key (unique number) to each row of data. This ‘ID’ can be used to identify each row of data within the table. In this blog post you will see how you might use a primary key when manipulating data within a table.

NOTE: You should probably go back and read the previous blog posts in order to see what we are doing with tables.

The HTML

The HTML is exactly like that shown in my last blog post. I am presenting it here just so you can see it in its entirety.

<h1 class="text-center">Add Row to Table</h1>

<table id="peopleTable" class="table table-bordered

table-condensed table-striped">

<thead>

<tr>

<th>First Name</th>

<th>Email</th>

<th>Delete</th>

</tr>

</thead>

</table>

</div>

Person Information

</div>

First Name

</label>

<input type="text"

class="form-control"

value="Paul"

id="firstname" />

</div>

Last Name

</label>

<input type="text"

class="form-control"

value="Sheriff"

id="lastname" />

</div>

</label>

<input type="email"

class="form-control"

value="PSheriff@pdsa.com"

id="email" />

</div>

<button type="button" id="updateButton"

class="btn btn-primary"

onclick="updatePerson();">

Add

</button>

</div>

Figure 1: Use a unique ID for editing and deleting records in a table

Add Two Variables

When adding a new record, you assign a new unique ID to that record. This means you need a variable within your <script> tag that is not a part of any function. This makes that variable global to this page. Let’s call this variable ‘nextId’. You also want to keep track of the record you are currently editing if the user clicks on the edit button. Let’s call this variable ‘currentId’. The code to do this is shown below.

// Next id for adding a new person

var nextId = 1;

// ID of person currently editing

var currentId = 0;

</script>

Building a Row for the Table

You will either use the nextId variable or the currentId variable when you build a row to be added to your HTML table. So you build your buildPersonTableRow() function to accept a parameter called ‘id’ to which you can pass either of those two variables. This unique number will be added into a data- attribute on each button. The code to do this is shown below:

function buildPersonTableRow(id) {

var ret =

"<tr>" +

"<td>" +

"<button type='button' " +

"onclick='displayPerson(this);' " +

"class='btn btn-default' " +

"data-id='" + id + "'>" +

"<span class='glyphicon glyphicon-edit' />" +

"</button>" +

"</td>" +

"<td>" + $("#firstname").val() + "</td>" +

"<td>" + $("#lastname").val() + "</td>" +

"<td>" + $("#email").val() + "</td>" +

"<td>" +

"<button type='button' " +

"onclick='deletePerson(this);' " +

"class='btn btn-default' " +

"data-id='" + id + "'>" +

"<span class='glyphicon glyphicon-remove' />" +

"</button>" +

"</td>" +

"</tr>"

return ret;

}

Getting the Current ID

When the user clicks on the Edit button in the table, you call the displayPerson() function passing in the Edit button. In this function is where you need to grab the data- attribute that contains the unique id and assign it to the ‘currentId’ variable. The displayPerson() function is shown below:

function displayPerson(ctl) {

var row = $(ctl).parents("tr");

var cols = row.children("td");

currentId = $($(cols[0]).children("button")[0]).data("id");

$("#firstname").val($(cols[1]).text());

$("#lastname").val($(cols[2]).text());

$("#email").val($(cols[3]).text());

// Change Update Button Text

$("#updateButton").text("Update");

}

This function retrieves the current row the user clicked on using the parents() function on the ‘Edit’ button passed in and locating the <tr> tag. Once you have the row of the table you can use the children() function to retrieve an array of all of the <td> elements for that row. Since the Edit button is in the first column of the row, you can retrieve that button using the line shown in bold above. You then get the current id using the data() function to retrieve the data-id attribute’s value.

Update a Person

You now need to modify the updatePersonInTable() function to find the row in the table that contains this unique ID. You call this function using updatePersonInTable(currentId);. This function uses that id to locate the button that contains the data- attribute within your table. An example of the jQuery selector that might be built would be $(“#peopleTable button[data-id=’2’]). This selector returns a row in the table that has the data for the person you wish to edit. One you locate the row, replace that row in the table with the contents from what the user entered in the input fields on this form. The code for the updatePersonInTable() function is shown below.

function updatePersonInTable(id) {

// Find person in <table>

var row = $("#peopleTable button[data-id='" + id + "']")

.parents("tr")[0];

// Add changed row to table

$(row).after(buildPersonTableRow(id));

// Remove original row

$(row).remove();

// Change Update Button Text

$("#updateButton").text("Add");

}

Adding a New Row

Each time you add a new row to the table, use the ‘nextId’ variable to build the row of data. So you rewrite your addPersonToTable() function as shown below. Notice how you pass in the nextId variable to the buildPersonTableRow() function. After this new person has been created, increment the ‘nextId’ variable so the next person you add gets the next unique id.

function addPersonToTable() {

// First check if a <tbody> tag exists, add one if not

if ($("#peopleTable tbody").length == 0) {

$("#peopleTable").append("<tbody></tbody>");

}

// Append row to table

$("#peopleTable tbody").append(

buildPersonTableRow(nextId));

// Increment next ID to use

nextId += 1;

}

Summary

While the code in this blog post is not needed if you are just working 100% client-side, it will come in handy once you start working with data from the server. Using the data- attributes to store the primary keys is a great way to keep track of your unique ids.

Manipulating HTML Tables – Part 4 (Editing Rows)

Tue, 24 Feb 2015 15:17:45 GMT

You have learned how to add rows and delete rows from an HTML table in my last 3 blog posts. Now, let’s turn our attention to editing rows in an HTML table. Just like you added a Delete button to each row in your table, you will now add an Edit button as well (Figure 1).

Figure 1: Add an edit button to allow a user to edit a single row in the table

The HTML

The HTML is similar to that shown in my last blog post, with another <th> added to allow for a column where you will place an ‘Edit’ button. I have highlighted the change in bold in the code below.

<h1 class="text-center">Edit Row in a Table</h1>

<table id="peopleTable" class="table table-bordered

table-condensed table-striped">

<thead>

<tr>

<th>Edit</th>

<th>First Name</th>

<th>Email</th>

<th>Delete</th>

</tr>

</thead>

</table>

</div>

Person Information

</div>

First Name

</label>

<input type="text"

class="form-control"

value="Paul"

id="firstname" />

</div>

Last Name

</label>

<input type="text"

class="form-control"

value="Sheriff"

id="lastname" />

</div>

</label>

<input type="email"

class="form-control"

value="PSheriff@pdsa.com"

id="email" />

</div>

<button type="button" id="updateButton"

class="btn btn-primary"

onclick="updatePerson();">

Add

</button>

</div>

Creating a Row with an Edit Button

Just like you added a button for deleting a row when you add the user input to the row in the table, you add a button for editing a row as well. This is done exactly the same as what you did for the delete button, but the onclick event calls a different function, of course. In the code highlighted in bold you see the edit button is created. In the onclick for this button you call a function named displayPerson().

function buildPersonTableRow() {

var ret =

"<tr>" +

"<td>" +

"<button type='button' " +

"onclick='displayPerson(this);' " +

"class='btn btn-default'>" +

"<span class='glyphicon glyphicon-edit' />" +

"</button>" +

"</td>" +

"<td>" + $("#firstname").val() + "</td>" +

"<td>" + $("#lastname").val() + "</td>" +

"<td>" + $("#email").val() + "</td>" +

"<td>" +

"<button type='button' " +

"onclick='deletePerson(this);' " +

"class='btn btn-default'>" +

"<span class='glyphicon glyphicon-remove' />" +

"</button>" +

"</td>" +

"</tr>"

return ret;

}

Since you need to build the exact same HTML regardless of whether you are adding a new row, or replacing an existing row with new data, this new function called buildPersonTableRow() is created.

Display Data in Input Fields

When the user clicks on the Edit button in the table you need to do a couple of things. First you need to get the current row that is being edited right now and store that for future use. To do this you need to create a variable that is outside of any function within your <script> tags.

// Current row being edited

var currentRow = null;

</script>

Next you write the displayPerson() function to calculate the current row by getting the <tr> tag that is the parent for the ‘Edit’ button. You now get the individual <td> columns in an array by selecting all <td> elements from the current row. You use the appropriate columns to retrieve each input field such as first name, last name and email. You use the val() function to update each text box from each column of data. Finally, so we know that we are in ‘Edit’ mode as opposed to ‘Add’ mode, you change the text of the ‘updateButton’ to ‘Update’.

function displayPerson(ctl) {

currentRow = $(ctl).parents("tr");

var cols = currentRow.children("td");

$("#firstname").val($(cols[1]).text());

$("#lastname").val($(cols[2]).text());

$("#email").val($(cols[3]).text());

// Change Update Button Text

$("#updateButton").text("Update");

}

Updating the Data

When the user clicks on the updateButton it always calls the updatePerson() function. However, depending on what the text is in the updateButton will determine whether or not we are adding or editing. Remember that when you click on the ‘Edit’ button it changes the text of the update button. So in this function you simply test to see what that text says and perform the appropriate function based on that text.

function updatePerson() {

if ($("#updateButton").text() == "Update") {

updatePersonInTable();

}

else {

addPersonToTable();

}

If the Update buttons’ text says ‘Update’, call a method to update a person in the table. There are a couple of ways you can update a person. You already saved the row in the ‘currentRow’ variable, so you could reference each cell individually in that row and update each cell in the table using the val() function of each input field. Another method is to add the changed data to the row immediately after the current row, then delete the current row from the table. I have chosen to use the latter as this allows me to reuse the buildPersonTableRow() function we wrote earlier. Lastly, change the text back to Add on the update button. You could also clear the input fields if you want so the user knows they are back in “Add” mode.

function updatePersonInTable() {

// Add changed row to table

$(currentRow).after(buildPersonTableRow());

// Remove original row

$(currentRow).remove();

// Change Update Button Text

$("#updateButton").text("Add");

}

Summary

In the last 4 blog posts you saw how to add, edit and delete rows using 100% client-side code. With just a little HTML, jQuery and JavaScript you are able to create a nice way for users to add, edit and delete records without making a bunch of round-trips to the web server. This will go a long ways towards making your web pages really fast.

Manipulating HTML Tables – Part 3 (Deleting Rows)

Tue, 24 Feb 2015 15:16:40 GMT

My last two blog posts showed you how to add rows to an HTML table. Now, let’s learn how to delete a row from a table. In order to accomplish this you will need to add a ‘Delete’ button to each row of the table.

The HTML

The HTML for this sample is similar to my last blog post, with the addition of a new <th> to allow for a column in which you place a ‘Delete’ button. I have highlighted the change in bold in the code below.

Figure 1: Add a delete button to allow a user to delete a row from the table

<h1 class="text-center">Delete Row in Table</h1>

<table id="peopleTable" class="table table-bordered

table-condensed table-striped">

<thead>

<tr>

<th>First Name</th>

<th>Email</th>

<th>Delete</th>

</tr>

</thead>

</table>

</div>

Person Information

</div>

First Name

</label>

<input type="text"

class="form-control"

value="Paul"

id="firstname" />

</div>

Last Name

</label>

<input type="text"

class="form-control"

value="Sheriff"

id="lastname" />

</div>

</label>

<input type="email"

class="form-control"

value="PSheriff@pdsa.com"

id="email" />

</div>

<button type="button" id="updateButton"

class="btn btn-primary"

onclick="updatePerson();">

Add

</button>

</div>

Adding a Row with a Delete Button

When you add the user input data to the row in the table, you also need to add on the additional column with a button. The button will also have its onclick event filled in with the name of a function to call to delete a row in the table. Here is the addPersonToTable() function with the additional code.

function addPersonToTable() {

// First check if a <tbody> tag exists, add one if not

if ($("#peopleTable tbody").length == 0) {

$("#peopleTable").append("<tbody></tbody>");

}

// Append row to table

$("#peopleTable tbody").append(

"<tr>" +

"<td>" + $("#firstname").val() + "</td>" +

"<td>" + $("#lastname").val() + "</td>" +

"<td>" + $("#email").val() + "</td>" +

"<td>" +

"<button type='button' " +

"onclick='deletePerson(this);' " +

"class='btn btn-default'>" +

"<span class='glyphicon glyphicon-remove' />" +

"</button>" +

"</td>" +

"</tr>"

);

}

You can see in the code highlighted in bold above that you create a <button> in the last column that has the onclick event filled in with a call to a function named deletePerson(). Pass in ‘this’ to the function so the function can figure out which row the button is in, as this is the row we need to delete.

Delete a Row

The deletePerson() function is very simple. The instance of the ‘Delete’ button is passed to this function. From that you can use the jQuery function parents() to locate the button’s containing <tr> tag. Once you locate that <tr> tag you use the remove() function to eliminate that row from the table.

function deletePerson(ctl) {

$(ctl).parents("tr").remove();

}

Summary

Deleting a row from a table is a single line of code. It is just a matter of figuring out which row you are in, then applying the remove() function to that row. When you append a new row, you create a new button for the delete functionality that can call a function to perform the delete of the current row.

Manipulating HTML Tables – Part 2 (Adding Rows)

Tue, 24 Feb 2015 15:14:45 GMT

In my last blog post, I showed how to add a hard-coded row to a table using jQuery and JavaScript. Now, let’s make this a little more dynamic by gathering input from our user and adding that data to our table.

The HTML

In addition to the table shown in my last blog post, you now are adding three input fields for the user to input the data to add to the table. The user will input a first name, last name and email address (Figure 1) which will then be added to the table. Again, I am using bootstrap, but is not a requirement.

Figure 1: Add rows to a table using user input

<h1 class="text-center">Add Row to Table</h1>

<table id="peopleTable" class="table table-bordered

table-condensed table-striped">

<thead>

<tr>

<th>First Name</th>

<th>Email</th>

</tr>

</thead>

</table>

</div>

Person Information

</div>

First Name

</label>

<input type="text"

class="form-control"

value="Paul"

id="firstname" />

</div>

Last Name

</label>

<input type="text"

class="form-control"

value="Sheriff"

id="lastname" />

</div>

</label>

<input type="email"

class="form-control"

value="PSheriff@pdsa.com"

id="email" />

</div>

<button type="button" id="updateButton"

class="btn btn-primary"

onclick="updatePerson();">

Add

</button>

</div>

Besides the input fields, there is a <button> that when clicked upon will be responsible for adding the data entered into the table. This button, shown below, is a normal HTML button, and has an onclick event to call a function named updatePerson().

<button type="button" id="updateButton"

class="btn btn-primary"

onclick="updatePerson();">

Add

</button>

Adding a Row

After entering data into the text boxes, the user will click on the Add button. The click will fire a function called updatePerson(). This function calls another function called addPersonToTable(). It is within this method that you find code similar to my last blog entry, but instead of hard-coded values, retrieves the values from the input fields and places them into the <td> tags.

// This function is called from the button onclick

function updatePerson() {

// Add person to Table

addPersonToTable();

}

// Add row to <table>

function addPersonToTable()

{

// First check if a <tbody> tag exists, add one if not

if ($("#peopleTable tbody").length == 0) {

$("#peopleTable").append("<tbody></tbody>");

}

// Append row to the table

$("#peopleTable tbody").append(

"<tr>" +

"<td>" + $("#firstname").val() + "</td>" +

"<td>" + $("#lastname").val() + "</td>" +

"<td>" + $("#email").val() + "</td>" +

"</tr>"

);

}

</script>

This code is very similar to my last blog post, but uses jQuery to retrieve the values from the text boxes. Again, notice that you still should check for a <tbody> tag and ensure it is there before adding rows to your table.

Summary

By using jQuery and JavaScript you can build up a table without performing any post-backs to the server. This means that the results are almost instantaneous and leads to a very good user experience. Of course, you will still need a method to eventually post the data back to the server. This could be done by using JSON objects and storing the data in a hidden field. You could then supply another button to the user that would post back to the server and allow all of the added rows to be gathered from the hidden field and saved to a database.

Manipulating HTML Tables – Part 1 (Adding Rows)

Tue, 24 Feb 2015 15:13:30 GMT

Users continue to demand faster and more dynamic user experiences in web applications. One way to accomplish this is to start doing more with JavaScript and jQuery, thereby eliminating or reducing post-backs to the server. In this first blog post of many, I will show you how to work with HTML tables. In this first blog you will learn how to add rows to a table using JavaScript and jQuery.

The HTML

For these samples, I am using Bootstrap in order to have a nice appearance for my web page. However, Bootstrap is not required for these samples. The HTML I am using creates an empty table with just a <thead> for the headers of each column in the table. Note that there is no <tbody>. We will check for that in our jQuery and add one if necessary.

Figure 1: Adding rows to a table using jQuery

<body>

<h1 class="text-center">Add Row to Table (Hard-Coded)</h1>

<table id="peopleTable" class="table table-bordered

table-condensed

table-striped">

<thead>

<tr>

<th>First Name</th>

<th>Email</th>

</tr>

</thead>

</table>

</div>

</script>

</body>

Figure 2: HTML Table Markup

Adding a Row

Within the <script> tag, create a function called addRows(). This function is where you will use the append() method to add a <tr> with the appropriate number of <td> tags to form a row for your table. Use a jQuery selector to locate the id attribute of your table, and the <tbody> tag and append a <tr> and the <td> tags as shown in the code below:

function addRows() {

$("#peopleTable tbody").append(

"<tr>" +

"<td>Paul</td>" +

"<td>Sheriff</td>" +

"<td>PSheriff@pdsa.com</td>" +

"</tr>"

);

}

If you read the HTML I posted earlier, you will notice that I did not include a <tbody> tag within the table. So, if you were to run the addRows() function, then no rows will be appended to your table because the result of the selector comes back as nothing. First off, you really should always have a <tbody> in all of your tables. However, if you don’t, then no problem, you can always add one programmatically. First check to see if the selector of your table id and the <tbody> returns something. If it does not, then simply append a <tbody> tag to the table prior to calling the append() with the rows you wish to add. You do this with the code shown below:

if ($("#peopleTable tbody").length == 0) {

$("#peopleTable").append("<tbody></tbody>");

}

So, our complete method to add a couple or rows to our HTML table, looks like the code shown below:

// Add rows to <table>

function addRows()

{

// First check if a <tbody> tag exists, add one if not

if ($("#peopleTable tbody").length == 0) {

$("#peopleTable").append("<tbody></tbody>");

}

// Append row to the table

$("#peopleTable tbody").append(

"<tr>" +

"<td>Paul</td>" +

"<td>Sheriff</td>" +

"<td>PSheriff@pdsa.com</td>" +

"</tr>"

);

$("#peopleTable tbody").append(

"<tr>" +

"<td>Michael</td>" +

"<td>Krasowski</td>" +

"<td>Michaelk@pdsa.com</td>" +

"</tr>"

);

}

</script>

You can call the above function when the document is loaded by adding the jQuery document.ready function just before the ending </script> tag.

$(document).ready(function () {

addRows();

});

Summary

In this blog post you learned how to add rows to an HTML table using JavaScript and jQuery. One important check you should always make is to find out if a <tbody> tag exists, and if it does not, then go ahead and add it. While you could just append rows directly to the table and not to the <tbody>, you are not guaranteed where those rows will be appended. On different browsers, this could cause issues. Using the method presented here always ensures your table is properly formed.

New Pluralsight Course Just Released

Fri, 30 Jan 2015 15:48:18 GMT

Hi All,

I just had a new course published on Pluralsight. Check it out!

Build your own Bootstrap Business Application Template in MVC

Creating your own bootstrap template that you can reuse across many applications is simple. In this course you will build up a collection of components that you build into an MVC application. You will create both horizontal and vertical data-driven menu systems. You will see some jQuery libraries that can add great functionality to your MVC apps. In addition you will learn when you should use a library versus when you should create your own. You will see a collection of cool UI widgets that are much smaller than those you will download on the web. You will see how to create tables that can sort and page data both client-side and server-side. Finally you will learn to build maintenance pages with search, add, edit, and delete capabilities all one a single page.

http://pluralsight.com/Courses/bootstrap-business-application-template-mvc

Promo Video: http://www.pdsa.com/Plural_Sight/BootstrapTemplate-PromoVideo.mp4

Additions on a Bootstrap Panel

Wed, 31 Dec 2014 18:09:17 GMT

Additions on a Bootstrap Panel

The Bootstrap panel classes allow you to create a bordered area on your web page. The panel classes give you a title area, a body area and a footer area. Most designers add buttons within the footer area to perform different actions on the information within the panel. Sometimes they add additional drop-downs or buttons within the body of the panel to reload the data or take action. While these work, sometimes you don’t want to take up that real estate with those actions. Instead you can use the title area of the panel for these additions. This blog post will show you how to accomplish this.

Add a Reload Button

The first example you will learn is how to add on a ‘reload’ button to the right-most area of the panel as seen in Figure 1.

Figure 1: Add a Reload Button to the Panel’s Title area

To add this new button to the title, create an anchor tag within the <h1> or whatever HTML element you use for the panel title. I added a glyph from Bootstrap and the word “Reload” within this anchor tag. I then added one additional class called panel-right to that anchor tag as shown in the following code.

</span>

 CountryMusic

<a href="#"

class="panel-right glyphicon glyphicon-random">

 Reload

</a>

</h1>

</div>

// Other HTML here

</div>

The “panel-right” class is very simple and is responsible for the look and feel of the button on the right side of the panel. You first add a border around the button and modify the border radius. Add a margin-top to position the button in the correct location. Modify the padding and font-size as appropriate. Finally set the float to right so the button stays on the right side of the panel. Turn off all text-decoration on the anchor tag so you don’t get any underline on the button. All of the styles shown below will be placed into a .CSS file that you can then add to any page where you wish to use panel additions.

.panel-right {

border: 0.05em solid lightgray;

border-radius: 0.25em 0.25em;

margin-top: -0.2em;

padding: 0.3em;

font-size: 0.9em;

float: right;

}

.panel-title a,

.panel-title a:active,

.panel-title a:visited {

text-decoration: none;

}

Drop Down in Panel

Another example of an addition you could add to a panel would be a drop-down selector as shown in Figure 2.

Figure 2: Adding a Drop-Down in the Panel Title Area

Adding a drop-down is a little different from a simple button as shown in the last example. You need a little more room within the panel-title so instead of an <h1> element use a <div>. This gives just a little more room within the panel-title. In addition you can’t nest a div tag within an h1, so we are forced to use this outer div element. Within the <div> element, place another <div> to contain the Bootstrap class ‘dropdown’ and the panel-right class. Create your normal drop-down button as shown in the example that follows:

</span>

<span id="genre">Country Music</span>

<div class="dropdown panel-right">

<button class="btn btn-success"

id="selectButton"

data-toggle="dropdown">

Change Genre 

<span class="caret"></span>

</button>

<ul class="dropdown-menu" id="ulGenres">

<li><a href="#">Jazz</a></li>

<li><a href="#">Country</a></li>

<li><a href="#">Rock</a></li>

</ul>

</div>

</div>

// Other HTML here

</div>

The style you use for the panel-right is a little different from the previous example. You need a different margin-top and you need to turn off the border. So on this page you will include the .CSS file you created with the previous styles, then after this <link> you add the following styles to override the ones in the .CSS file.

rel="stylesheet" />

<style>

.panel-right {

border: none;

margin-top: -0.65em;

}

</style>

When you select an item from the drop-down selector you should change the title on the panel. You can use a little jQuery code to accomplish this. Add the following script at the bottom of your page to modify the text within the panel title when the user clicks on an item in the drop-down selector.

$(document).ready(function () {

$("#ulGenres li a").on("click", function () {

var text = $(this).text();

$("#genre").text(text + ' Music');

});

</script>

Summary

In this blog post you learned how to add some additions to the Bootstrap panel classes. Using the right side of the panel is a great way to allow your user to perform actions within the panel without taking up valuable real estate within the panel itself.

Displaying a Wait Message on an MVC Page

Tue, 23 Dec 2014 19:01:25 GMT

When a user clicks on a button on a web page, there can be a delay between posting back to the server and the next action that happens on the screen. The problem with this delay is the user may not know they actually clicked on the button and tries to hit the button again. It is important to give immediate feedback to the user so they know that the application is doing something. This post will show you how to disable the button, display a pop-up message and gray out the background before the post back happens thereby providing feedback to our user.

A Save Screen

In Figure 1 is a screen where the user might fill in some data, then post that data back to the server to save in a database. When the user clicks on the Save button you will add the ‘disabled’ property to the button, change the text of the button, pop-up a message in the middle of the screen and gray out the background as shown in Figure 2.

Figure 1: A sample screen that will perform some processing.

Figure 2: Give the user feedback that something is happening.

Changing the Button on Click

The first step is to create a simple JavaScript function that can be called from the onclick event of the Save button.

<button type="submit"

id="submitButton"

class="btn btn-primary"

onclick="return

DisplayProgressMessage(this, 'Saving...');">

Save

</button>

The DisplayProgressMessage first has to add the ‘disabled’ property to the button, then change the text of the button from ‘Save’ to ‘Saving…’. Notice that you pass ‘this’ and the text ‘Saving…’ to the DisplayProgressMessage. Here is the first pass at our DisplayProgressMessage function:

function DisplayProgressMessage(ctl, msg) {

$(ctl).prop("disabled", true);

$(ctl).text(msg);

return true;

};

</script>

Add Pop-Up Message

Add a pop-up message by creating a <div> with a <label> in it. Within the label, place the text you wish to display. Add a CSS class called ‘submit-progress’ to style the pop-up message. Set this <div> as hidden so it won’t show up until you want it to.

<label>Please wait while Saving Data...</label>

</div>

Create the submit-progress style using a fixed position on the screen. You will set the top and left to 50% to place this <div> in the middle of the page. Set some padding, width and margins that are appropriate for the message you are displaying. Also select a background and foreground color.

.submit-progress {

position: fixed;

top: 50%;

left: 50%;

height: 6em;

padding-top: 2.3em;

/* The following rules are the ones most likely to change */

width: 20em;

/* Set 'margin-left' to a negative number

that is 1/2 of 'width' */

margin-left: -10em;

padding-left: 2.1em;

background-color: black;

color: white;

}

Now update the DisplayProgressMessage function to display this message when the button is clicked:

function DisplayProgressMessage(ctl, msg) {

$(ctl).prop("disabled", true).text(msg);

$(".submit-progress").removeClass("hidden");

return true;

};

</script>

Notice in the above code that I chained the setting of the disabled property and the setting of the text on the button. This is not absolutely necessary, but it is a little more efficient as the selector only needs to be called one time.

Gray Out the Background

To provide even more feedback to the user that something is happening when they click on the button, you might gray out the whole web page. This is accomplished by applying a background color of ‘lightgray’ and an opacity of 50% to the <body> element. To do this add a style to your page that you can add to the <body> using JavaScript.

<style>

.submit-progress-bg {

background-color: lightgray;

opacity: .5;

}

</style>

Change your DisplayProgressMessage to add this class to the <body> tag when the button is clicked.

function DisplayProgressMessage(ctl, msg) {

$(ctl).prop("disabled", true);

$(ctl).text(msg);

$(".submit-progress").removeClass("hidden");

$("body").addClass("submit-progress-bg");

return true;

};

</script>

Summary

In this blog post you saw how easy it is to add some feedback to your user when they are about to call a long operation on the server. It is important to provide the feedback so they don’t try to click on the same button again, or try to navigate somewhere else while you are finishing a process. I am sure you can expand upon the idea presented in this article and apply it to your specific use cases.

A Simple Bootstrap Radio Button for MVC

Fri, 05 Dec 2014 09:03:30 GMT

A Simple Bootstrap Radio Button for MVC

In a previous blog post I talked about a simple push button style of radio buttones. This sample push button style can be applied to radio buttons too. This style of button is very easy to do with just some built-in Bootstrap styles and a little extra CSS.

Simple Radio Button

As a way to get a better looking radio button, you can wrap a radio button into a button as shown in Figure 1. What is nice about this style of radio button is it wraps the label together with the radio button. In addition, on a mobile device it is much easier to press as the whole button area is clickable.

Figure 1: Radio buttons wrapped into a button

To create these radio buttones you wrap the radio button within the normal Bootstrap class “checkbox”. You then add a label element with the classes “btn btn-default” around the radio button as shown in the following code:

@using (Html.BeginForm())

{

@Html.RadioButton("gender", "Male",

true, new { id = "IsMale" })

Male

</label>

</div>

@Html.RadioButton("gender", "Female",

new { id = "IsFemale" })

Female

</label>

</div>

}

To make it appear correctly, you have to add the following CSS to align the radio button and the text correctly within the button. That is all there is to it!

<style>

.radio .btn,

.radio-inline .btn {

padding-left: 2em;

min-width: 7em;

}

.radio label,

.radio-inline label {

text-align: left;

}

</style>

Summary

Creating better looking controls for your web page is sometimes very simple and just involves combing a couple of elements together along with a tiny bit of CSS.

A Simple Bootstrap Check Box for MVC

Wed, 03 Dec 2014 09:03:20 GMT

A Simple Bootstrap Check Box for MVC

I really enjoy working with Bootstrap and extending the styles to match what my customers want. Recently my customer wanted a simple push button style of check box and radio buttons. This turned out to be very easy to accomplish using the built-in Bootstrap styles and just a little extra CSS.

Simple Check Box

As a way to get a better looking check box, you can wrap a check box into a button as shown in Figure 1. What is nice about this style of check box is it really puts the label together with the check box. In addition, on a mobile device it is much easier to hit as the whole button area is clickable.

Figure 1: Check boxes wrapped into a button

To create these check boxes you simply have to wrap the check box within the normal Bootstrap class “checkbox”. You then add a label element with the classes “btn btn-default” around the check box as shown in the following code:

@using (Html.BeginForm())

{

@Html.CheckBox("IsJazz")

Jazz

</label>

</div>

@Html.CheckBox("IsCountry")

Country

</label>

</div>

@Html.CheckBox("IsRock")

Rock

</label>

</div>

}

To make it appear correctly, you have to add the following CSS to align the check box and the text correctly within the button. That is all there is to it!

<style>

.checkbox .btn,

.checkbox-inline .btn {

padding-left: 2em;

min-width: 7em;

}

.checkbox label,

.checkbox-inline label {

text-align: left;

}

</style>

Summary

Creating better looking controls for your web page is sometimes very simple and just involves combing a couple of elements together along with a tiny bit of CSS.

A Simple Bootstrap Radio Button for Web Forms

Wed, 03 Dec 2014 00:55:03 GMT

A Simple Bootstrap Radio Button for Web Forms

In a previous post I talked about creating a push-button style of radio button for MVC. This blog post will show how to create the same push-button radio button using Web Forms. There are only a few minor differences in the CSS and, of course, in the use of a Web Forms server control.

Simple Radio Button

Figure 1: Radio buttons wrapped into a button

<asp:RadioButton ID="IsMale" runat="server"

GroupName="gender"

Checked="true"

Text="Male" />

</label>

</div>

<asp:RadioButton ID="IsFemale" runat="server"

GroupName="gender"

Text="Female" />

</label>

</div>

To make it appear correctly, you have to add the following CSS to align the radio button and the text correctly within the button. That is all there is to it!

<style>

.radio .btn,

.radio-inline .btn {

padding-left: 2em;

min-width: 7em;

}

.radio label,

.radio-inline label {

text-align: left;

padding-left: 0.5em;

}

</style>

Summary

Creating better looking controls for your web page is sometimes very simple and just involves combing a couple of elements together along with a tiny bit of CSS.

A Simple Bootstrap Check Box for Web Forms

Wed, 03 Dec 2014 00:50:05 GMT

A Simple Bootstrap Check Box for Web Forms

In a previous post I talked about creating a push-button style of check box for MVC. This blog post will show how to create the same push-button check box using Web Forms. There are only a few minor differences in the CSS and, of course, in the use of a Web Forms server control.

Simple Check Box

Figure 1: Check boxes wrapped into a button

<asp:CheckBox ID="IsJazz" runat="server"

Text="Jazz" />

</label>

</div>

<asp:CheckBox ID="IsCountry" runat="server"

Text="Country" />

</label>

</div>

<asp:CheckBox ID="IsRock" runat="server"

Text="Rock" />

</label>

</div>

To make it appear correctly, you have to add the following CSS to align the check box and the text correctly within the button. That is all there is to it!

<style>

.checkbox .btn,

.checkbox-inline .btn {

padding-left: 2em;

min-width: 8em;

}

.checkbox label,

.checkbox-inline label {

text-align: left;

padding-left: 0.5em;

}

</style>

Summary

Creating better looking controls for your web page is sometimes very simple and just involves combing a couple of elements together along with a tiny bit of CSS.

Bind Custom Radio Buttons to Integer Data

Mon, 01 Dec 2014 23:28:12 GMT

Bind Custom Radio Buttons to Integer Data

In the last blog post I showed you how to bind radio buttons to a boolean value. In this blog post we will look at how to bind to integer values. In certain business applications you might have the user select a single value from a list of items coming from a database. You want to display these options as radio buttons and then retrieve the value the user selects.

Create List of Radio Buttons

If you look at Figure 1 you see a row of radio buttons using the custom look I created a few blog posts ago. This set of radio buttons comes from a collection of MusicGenre objects. Each MusicGenre class contains a GenreId and Genre property. GenreId is an integer value that represents the primary key. Genre is the string value such as ‘Jazz’, ‘Rock’, ‘Blues’, etc.

Figure 1: A list of Radio Buttons

The MusicGenre Entity Class

To create the list of radio buttons in Figure 1, you first need a MusicGenre class as shown in the listing below:

public class MusicGenre

{

public MusicGenre()

{

GenreId = 0;

Genre = string.Empty;

}

public MusicGenre(int id, string genre)

{

GenreId = id;

Genre = genre;

}

public int GenreId { get; set; }

public string Genre {get;set;}

}

Create a Manager Class

Next you create a “Manager” class to create the collection of MusicGenre objects. In this blog post you will use some mock data, but you could replace this with data from a real database table.

public partial class MusicGenreManager

{

public MusicGenreManager()

{

Genres = new List<MusicGenre>();

LoadAllMock();

}

public List<MusicGenre> Genres { get; set; }

protected void LoadAllMock()

{

Genres.Add(new MusicGenre(1, "Jazz"));

Genres.Add(new MusicGenre(2, "Country"));

Genres.Add(new MusicGenre(3, "Rock"));

Genres.Add(new MusicGenre(4, "Blues"));

Genres.Add(new MusicGenre(5, "Alternative Rock"));

}

Create a View Model

Now that you have these two classes created, create a View Model class that you can use from the Controller in our MVC application. This View Model class simply uses the two previous classes to populate a ‘Genres’ property that is a generic list of MusicGenre objects. We will also create one additional property in the View Model class to which to bind the selected genre id.

public class MusicGenreViewModel

{

public MusicGenreViewModel()

{

Genres = new List<MusicGenre>();

LoadGenres();

}

public List<MusicGenre> Genres { get; set; }

public int SelectedId { get; set; }

public void LoadGenres()

{

MusicGenreManager mgr = new MusicGenreManager();

// Get list of Music Genres

Genres = mgr.Genres;

}

Create a View

Create a .cshtml view page that will use the MusicGenreViewModel class that holds the list of MusicGenre objects. At the top of your view add the @model statement to specify you will be using the view model class. I added a little styling to provide some separation between each of the radio buttons.

@model BootstrapRadio2.MusicGenreViewModel

ViewBag.Title = "Data-Driven Radio Buttons";

}

<style>

.pdsa-radiobutton {

margin-right: .5em;

text-align: left;

}

</style>

Next you use the BeginForm statement to wrap all of the radio buttons and a submit button within a <form> tag. Notice that the RadioButtonFor() helper is binding to the SelectedId property in the View Model. If you select a radio button on the form and click the submit button, the GenreId from the 2^nd parameter to the RadioButtonFor() helper is moved into the SelectedId property.

@using (Html.BeginForm())

{

<h3>Data-Driven Radio Buttons</h3>

@foreach (var item in Model.Genres)

{

</span>

@Html.RadioButtonFor(m => m.SelectedId,

item.GenreId,

new { id = item.GenreId })

@item.Genre

</label>

}

</div>

<button type="submit"

class="btn btn-success">Submit</button>

</div>

}

Create the Controller

Let’s now create the controller to instantiate an instance of the MusicGenreViewModel class and pass that instance to the view.

public ActionResult Radio07()

{

MusicGenreViewModel vm = new MusicGenreViewModel();

return View(vm);

}

Retrieve the Value Selected

Once you select a radio button and click on the Submit button you post back to another controller action as shown below. The SelectedId property is automatically bound to the view model class. All you have to do to retrieve the appropriate MusicGenre object is loop through the list of MusicGenre objects and find where the selected id matched the GenreId. You can accomplish this with the Find() method on the collection class.

[HttpPost]

public ActionResult Radio07(MusicGenreViewModel vm)

{

MusicGenre entity;

entity = vm.Genres.Find(g => g.GenreId == vm.SelectedId);

System.Diagnostics.Debugger.Break();

return View(vm);

}

Summary

This blog post showed you how to bind a set of radio buttons to a set of objects with a unique ID. This simulates using data coming from a database table with an integer primary key.

Bind Custom Radio Buttons to True/False Property

Wed, 12 Nov 2014 17:21:49 GMT

Bind Custom Radio Buttons to True/False Property

In the last blog post I showed you how to create a different look and feel for radio buttons. We used the button groups and glyph icons from bootstrap to build this different look. Now let’s bind these radio buttons to a single boolean property in a class.

Let’s say you have a Product class that has an IsDiscontinued property that you would like a user to select between an “Active” and a “Discontinued” product. You might design the screen to look like Figure 1.

Figure 1: Choose between two Boolean states.

To build this screen you first create your Product class. The code below shows an example Product class. The IsDiscontinued property is the property you bind to.

namespace BootstrapRadio2

{

public partial class Product

{

public int ProductId { get; set; }

public string ProductName { get; set; }

public decimal Price { get; set; }

public bool IsDiscontinued { get; set; }

}

Create your cshtml view and specify the name of the model to use at the top of the file. I also added a little styling to a class called pdsa-radiobutton that puts a little spacing between the two radio buttons.

@model BootstrapRadio2.Product

ViewBag.Title = "Get/Set Values from Model";

}

<style>

.pdsa-radiobutton {

margin-right: .5em;

text-align: left;

}

</style>

Build your view using the Html.BeginForm() helper to emit a <form> tag. Create a “form-group” into which you put a “btn-group”. If you are not familiar with button groups in Bootstrap you should look at www.getbootstrap.com for more information. The <label>, and <span> tags should be self-explanatory, especially if you read my first blog post on creating these types of radio buttons.

The next item you need is to bind the IsDiscontinued property to an HTML radio button. You use the @HtmlRadioButtonFor() helper to do this binding. The first parameter to this helper is the expression to bind to the product in the model. The second parameter is the value to return to the model if this button is chosen. The third parameter is a collection of other attributes you wish to be emitted into the HTML. Lastly we need a submit button to post the data back to our controller.

@using (Html.BeginForm())

{

<h3>Get/Set Values from Model</h3>

@Html.RadioButtonFor(m => m.IsDiscontinued, "false",

new { id = "IsActive" }) Is Active?

</label>

@Html.RadioButtonFor(m => m.IsDiscontinued, "true",

new { id = "IsDiscontinued" }) Is Discontinued?

</label>

</div>

<button type="submit"

class="btn btn-success">Submit</button>

</div>

}

The Controller

There are two methods you add to the controller for this view. First is the GET method, defined here as “Radio06”. This method creates a new instance of the Product class and sets the IsDiscontinued property to either a true or false. Normally this data would be coming from a database, but this mock data illustrates how binding selects the default button chosen when the view renders.

public ActionResult Radio06()

{

Product entity = new Product();

entity.IsDiscontinued = true;

return View(entity);

}

The second method to add the controller is called when the user clicks on the submit button on the screen. The ‘value’ attribute of the button selected at the time of the submit will be automatically assigned to the instance of the Product class, named ‘entity’ in this sample. Within this method I put a Debugger.Break() so you can inspect the properties of the entity variable to see the IsDiscontinued property and verify that it is set to the correct value.

[HttpPost]

public ActionResult Radio06(Product entity)

{

System.Diagnostics.Debugger.Break();

return View(entity);

}

That is pretty much all there is to binding to a true/false value using MVC.

Script for Toggling

The jQuery and JavaScript used on this page is the same as what I presented in my last blog post. The only difference is I added code that runs when the page is loaded. This code will select the radio button that is “checked” and ensure that the proper glyph is rendered on the button. All radio buttons on your page should have the ‘glyphicon-unchecked’ in the class attribute. This class attribute is changed on the selected radio button by the code that runs when the page is loaded.

@section scripts

{

$(document).ready(function () {

// Detect radio button that is checked and toggle glyph

$("input[type='radio']:checked").prev()

.removeClass('glyphicon-unchecked')

.addClass('glyphicon-record');

});

</script>

}

The jQuery code that runs when the page is loaded will first select any radio buttons that are checked. You then need to move the previous element in the DOM which will be the <span> tag with the glyph icon to change. You remove the ‘glyphicon-unchecked and add the class ‘glyphicon-record’.

Summary

In this blog post you saw how to take our custom radio buttons and bind them to a true/false property on a class. In addition you learned how to take the selected radio button and toggle the glyph icon when the page is loaded.

Creating Radio Buttons using Bootstrap and MVC

Tue, 14 Oct 2014 12:13:00 GMT

As I previously published, the normal HTML check boxes and radio buttons just do not look good in bootstrap. Yes, bootstrap has a CSS class that will attempt to at least let render a radio button consistently across browsers, but it still is just the default HTML look. In addition, trying to hit a radio button on a mobile phone can sometimes be a little challenging.

In an MVC project we are doing for a client, they wanted the radio buttons to look more like buttons. Since we were already using bootstrap for this project we were able to create our own radio buttons using the “btn-group” class from bootstrap. Let’s walk through how we created these.

Normal Radio Buttons

As most of you know, creating normal radio buttons in MVC is easy to do with the Radio Button HTML helper class. The code below is what you write for creating standard HTML radio buttons in MVC:

@using (Html.BeginForm())

{

<div>

@Html.RadioButton("gender", "Male",

new { id="IsMale" }) Male

@Html.RadioButton("gender", "Female",

new { id = "IsFemale" }) Female

</div>

}

NOTE: You must add the new { id=”UNIQUE ID” } in order to have a unique ID, but the ‘name’ attribute should be the same for each radio button. In this way you get a group of radio buttons that are mutually exclusive.

Bootstrap Radio Buttons

Using bootstrap, add a <div> with a class of either “radio” or “radio-inline” around your radio buttons. You may optionally also add a <label> element around the radio button in order to use bootstrap’s styling of labels. If you use a label you will see a bolder font for the text of the radio button.

@using (Html.BeginForm())

{

@Html.RadioButton("gender", "Male", true,

new { id = "IsMale" }) Male

</div>

@Html.RadioButton("gender", "Female",

new { id = "IsFemale" }) Female

</div>

}

Both of the above pieces of code will produce some output that looks like the radio buttons shown in Figure 1.

Figure 1: Normal HTML Radio Buttons

Use Button Groups

One of the classes that bootstrap supplies is “btn-group”. This class combined with the attribute data-toggle=”buttons” gives you the ability to create radio buttons that look like standard buttons but will toggle when pressed. What is nice about radio buttons expressed this way is you can really tell that the label is a part of the radio button. When you click on one of the buttons you will see it change color. A nice side benefit is these buttons are much easier to see and press on a mobile device.

@using (Html.BeginForm())

{

@Html.RadioButton("gender", "Male", true,

new { id = "IsMale" }) Male

</label>

@Html.RadioButton("gender", "Female",

new { id = "IsFemale" }) Female

</label>

</div>

}

Use the “active” class on one of the radio buttons in order to make it the “selected” button (see Figure 2).

Figure 2: Radio buttons displayed as button groups.

Add Glyphs

Users are used to seeing a circle with a dot in it or an empty circle next to the label for radio button controls. So, you should add those into your design. Use the built-in glyphs in bootstrap to display a filled in circle or an empty circle. Below is the code to do this:

@using (Html.BeginForm())

{

@Html.RadioButton("gender", "Male", true,

new { id = "IsMale" }) Male

</label>

@Html.RadioButton("gender", "Female",

new { id = "IsFemale" }) Female

</label>

</div>

}

Take a look at the “Male” radio button. There are two modifications to this radio button. First, you add the “active” class on the <label> element. This makes it a different color from the other radio button. You also change the glyph in the <span> element from “glyphicon-unchecked” to “glyphicon-record” to make it a circle within a circle.

NOTE: Feel free to use whatever icons you want. Font Awesome (www.fontawesome.io) has a lot of different CSS glyphs that you can use instead of the limited ones in bootstrap.

Figure 3: Add glyphs to make the buttons look more like radio buttons.

Change Glyphs Dynamically using jQuery

When the user clicks on a radio button you should toggle the glyph. Luckily when you click on the radio button, bootstrap takes care of toggling the “active” class on the <label> elements for you. All you need to do is to write some jQuery to toggle the glyphs. Below is the jQuery code you add at the bottom of the .cshtml MVC page to toggle the glyphs.

$(document).ready(function () {

$("#gender > .pdsa-radiobutton").on('click', function () {

pdsaToggleRadioButtons("#gender", $(this));

});

function pdsaToggleRadioButtons(groupName, current) {

// Find currently checked radio button in the group

var chk = $(groupName +

" .pdsa-radiobutton .glyphicon-record");

// Remove 'record' glyph

// Add 'unchecked' glyph

$(chk).removeClass('glyphicon-record')

.addClass('glyphicon-unchecked');

// Remove the 'unchecked' glyph, add the 'record' glyph

$(current).find(">:first-child")

.removeClass('glyphicon-unchecked');

$(current).find(">:first-child")

.addClass('glyphicon-record');

}

</script>

Remember that you may have more than one group of radio buttons, so for this sample I added an “id” attribute of “gender” to the <div> element that contains the “btn-group” class. In the jQuery function that connects to the click event on the radio buttons I pass in the id of the button group I want to affect.

I created a function called pdsaToggleRadioButtons that accepts two parameters. The first parameter is the id of the group of buttons I want to work within. The second parameter is the control that was just clicked.

The JavaScript function, pdsaToggleRadioButtons, is fairly straightforward. Locate the current button that has the class ‘glyphicon-record’ and remove that class. Add the class ‘glyphicon-unchecked’ to this button so it now appears unchecked to the user. Next, remove the class ‘glyphicon-unchecked’ from the currently selected button and add the class ‘glyphicon-record’ so it will appear checked to the user.

Summary

In this blog post you learned how to present radio buttons just a little differently. While it is not necessary to do this, I like the way these radio buttons look and feel. With just a little use of built-in bootstrap CSS and jQuery you can get something that looks a little different from the traditional web look.

Bind Check Boxes to a Collection in MVC

Sun, 21 Sep 2014 14:48:31 GMT

In my last two blog posts I showed you how to use the bootstrap ‘btn-group’ class to create check boxes that are a little nicer looking and easier to use on a mobile device. In addition I showed you how to bind check boxes to individual properties on an entity class. In this blog post you will learn how to create a set of check boxes from a collection of entity classes. You will also learn how to retrieve which check boxes were checked by the user and update the appropriate entity class in the collection with these values.

Figure 1: Create checkboxes from a collection of entity classes

Music Genre Class

Create a class for each music genre you wish to display in the check boxes shown in Figure 1. For each genre of music you need a unique id, the string to display and a boolean value for whether or not it was selected. The MusiGener class, shown below contains the appropriate properties along with a constructor to create a MusicGenre instance from values passed to the constructor.

public class MusicGenre

{

public int GenreId { get; set; }

public string Genre {get;set;}

public bool IsSelected { get; set; }

// Constructor to create new MusicGenre object

public MusicGenre(int id, string genre)

{

GenreId = id;

Genre = genre;

IsSelected = false;

}

Create View Model Class

Using a View Model class from your controller is an excellent way to get reusability across different UI technologies. A view model is usable from Web Forms, WPF, Windows Phone and even Windows Forms applications. You can also unit test view model classes easily. Create a view model class that builds a collection of musical genres from a database table (or any other data store). Create an instance of this view model in your controller and use this instance as the @model in your .cshtml file.

public class MusicGenreViewModel

{

public MusicGenreViewModel()

{

LoadGenresMock();

}

public List<MusicGenre> Genres { get; set; }

public void LoadGenresMock()

{

// Create mock list of data

// Normally you would load this data from a database

Genres = new List<MusicGenre>();

Genres.Add(new MusicGenre(1, "Jazz"));

Genres.Add(new MusicGenre(2, "Country"));

Genres.Add(new MusicGenre(3, "Rock"));

Genres.Add(new MusicGenre(4, "Blues"));

Genres.Add(new MusicGenre(5, "Alternative Rock"));

}

In the view model class, named MusicGenreViewModel, I created a method called LoadGenresMock(). Normally you would call your data layer to get this list of musical genres from a database table, but for this example, I just needed some data to build my list of check boxes, so I hard-coded the values.

Bind to Collection of Musical Genres

Once you have your collection of musical genres loaded into your view model, create an instance of the view model class in your controller. You can optionally set the IsSelected property of any specific genres to true in order to have those check boxes “checked” when the screen first displays. Pass the view model to your View, named CollectionTest, as shown in the code below.

public ActionResult CollectionTest()

{

MusicGenreViewModel vm = new MusicGenreViewModel();

vm.Genres.Find(g => g.Genre == "Jazz").IsSelected = true;

vm.Genres.Find(g => g.Genre == "Rock").IsSelected = true;

return View(vm);

}

View for Collection of Check Boxes

Create a new view in an MVC project, named CollectionTest, and add the @model to use the view model class. To build the list of check boxes you will need to loop through the Genres collection. Each time through the loop is where you need to create each check box from the MusicGenre class. However, since you can’t have two @model statements in a view, create a partial view that you can pass each instance of the MusicGenre class to. The code for the CollectionTest view is shown below:

@model BootstrapCheckBoxes3.MusicGenreViewModel

@using (Html.BeginForm())

{

<h3>Checkboxes Built from a Collection</h3>

@foreach (var item in @Model.Genres)

{

Html.RenderPartial("_CollectionTestGenre", item);

}

</div>

<button class="btn btn-success"

type="submit">Submit

</button>

</div>

}

Partial View

The partial view, called _CollectionTestGenre, is where you create each check box. Notice that you have a @model in this partial view that is the instance passed in of the MusicGenre class from the main view. In this partial view is where you use the CheckBoxFor() helper method to create the check box. Notice that you will set the ‘value’ attribute of each check box to the GenreId. You will use this value when the data is posted back.

@model BootstrapCheckBoxes2.MusicGenre

@Html.CheckBoxFor(m => m.IsSelected,

new { value = @Model.GenreId })

@Html.LabelFor(x => x.Genre, Model.Genre)

</label>

Posting Collection Back to Controller

Once you have checked and unchecked any of the check boxes, click on the Submit button to post back the form data. As mentioned earlier the ‘value’ attribute of each check box is set to the GenreId. When you check a check box on the form, the value attribute is what is posted back for that check box. All unchecked check boxes will have the value ‘false’ posted back.

The name of each check box is set to IsSelected, so if you call Request.Form[“IsSelected”] you will get back a comma-delimited list of all check boxes that have been selected and not selected. If you check 3 of the check boxes, you get back a string that looks like the following: "1,false,2,false,3,false,false,false". All you have to do is convert this comma-delimited list to an array and find all the numeric values. Take each numeric value and place into an integer array. From this integer array set the appropriate Genre’s IsSelected property to true if the integer value is the same as the GenreId.

As you will most likely be using different check boxes on different web pages, create a generic method to perform this conversion from a string to an integer array. I created a WebCommon class and created a method called RequestSelectionToList(). This method, shown below, uses the Split() method of the string class to separate each value from the comma-delimited list and create an array. The array is then converted to a generic list of string values using the ToList() method. It then loops through this list of string values looking for integer values. For each integer value it finds, it adds that value to a generic integer list.

public class WebCommon

{

public static List<int> RequestSelectionToList(

string values)

{

List<int> ret = new List<int>();

List<string> selected = values.Split(',').ToList();

int value = 0;

// Loop through selected items looking for integer values

foreach (string item in selected)

{

if (int.TryParse(item, out value))

{

ret.Add(value);

}

return ret;

}

Once you have this class created and this method to extract the list of integer values from the Request.Form[“IsSelected”], you can now use it in the controller. Create a method in your controller to respond to the HttpPost. Write the following code in your controller to set the appropriate IsSelected properties in the Genres collection.

[HttpPost]

public ActionResult CollectionTest(MusicGenreViewModel vm)

{

List<int> selected = WebCommon.

RequestSelectionToList(Request.Form["IsSelected"]);

// Loop through selected items looking for integer values

foreach (int item in selected)

{

// Set the IsSelected property on the appropriate GenreId

vm.Genres.Find(g => g.GenreId == item).IsSelected = true;

}

return View(vm);

}

Summary

Working with check boxes in a collection takes a little more work than just setting individual boolean values in a simple entity class. If you set the ‘value’ attribute to the unique id for each of your check boxes, you will be able to retrieve the unique id from the Request.Form collection. From this you can set your appropriate boolean property to true for each check box selected by your user.

Bind Check Boxes in MVC

Fri, 19 Sep 2014 14:34:56 GMT

After the last post on how to create check boxes that use the bootstrap “btn-group” to modify the look and feel of check boxes, I thought it would be good to show how to bind these check boxes using MVC. After all, you will most likely need to display check boxes based on data from a table.

Figure 1: Check boxes should be bound to an entity class

Musical Tastes Entity Class

The first step is to have an entity (or model) class that contains the appropriate properties to bind to these check boxes. Below is a class I called MusicalTastes that simply has three Boolean properties that correspond to the three check boxes on the screen shown in Figure 1.

public class MusicalTastes

{

public bool IsJazz { get; set; }

public bool IsCountry { get; set; }

public bool IsRock { get; set; }

}

View for Musical Tastes

Create a .cshtml view and add a @model statement at the top of the page to bind to an instance of this MusicalTastes class. Use the @Html.CheckBoxFor() helper to bind to each property instead of the @Html.CheckBox() helper as you did in the last blog entry.

@model BootstrapCheckBoxes2.MusicalTastes

@using (Html.BeginForm())

{

@Html.CheckBoxFor(m => m.IsJazz) Jazz

</label>

@Html.CheckBoxFor(m => m.IsCountry) Country

</label>

@Html.CheckBoxFor(m => m.IsRock) Rock

</label>

</div>

<button type="submit"

class="btn btn-success">Submit

</button>

</div>

}

Notice that the expressions you pass to the first parameter of this CheckBoxFor helper have the names of each of the properties in the MusicalTastes class. This is what binds this check box to each of the properties.

Binding to Musical Tastes

In the controller for this .cshtml page create an instance of the MusicalTastes class and set one or more of the properties to true in order to see the check box checked when the page displays.

public ActionResult BindingTest()

{

MusicalTastes entity = new MusicalTastes();

entity.IsCountry = true;

return View(entity);

}

jQuery for Musical Tastes

In order to get the correct display for any property set to true you need to write some JavaScript/jQuery to toggle the glyphs. Below is the code you would add to the end of the $(document).ready(). Keep the same code you had in the previous blog post to toggle the check boxes when you click on each one, but add code that will run when the page loads as shown in the bold code below:

@section scripts

{

$(document).ready(function () {

// Connect to 'change' event in order to toggle glyphs

$("[type='checkbox']").change(function () {

if ($(this).prop('checked')) {

$(this).prev().addClass('glyphicon-ok-circle');

$(this).prev().removeClass('glyphicon-unchecked');

}

else {

$(this).prev().removeClass('glyphicon-ok-circle');

$(this).prev().addClass('glyphicon-unchecked');

}

});

// Detect checkboxes that are checked and toggle glyphs

var checked = $("input:checked");

checked.prev().removeClass('glyphicon-unchecked');

checked.prev().addClass('glyphicon-ok-circle');

});

</script>

}

This code selects all check boxes checked via the automatic data binding. It then removes the unchecked glyph and adds the ok-circle glyph to all those check boxes.

Posting Back Musical Tastes Selected

There is nothing to do to get the selected check boxes to post back to your entity class. Simply create a method in your controller with the [HttpPost] attribute. Pass in the entity class to this method and MVC will take care of matching the names of the check boxes to the appropriate properties in your entity class.

[HttpPost]

public ActionResult BindingTest(MusicalTastes entity)

{

System.Diagnostics.Debugger.Break();

return View(entity);

}

I added the Debugger.Break() statement so I can hover over the ‘entity’ variable and verify that the check boxes checked have been updated in the instance of the MusicalTastes class passed in.

Summary

Binding an entity class with boolean properties to a set of check boxes on a .cshtml is very easy to do. Simply create your class and use the @Html.CheckBoxFor() helper class to bind your check boxes to the appropriate properties. Add a little bit of client-side JavaScript/jQuery to toggle the glyphs and you have a very nice looking interface for your check box controls.

Creating Checkboxes using Bootstrap and MVC

Tue, 16 Sep 2014 18:16:34 GMT

The normal HTML check box just does not look good. Yes, bootstrap has a CSS class that will attempt to at least let it render consistently across browsers, but it still is just the default HTML look. In addition, trying to hit a check box on a mobile phone can sometimes be a little challenging.

In an MVC project we are doing for a client, they wanted the check boxes to look more like buttons. Since we were already using bootstrap for this project we were able to create our own check boxes using the “btn-group” class from bootstrap. Let’s walk through how we created these.

Normal Check Boxes

As most of you know, creating normal check boxes in MVC is easy to do with the CheckBox HTML helper class. The code below is what you write for creating standard HTML check boxes in MVC:

@using (Html.BeginForm())

{

<div>

@Html.CheckBox("IsJazz") Jazz

@Html.CheckBox("IsCountry") Country

@Html.CheckBox("IsRock") Rock

</div>

}

Bootstrap Check Boxes

With bootstrap you add a <div> with a class of either “checkbox” or “checkbox-inline” around your check boxes. You also add a <label> element around the check boxes in order to use bootstrap’s styling of labels. Normally this gives you a bolder font for the actual text of the check box.

@using (Html.BeginForm())

{

<label>

@Html.CheckBox("IsJazz") Jazz

</label>

</div>

<label>

@Html.CheckBox("IsCountry") Country

</label>

</div>

<label>

@Html.CheckBox("IsRock") Rock

</label>

</div>

}

Both of the above pieces of code will produce some output that looks like the check boxes shown in Figure 1.

Figure 1: Normal HTML Check boxes

Use Button Groups

One of the classes that bootstrap supplies is “btn-group”. This class combined with the data-toggle=”buttons” gives you the ability to create check boxes that look like standard buttons but will toggle when pressed. What is nice about check boxes expressed this way is you can really tell that the label is a part of the check box. When you click on one of the buttons you will see it change color. In addition, these buttons are much easier to press on a mobile device.

@using (Html.BeginForm())

{

@Html.CheckBox("IsJazz") Jazz

</label>

@Html.CheckBox("IsCountry") Country

</label>

@Html.CheckBox("IsRock") Rock

</label>

</div>

}

Note the use of the “active” class on the Country check box. This is what makes this one selected when you display the screen (see Figure 2).

Figure 2: Check boxes displayed as button groups.

Add Glyphs

Users are used to seeing a check mark or an empty box next to the label for check box controls. So, you should add those into your design. Use the built-in glyphs in bootstrap to display a check or an empty box. Below is the code to do this:

@using (Html.BeginForm())

{

@Html.CheckBox("IsJazz", true) Jazz

</label>

@Html.CheckBox("IsCountry") Country

</label>

@Html.CheckBox("IsRock", true) Rock

</label>

</div>

}

Take a look at the Country check box. There are two modifications to this check box. First, you add the “active” class on the <label> element. This makes it a different color from the other two check boxes. You also change the glyph in the <span> element from “glyphicon-unchecked” to “glyphicon-ok-circle” to give it a check mark within a circle.

Feel free to use whatever icons you want. Font Awesome (www.fontawesome.io) has a lot of different CSS glyphs that you can use instead of the limited ones in bootstrap.

Figure 3: Add glyphs to make the buttons look more like check boxes.

Change Glyphs Dynamically using jQuery

When the user clicks on a check box you want to toggle the glyph. Luckily when you click on the check box, bootstrap takes care of toggling the “active” class on the <label> elements for you. All you need to do is to write some jQuery to toggle the glyphs. Below is the jQuery code you add at the bottom of the .cshtml MVC page to toggle the glyphs.

@section scripts

{

$(document).ready(function () {

// Connect to 'change' event in order to toggle glyphs

$("[type='checkbox']").change(function () {

if ($(this).prop('checked')) {

$(this).prev().addClass('glyphicon-ok-circle');

$(this).prev().removeClass('glyphicon-unchecked');

}

else {

$(this).prev().removeClass('glyphicon-ok-circle');

$(this).prev().addClass('glyphicon-unchecked');

}

});

</script>

}

This jQuery is fairly simple to understand. When the user changes the check box you determine if the check box is checked or unchecked. Based on this setting you either add or remove the appropriate classes from the <span> element that is just prior to the check box control.

Summary

In this blog post you learned how to present check boxes just a little differently. While it is not necessary to do this, I like the way these check boxes look and feel. With just a little use of built-in bootstrap CSS and jQuery you can get something that looks a little different from the traditional web look.

Using Friendly URLs in Web Forms

Tue, 16 Sep 2014 17:28:09 GMT

Friendly URls help you eliminate query string parameters and file extensions from the URL line. So, instead of…

www.url.com/Products.aspx

www.url.com/Products.aspx?ProductId=3

You use simple friendly URLs instead as shown below:

www.url.com/Products

www.url.com/Products/3

There are many benefits of using friendly URLs in your web applications.

· Cleaner query string

· User does not know the actual page name

· Easier for users to use

Friendly URLs are available in Web Forms and MVC. I see a lot of examples of using friendly URLs using MVC, but very few using Web Forms. So, I thought I would discuss how to use them in Web Forms. Actually, the process is almost identical.

First you need to download the Microsoft.Asp.Net.FriendlyUrls.Core.dll if you don’t already have it in your project. If you have an older ASP.NET application you probably don’t have it. If you are starting a new project in Visual Studio 2013, and choose the Web Forms template, this DLL is already present.

If you want to use friendly URLs in an older project, select Tools | Nuget Package Manager | Manage NuGet Packages for Solution... from the Visual Studio menu. Search online for Microsoft.AspNet.FriendlyUrls and install the Microsoft.AspNet.FriendlyUrls.Core. You don’t need any of the other DLLs in the NuGet packages list, just the “Core” DLL.

If you have an App_Start folder, check and see if you have a class called RouteConfig.cs in there. If so, then you already have what you need. If you don’t, then add a class called RouteConfig to your project.

Add the following using statements at the top of this new class file.

using System.Web.Routing;

using Microsoft.AspNet.FriendlyUrls;

Either add the following method, or modify it to look like the following. This assumes you have 3 pages in your project; Default.aspx, Customers.aspx, and Products.aspx. Feel free to substitute your page names as appropriate.

public static void RegisterRoutes(RouteCollection routes)

{

routes.EnableFriendlyUrls();

routes.MapPageRoute("", "Default", "~/Default.aspx");

routes.MapPageRoute("", "Customers", "~/Customers.aspx");

routes.MapPageRoute("GetCustomer",

"GetCustomer/{CustomerId}",

"~/Customers.aspx");

routes.MapPageRoute("", "Products", "~/Products.aspx");

routes.MapPageRoute("GetProduct", "GetProduct/{ProductId}",

"~/Products.aspx");

}

In the above page routes you have some parameter placeholders denoted by the curly braces {}. These are what you use to pass any parameters to and the names you use to retrieve those values.

The next step is to open your Global.asax and either add, or check to see, if you have the following using statement at the top of the file.

using System.Web.Routing;

In the Application_Start() event you now need to call the RegisterRoutes method you created in the last step. The RouteTable.Routes object, created by the ASP.NET engine, is what you add to in your RegisterRoutes method.

RouteConfig.RegisterRoutes(RouteTable.Routes);

You can now run your ASP.NET application type in any of the following:

http://localhost:xxxx/Products

http://localhost:xxxx/GetProduct/22

http://localhost:xxxx/Customers

http://localhost:xxxx/GetCustomer/ABC

From any <a> tag on your web pages you can now use the following syntax:

<a href="Products">Get All Products</a>

<a href="GetProduct/22">Get Product #22</a>

Notice that you don’t need the “.aspx” extension. If you are using the Response object to redirect from code behind, may also use the same shorthand for any route that does not have a parameter.

Response.Redirect("Products");

Response.Redirect("Customers");

Passing Parameters using the Response Object

If you are going to pass either a customer id or a product id to your pages, and you want to use the Response object, you need to setup things a little differently. Remember you created the following map page route in the RouteConfig class.

routes.MapPageRoute("GetProduct", "GetProduct/{ProductId}",

"~/Samples/ProductView.aspx");

To redirect to this page, you use the RedirectToRoute method of the Response object.

Response.RedirectToRoute("GetProduct",

new {ProductId = 33});

The first parameter you pass to the RedirectToRoute method must match the first parameter in the MapPageRoute. The second parameter is an object with the name in the braces {ProductId} set to the value you wish to pass (in the above case 33).

Retrieve the Passed Parameters

To retrieve the value passed you use the Page.RouteData.Values property. Pass in the name of the parameter you are looking for, in this case “ProductId” and it will return either a null if not found, or the value. You typically retrieve these values from the Page_Load event procedure.

if (Page.RouteData.Values["ProductId"] != null)

{

int ProductId =

Convert.ToInt32(Page.RouteData.Values["ProductId"]);

}

Summary

Using friendly URLs is quite easy to accomplish in either Web Forms or MVC. You can download the friendly URLs “Core” DLL from NuGet to add to any project. Then with just a few lines of code you can start calling your pages in a very user-friendly manner.

New Course on Pluralsight (Mobile Web Forms)

Fri, 29 Aug 2014 22:12:43 GMT

Hello Everyone,

I am pleased to announce that I have a new course on Pluralsight!

Building Mobile Web Sites Using Web Forms, Bootstrap, and HTML5

Most of us build typical business web sites using ASP.NET Web Forms. We are now being asked to build these as mobile-aware web sites. Using Bootstrap is a great place to start and Web Forms can do all of this - without having to learn MVC. This course will teach you how to build business applications using Web Forms, Bootstrap, HMTL5 and CSS3. You will be shown how to create standard business pages such as a Member Log In, Forgot Password, Member Sign Up, About, Contact Us, Address, Member Profile, Credit Card, and many others. You will also learn how to create navigation for your business application.

http://beta.pluralsight.com/courses/building-mobile-web-sites-web-forms-bootstrap-html5

Check it out!

While you are there, be sure to check out all of my other courses as well.

How to Start and Run A Consulting Business

Have you ever wanted to break out of the corporate life and be your own boss? Many people have this dream. In this course you will learn what it takes to start and be successful in your own consulting business. Throughout this course you will learn how to determine what your company should look like, how to manage your money wisely, how to get and keep clients, how best to survive the ups and downs of the economy and how to create an exit strategy. Your instructor has been running his own successful business for over 22 years and shares his valuable insight so you too can be a success!

http://pluralsight.com/training/Courses/TableOfContents/start-run-consulting-business

The Many Approaches to XML Processing in .NET Applications

Did you know that you can use XML instead of a SQL database for applications? Did you know there is LINQ to XML that allows you to process XML documents quickly and efficiently? If the answer is no to either of these two questions, then you need to watch this course. XML files are very common in today's programming world. You will most likely need to read files, write files and query XML within your applications. .NET provides a rich set of XML processing classes that you can use to perform all these functions. C# allows you to easily create, read and query XML files using XPath, LINQ to XML and other methods. In this course you will learn to read and write XML files using the various .NET classes. You will see some real-world uses of XML files in applications.

http://pluralsight.com/training/Courses/TableOfContents/xml-processing-approaches-dotnet-applications

WPF for the Business Programmer

There are so many cool things you can do with WPF that would be impossible or very difficult with Windows Forms. In this course you will see some creative ways to use the WPF List Box. Some screens that you can use right away in your business applications will be presented. You will learn some unique ways to put together user controls to create unique shapes. Finally you will create a shell application to make your WPF application look like Windows 8. This course goes way beyond the basics of WPF to give you some unique insights on how to create business applications.

http://pluralsight.com/training/Courses/TableOfContents/wpf-business-programmer

WPF for the Visual Basic Programmer - Part 1

Visual Basic Programmers are still in demand. Upgrade your skills by learning XAML and WPF. This course is specifically designed for the Visual Basic programmer and will get you up to speed quickly with WPF. In Part 1 you will learn the correct way to design WPF windows, how to use styles and all the most commonly used controls for business applications. You will gain a good knowledge of data binding and how to use the various list controls in WPF.

http://pluralsight.com/training/Courses/TableOfContents/wpf-vb-programmer-pt1

WPF for the Visual Basic Programmer - Part 2

Visual Basic Programmers are still in demand. Upgrade your skills by learning XAML and WPF. This course is specifically designed for the Visual Basic programmer and will get you up to speed quickly with WPF. In Part 2 you will learn the correct way to design WPF windows, how to use styles and all the most commonly used controls for business applications. You will gain a good knowledge of data binding and how to use the various list controls in WPF.

http://pluralsight.com/training/Courses/TableOfContents/wpf-vb-programmer-pt2

Thanks,
Paul