Contents tagged with .NET
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.
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.
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.
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.
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.
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.
That is pretty much all there is to binding to a true/false value using MVC.
Script for Toggling
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’.
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.
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.
If you are in the Nashville, TN area, I hope you will join me at the Nashville .NET User Group http://nashdotnet.org/ for a seminar entitled "Best Practices for Flexible Code".
Creating applications that are flexible and maintainable means thinking about application development a little differently. You need to adopt good object-oriented techniques in order to create software that can truly adapt to a changing development environment. In this seminar you will see many examples of tips and tricks that will help you keep your software running for many years to come. You will see real-world examples of extension methods, faster reflection, string handling, generics, using XML, wrapper classes, dependency injection, configuration and exception management. You will walk away with a code that you can use in your applications right away.
So, come on out at (http://nashdotnet.org/) at 6pm on Thursday, April 10th, 2014.
Hope to see you there!
Before beginning any application development consider implementing programming and database standards with your team. Using development standards allows all programmers to know what is expected of them and how to create new applications from scratch. Standards help developers move from one project to another without having to learn a different style of programming because it was created by another programmer.
There are many reasons programming standards are created. Many years ago when mainframes were in vogue, every shop had programming standards. In fact, they used to teach programming standards in college. Now, standards are all but forgotten or just never learned by the younger generation. Microsoft does have a set of programming standards for C# and Visual Basic. These are an excellent place to start, and I would like to encourage all programmers today to adopt some sort of standards as an important first step in application development.
Creating standards does not limit your creativity as most programmers seem to think. Programming standards help you focus your creativity where it is really needed. You concentrate on the business problem you are trying to solve, instead of having to always think about what name to give a method or variable. As a corollary, consider the Windows and Mac operating environments where most programs written have a consistent look and feel. This is why users like using Windows or Macs, because they do not have to learn everything about how a new program works. They already know how to use most of the features in each program. Utilizing standards in your programming, you keep the programmer’s “look and feel” consistent. You will spend less time figuring out what the variables are or how many indents a programmer used, and you can focus more on the logic of the program.
The use of standards lead to reduced maintenance costs as well, due to consistency in each program. You can move from one project to another very easily, even one someone else wrote, and immediately read and understand the code. Programming standards help programmers create a consistent structure, code style, variable names, and methods names within all applications. Standards also help programmers create code that is unambiguous, easy to read, and easy to maintain by other developers.
The standards documents you should have in place at your shop are Visual Studio Setup, C# or Visual Basic Programming Standards, SQL Server Object Naming Standards and Database Development Standards. The rules set forth in these documents are guidelines, so feel free to modify these to suit your own organizations’ needs.
- The Visual Studio Setup document is used to ensure each programmer configures their Visual Studio the same as everyone else in the shop. Especially important is the Tab setting so everyone uses the same tab indent. If different programmers use different tabs and they get changed, this can wreak havoc on your source control.
- The C# or Visual Basic Programming Standards document will set forth variable and method naming, class naming, file naming, control naming and many other standards.
- The SQL Server Object Naming Standards document describes how to name tables, stored procedures, views, and other database objects. You should also describe how SQL keywords and functions in your SQL statements are cased.
- The Database Development Standards document describes your database design philosophy. Your philosophy may include things such as how you create primary keys, the use of clustered indexes, standard fields for each table, how to handle concurrency, and whether or not to use dynamic SQL or stored procedures.
You can find examples of all of these standards documents at my website: http://www.pdsa.com/download/StandardsDocuments.zip
We have definitely found that having programming standards in place at our shop has been a positive thing. I hope they work equally as well for you.
I have just published a new course on www.pluralsight.com! Check it out!
WPF For the Visual Basic Programmer
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.
I am pleased to announce that I have released two more courses on Pluralsight.com.
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 video 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!
Module 1: Hanging Your Shingle
Module 2: Money Matters
Module 3: How to Get and Keep Clients (or Marketing 101)
Module 4: How To Survive the Ups and Downs
Module 5: Creating an Exit Strategy
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 video 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.
Module 1: The Flexible WPF List Box
Module 2: More Fun with the WPF List Box
Module 3: Develop Business Application Screens in WPF
Module 4: Create WPF Shapes with Text
Module 5: Creating a Windows 8 Shell in WPF
And of course, my first course is:
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.
Module 1: What is this XML Thing Anyway?
Module 2: A Myriad of Methods to Read XML
Module 3: 16 Ways to Write XML Documents
Module 4: Real World Uses of XML
Module 5: LINQ to XML Step-by-Step
Module 6: Use XML: An Alternative to SQL
Go to www.pluralsight.com and sign up today and start learning!
One of my most widely-read blog posts had to do with creating a Login Windows in WPF that I wrote several years ago. I thought I would revisit this login screen with an updated version in Visual Studio 2012 and with an updated look and feel.
Most business applications require some sort of security system. You can always use Windows Authentication to authenticate a user, but sometimes you might want your own authentication scheme. When you do, you will need to create a login screen for your user to enter her login id and password. This article will explore creating a login window in WPF.
The UI for your login screen can contain any images and controls that you would like. In Figure 1 you can see a sample login screen that has an image of a key, a large title label across the top, two labels, a text box, a password box and two button controls. You can also make the border of the window rounded so that there is no close, minimize or maximize button and no title bar.
Figure 1: A Login Screen
Of course this is just one version of a login screen but let’s take a look at how this is put together.
Creating the Window
To start, you need to create a window with no border and can be made into any shape you want. To do this you will set a few different attributes. The WindowStyle attribute normally allows you to set a single border, three-D border, or a Tool Window border. Setting this attribute to None will eliminate the border. The ShowInTaskbar attribute is optional, but if you are building a login screen you probably won’t want this window to show up in the Task Bar as it is going to be modal style form. The next two attributes, AllowsTransparency and Background work together. You must set AllowsTransparency to True to allow the Background to be set to Transparent. If you do not set these two attributes, then your border will still show up. Below is the xaml for this window.
There are three additional attributes that are set on this window. The WindowStartupLocation attribute is set to “CenterScreen” to ensure that the login screen is displayed in the middle of the screen when it is shown. You also set the SizeToContent attribute to WidthAndHeight to just take as much room for this window as the controls need that are contained within this window. The FocusManager.FocusedElement attribute is data-bound to the textbox control next to the User Name label. This tells WPF to place the cursor in this textbox once the screen is displayed.
Now that you have the Window xaml defined you now can create the look for the outside border of the window. A Border control is used to form the outside of this login screen. You will set the CornerRadius attribute to “10” to give the nice rounded corners. You can set the BorderBrush to “Gray” and the BorderThickness to “3”. You also want to give this border a nice wide Margin to allow room for the DropShadowEffect that we add to the outside of this border. If you do not do this, then the drop shadow will be chopped off.
The DropShadowEffect is created as a resource with a key of “shadowWindow” as shown below:
When you create the Border for this window you set the Effect property to reference this static resource.
Using a Grid Layout
To place each of the login screen elements within the border, a Grid control is used with specific column and row definitions. There are three columns in this login screen. One for the image of the key, one for the labels and one for the TextBox, PasswordBox and Button controls.
<ColumnDefinition MinWidth="80" Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
Placing the Key Image
The Key image that is in the upper left hand corner of this login screen is placed there by using an Image control. Notice the Grid.Column, Grid.Row and Grid.RowSpan attributes that are set on the StackPanel. The Grid.Row and Grid.Column specify in which row and column of the grid you wish to display the Image control. The Grid.RowSpan allows the key to float down over the next three rows of the Grid control if necessary. If you were to use a smaller or larger key image, then you would probably need to adjust this attribute accordingly. The Image control sets the source of its image to the KeyComputer.jpg file located in the /Images folder. A drop shadow effect is applied to this image control just like you did with the Border control.
The Large Title Label
The large label across the top of the login screen is simply a TextBlock control within a Border control that has the appropriate Grid.Row, Grid.Column and Grid.ColumnSpan attributes set for placement. A FontSize of 18 is applied to make the text appear larger than the other labels on this screen. A Margin of 10 is used to give us some spacing from the border of the grid.
Text="Please Login To Access This Application" />
The Login Controls
The controls that gather the user name and password should be fairly familiar to you if you have been doing any WPF at all. Each control is placed into a specific row and column of the Grid control. Notice the use of the Tooltip attribute on the Login TextBox, the PasswordBox and Domain TextBox control. This gives the user an idea of what to put into each control if they hover their mouse over that control.
Text="User Name" />
ToolTipService.ToolTip="Enter Your User Name"
ToolTipService.ToolTip="Enter Your Password"
ToolTipService.ToolTip="Enter Domain Name to Login To"
The two buttons at the bottom of the screen are placed into the last row of the Grid control and into the second column of the grid by wrapping them into a StackPanel. The StackPanel has its HorizontalAlignment attribute set to Center and its Orientation attribute to Horizontal to allow the buttons to be centered within the StackPanel and to have the buttons appear side-by-side to each other.
<Image Source="Images/XBlack.png" />
<Image Source="Images/CheckMarkBlack.png" />
There are two special attributes that are set on these buttons. The IsCancel attribute is set to true on the Cancel button. Setting this attribute to true will fire the click event procedure on the Cancel button if the user presses the Escape key. The IsDefault attribute is set to true on the on the Login button. Setting this attribute to true will fire the click event procedure on the Login button if the user presses the Enter key.
Writing the Code for the Login Screen
In each of the click event procedures you will need to close the screen. In the Cancel click event procedure you will set the DialogResult property of the screen to a false value. This will inform the calling procedure that the user clicked on the Cancel button on this screen. In the Login click event procedure you will set the DialogResult property of the screen to a true value. This informs the calling procedure that the user clicked on the Login button and was authenticated. I am leaving it up to you to write the code for authenticating the user. Here is the code for the Cancel event procedure.
private void btnCancel_Click(object sender, RoutedEventArgs e)
DialogResult = false;
And, here is the code for the Login event procedure.
private void btnLogin_Click(object sender, RoutedEventArgs e)
// Write code here to authenticate user
// If authenticated, then set DialogResult=true
DialogResult = true;
Displaying the Login Screen
At some point when your application launches, you will need to display your login screen modally. Below is the code that you would call to display the login form (named frmLogin in my sample application). This code is called from the main application form, and thus the owner of the login screen is set to “this”. You then call the ShowDialog method on the login screen to have this form displayed modally. After the user clicks on one of the two buttons you need to check to see what the DialogResult property was set to. The DialogResult property is a nullable type and thus you first need to check to see if the value has been set.
private void DisplayLoginScreen()
winLogin win = new winLogin();
win.Owner = this;
if (win.DialogResult.HasValue && win.DialogResult.Value)
MessageBox.Show("User Logged In");
Creating a nice looking login screen is fairly simple to do in WPF. Using the DropShadowEffect can add a nice finished look to not only your form, but images and buttons as well. Using a border-less window is a great way to give a custom look to a login screen or splash screen. The DialogResult property on WPF Windows allows you to communicate back to the calling routine what happened on the modal screen. I hope this article gave you some ideas on how to create a login screen in WPF.
NOTE: You can download the sample code for this article by visiting my website at http://www.pdsa.com/downloads. Select "Tips & Tricks", then select "WPF Login Screen 2013" from the drop down list.
So, my first course went live on Pluralsight today! Entitled "The Many Approaches to XML Processing in .NET Applications" this ~4 hour long video course covers the following topics: - What is this XML Thing Anyway? - A Myriad of Methods to Read XML - 16 Ways to Write XML Documents - Read World Uses of XML - LINQ to XML Step-by-Step - Use XML: An Alternative to SQL If you have ever wanted to work more with XML, then learning LINQ to XML is a great way to do so. This video course will take you step-by-step on the best ways to read and write XML documents. You can check out this course at http://pluralsight.com/training/Courses/TableOfContents/xml-processing-approaches-dotnet-applications Enjoy!
In my last blog posts I have been showing you how to create collection of entity objects using code that is custom for each table and object you create. Well, if you use a little reflection code you can shrink this code quite a bit. Yes, we all know that reflection is slow and probably should be avoided in most cases. What I have found out is that loading over 6200 product records into an entity collection still takes less than a second when using Reflection. So, I will leave it up to you to decide which way you wish to go.