This blog series has shown you how to upload files using ASP.NET Core. You have learned how to style the HTML file upload control and how to upload a file to the server. You uploaded additional information with the file using a view model class. You checked for just specified file types and validated that only those types were uploaded. Finally, you uploaded images and created thumbnail images. In this blog post you are going to set a limit on how large a file can be uploaded.)
Previously in this blog series, you learned to style the HTML file upload control, upload a file to the server, use a view model class to upload additional information with the file, and to validate the type of files that can be uploaded. In this post you learn to upload a photo and create a thumbnail version of that photo. The thumbnail version of a photo can be used when displaying a list of photos to a user. Using a smaller version of the photo keeps your web pages smaller and faster to load. You can then allow the user to click on one of the photos to display the large version.)
Previously in this blog series, you learned how to style the HTML file upload control and how to upload a file to the server. You then learned to upload additional information with the file using a view model class. In this blog post you learn to set the file upload control's dialog to just look for certain file types. You also learn how to validate the file that is uploaded to make sure only certain types are allowed to be uploaded.)
In part 1 of this blog post series, you learned how to style the HTML file upload control and how to upload a file to the server. In this post you are going to see how to upload additional information with the file using a view model class. You are going to start out using a very simple view model class just so you get the basics down. Then you use a file upload base view model class and inherit from this class to upload a file and copy it to the file system on the web server. This prepares you to inherit from this base class later and store the uploaded file to a SQL Server or other type of database.)
User's frequently want the ability to upload files to a website. If you are using ASP.NET Core/8 with MVC and Bootstrap 5.x, you know that the normal file upload control does not look like the rest of your Bootstrapped controls. In this blog post you are going to learn how to modify the default look and feel with a couple of other looks to make the file upload control match the rest of the bootstrap styled HTML. In addition, you learn the very basics of uploading a file to a server.)
In this blog post you learn to create an MVC application to serve up web pages. On these web pages you can use JavaScript or jQuery to make Ajax calls to a web server that hosts Web API calls.)
In this blog post you learn to create a .NET Core web server to service Web API calls coming from any Ajax front-end.)
We often have a one-to-many relationship in tables in a database. When you need to ask the user to select a parent value, then select a child value in a web application, you don't want to post-back just to refresh the child list. Doing so causes a flash on the page and can place the user back at the top of the web page. This is not the best UI experience for the user but can be remedied easily. In this blog post, you are going to learn to populate a drop-down list based on the selection in another drop-down list. The technologies used in this post are MVC, Entity Framework, Web API, jQuery, and Ajax. To try out the samples in this blog post, create an MVC application using Visual Studio.)
In this blog series, you have assumed that everything has gone correctly when uploading files. However, if you attempt to upload a file that is too large, you receive an error from your web server. In this blog post you are going to learn how to get the maximum size of file allowed, display that value on the page, handle an error when the file is too large, and modify the maximum size of file allowed. If you have not done so already, please download the sample from Part 5 so you can follow along with this blog post.)
So far in this blog post series on uploading files with MVC you learned to style the file upload control, use a view model for data binding, create a thumbnail from an uploaded image, and store files on the server's file system. In this post, you learn to store the uploaded file in an SQL Server table. If you have not done so already, please download the sample from Part 4 so you can follow along with this blog post.)
So far in this blog post series on uploading files with MVC you have learned to style the file upload control, to use a view model for data binding, and how to create a thumbnail from an uploaded image. In this post you learn to store the uploaded file in a folder on your server. To accomplish this, there are a few changes you need to make to the application written thus far. You need to add a new setting to the Web.config file, add a property in the AppSettings method to read that setting, and a method to the view model to write the original and thumbnail files to disk. In the controller, call the new method in the view model to write the files. Finally, change the src attribute on image tags to use the path to the folder on the server where the files are located.)
In the last two blog posts in this series you learned to style the file upload control and to use a view model to simplify data binding. In this third blog post, you build a class that allows you to take a large image and create a thumbnail image from it. When displaying a list of files, you may wish to show a small graphic, so the user can see what the file looks like. Instead of sending down a large image and squishing it by setting the height and width attributes, you should use a small graphic as this makes the amount of data sent to the browser less.)
In the last blog post you learned to style the file upload control and to upload a file. You gathered information about the file and placed that information into individual variables in a controller class. In this blog post you create a view model class with properties to hold the file information, and a method to extract the file information, and upload the file.)
User's frequently want the ability to upload files to a website. If you are using MVC and Bootstrap, you know that the normal file upload control does not look like the rest of your bootstrapped controls. In this blog post you are going to learn how to modify the default look and feel with a couple of other looks to make the file upload control match the rest of the bootstrap styled HTML.)
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.)
This blog post is the first in a series of four posts to discuss how to use a Model-View-View-Model (MVVM) approach in an MVC application. The MVVM approach has long been used in WPF applications, but has not been prevalent in MVC applications. Using a View Model class in MVC makes good sense as this blog post illustrates. You are going to be guided step-by-step building an MVC application using the Entity Framework and a View Model class to create a full CRUD web page.)
This blog post continues from where the last blog post left off. You are going to learn to search for products. You also learn how to handle all post backs through a single method in your MVC controller. You will add code to check for no rows being returned, and display a message to the user. Finally you break up the single page into multiple partial pages.)
In this post you add a product detail page in order to gather product data for adding to the product table. You add a save and a cancel button and learn to display validation messages. You build a method in the view model class to insert product data.)
This post is going to finish the MVC application using a MVVM approach. You are going to build the methods to select a single product from the product table. You are going to learn to update an existing product. You are also going to delete a product. Finally you learn how to handle server-side validation, and return validation messages back to the client to display to the user.)
In this blog post, you will learn to retrieve a single product record using a Web API call from the Angular product service you created. You are going to add Edit and Delete buttons to each row of the HTML table (Figure 1) to allow the user to update and delete an existing product record. For this post, I am assuming you are a Microsoft Visual Studio developer and are familiar with MVC, Angular, C#, and the Web API.)
In this blog post, you are going to extend the last sample to allow the user to add a new product. You are going to add a POST method to your Web API controller. You will also create a new Angular component to handle getting and displaying a product record.)
In the first part of this blog series, you added Angular 2 to an MVC application using Visual Studio. In this blog post, you will learn how to add a Web API that can be called from an Angular service. You will modify the Global.asax to automatically convert pascal-cased properties in C# classes into camel-cased TypeScript properties. You will build an Angular service, learn to inject it into a component, then call the service to retrieve product data. Finally, you will take the returned data and build an HTML table. For this post, I am assuming you are a Microsoft Visual Studio developer and are familiar with MVC, Angular, C#, and the Web API.)
Many of us have MVC applications currently running. You would like to start using Angular 2 or 4 in your web applications, but don't have the time to completely rewrite. It would be nice if you could just re-write one or two pages in Angular and keep the rest of your MVC project in place. Turns out you can. In this blog post, you will learn how to add Angular 2 or 4 to your MVC applications. For this post, I am assuming you are a Microsoft Visual Studio developer and are familiar with MVC, Angular, C#, and the Web API.)
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.)
In a previous blog post I talked about a simple push button style of radio buttons. 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.)
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.)
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.)
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.)
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.)
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.)
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.)
Friendly URls help you eliminate query string parameters and file extensions from the URL line. 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.)