So CSS Selectors – CSS is a very powerful way of styling and positioning your HTML elements. The syntax is simple, you use the HTML element as the selector! Good example is if you want all your list elements to have a red background color:
So the above example will highlight any list (li) element that is child of a parent ordered list (ol) elements. This small example shows branching works within HTML documents and how CSS selectors traverses the tree using the simple parent/sibling relationships. This is very powerful. And as mentioned in a previous post, you can be more specific by giving a more specific branching.
Over the last few months i have done the following blog posts to explain how to handle images using MVC and various technologies like JQuery and Entity Framework. Now the majority of hits i receive are concerning these blogs posts, so obviously Image Handling is a common Achilles heel. The posts are also being referenced in forums to answer Image related questions. So i have decided to create a Open Source project which combines all of these blog posts into one solution for people to use. This project can be found here for anyone who wants to use it:
At the moment it includes everything i have blogged about and shows you how to extend the RegisterModel to include adding Images when registering a new user. I will be adding the following to the project moving forward as i want this to an organic project that grows:
Adding Thumbnails to the database and displaying these
A details page of users so you can view their details and the images – A User Dashboard for the Admin
A Image FileResult.
A PDF document explaining what the Project does and where.
MY ORIGINAL BLOG POSTS – Image Handlers – JQuery/ASP.NET/SQL DB & Entity Framework (MVC3)
An age old problem apparently where a inner div is attached to a outer div element in the DOM tree. Now usually when the inner div grows in size (i.e. content is added), the outer div will size accordingly. The issue is when a float is applied to the inner div. This causes the container div to ignore what is happening to the inner div element, thus it will not resize based on the inner div.
Right, confused? Too many div’s to! Here is an example of a page with float:left applied to the list elements (li):
As you can see, the list elements are floating left, BUT the outer div container (white block), hasn’t resized. Now removing float:left shows you how i want the container div (outer) to behave:
Unfortunately my lists are not behaving correctly. Now because im new to HTML/CSS i added a forum post to asp.net forums, where a kind chappy told me about the clearfix resolution.
The last post i described how to create a HTML Helper for Image Previewing. This time around we will be uploading an image to a Database, which is handled little differently than normal CRUDoperations.
The following block of code shows my Create action method within my UserProfile controller:
1: public ActionResult Create(UserProfile userprofile,
2: HttpPostedFileBase imageLoad2)
4: var profileimage = new Medium();
6: if (imageLoad2 != null)
8: using (Image img =
11: //--Initialise the size of the array
12: byte file = new byte[imageLoad2.InputStream.Length];
14: //--Create a new BinaryReader and set the InputStream
//-- for the Images InputStream to the
16: //--beginning, as we create the img using a stream.
17: BinaryReader reader =
18: imageLoad2.InputStream.Seek(0, SeekOrigin.Begin);
20: //--Load the image binary.
21: file = reader.ReadBytes((int)imageLoad2.
23: //--Create a new image to be added to the database
25: profileimage.Created_Date = DateTime.Now;
26: profileimage.Source = file;
27: profileimage.File_Size = imageLoad2.ContentLength;
28: profileimage.File_Name = imageLoad2.FileName;
29: profileimage.Content_Type = imageLoad2.ContentType;
30: profileimage.Height = img.Height;
31: profileimage.Width = img.Width;
32: #if DEBUG
33: profileimage.Record_Status = "T"; //--Testing.
35: profileimage.Record_Status = " ";/--Live.
43: if (ModelState.IsValid)
49: return RedirectToAction("Index", "Home");
53: var viewModel = new UserProfileViewModel
55: UserProfile = userprofile,
56: UserTypes = userTypes
59: return View(userprofile);
This method creates has two parameters, the model UserProfile, and the HttpHostedFileBase imageLoad2 is the file posted. Have a look at the previous post about building the HTML.
NB: the parameter name imageLoad2 needs to be the name of the input file from the view so that is is bound (using the MVC Model Binding). If you used a different name the parameter would be null.
The method creates a Entity Framework model Medium, which is my class to describe the SQL Table which holds the Images. The images are saved within SQL as varbinary(MAX). Quite easy really, create a BinaryReader to convert the image stream to binary, then using the EF AddObject to the entity set, then save it to the table.
There we have it. Join me next time for downloading the image, using another custom HTML Helper.