IEnumerable VS IQueryable

Lately I have been doing some performance improvements in one of the modules of our web application in the office. I am writing this to share my observation between the 2 important subjects.

1. IEnumerable

– Exposes an enumerator, which supports a simple iteration over a non-generic collection.

2. IQueryable

– Provides functionality to evaluate queries against a specific data source wherein the type of the data is not specified.

Okay let’s go to the real stuff. Lets say we have a collection from our EDMX. And we want to pick the top 100 last inserted records. So how do we do that?

1. IEnumerable

using (var context = new MyContext()) 
{
    IEnumerable<Employee> employees = context.Employees.OrderByDescending(e => e.EmployeeId);
    var latestEmployees = employees.Take(100);
}

1. IQueryable

using (var context = new MyContext()) 
{
    IQueryable<Employee> employees = context.Employees.OrderByDescending(e => e.EmployeeId);
    var latestEmployees = employees.Take(100);
}

Okay that was easy. Now let’s see how it is being interpreted by SQL Server.

1. Using IEnumerable – As you can see below it gets all the records without applying the top 100 filter which is really a bad idea if you have thousands of rows.

IEnumerable

 

2. Using IQueryable – Now with IQueryable, the query result is now different which is what we want. Apply the top 100 first before we execute the query.

IQueryable
As you can see from the above comparison, there is a very huge difference between the 2 when they are executed. I would suggest IEnumerable if you are dealing with in memory collections. If you want to deal with database collections I would suggest IQueryable.

 

I hope I had shared some helpful information to you regarding these topics which we use everyday and hopefully if you like my blog please also visit my site http://www.francorobles.com to know more about me.

How to avoid “Potential Dangerous Request.QueryString” in asp.net mvc

In some instances we might wan’t to allow html tags in our web application. But sad to say ASP.NET MVC blocks us from doing this. Chek out the below scenario. I want to add a comment and I want it italicized.

– Below is our form. When we submit this form it will result to?

ErrorOnPost

– Yes you are right, to an error. After submitting the form this is the result. By default MVC blocks potentially malicious scripts.

ErrorOnPost2

 

– But what if we want to allow valid htm tags such as the italics tag? What do we do then? One of the best ways I found is to block inputs containing <script> tags and allow those that are non script tags . So how do we do that?

Let’s modify our ActionResult a little bit by adding [ValidateInput(false)] attribute in our action.

[ValidateInput(false)]
public ActionResult AddComment(string comment)
{
     if (System.Text.RegularExpressions.Regex.IsMatch(comment, “<script>.*?</script>”)) {
          throw new HttpException(500, “Potantially malicious Request.QueryString detected.”);
     }
     else {
          ViewBag.Message = comment;
     }
     return View(“Index”);
}

As you notice from the above snippet I am checking if the input contains tags. If it does, I displayed the message that the input is not valid, otherwise, I displayed what they have typed in the message box.

– Once we run our app again and tried to input html tags appart from <script> tags, it run’s smoothly as shown below. Else we throw our own exception. disallowing script tags that might cause serious problems in our app.

PassedTag

And that is it. You are now allowing safe html tags in your web app.

Happy coding.

By the way the entire source is in github. https://github.com/francorobles/Blog/tree/master/HtmlInputsInMvc

Custom EntityFramework DbContext with VB.NET – Code first approach

First of all, let me say that I have used EntityFramework many times already but I want to know its inner workings and decided to do it for the starters. That is why I created this blog to share my experience when I did it in vb.net.For the remainder of this blog EF is EntityFramework.

So, now let’s get EF from nuget using package manager console in visual studio. At the time of this writing I am using Visual Studio 2013.

1. Go to package manager console.
PackageManagerConsole

2. Install the latest EF package which currently is 6.1.1.

PackageManagerConsoleConsole

3. Time to create our DbContext. What Im doing here is that I am inheriting from System.Data.Entity.DbContext,

Imports System.Data.Entity
Public Class EFContext
     Inherits DbContext
End Class

4. Lets Assign our connection string to our context.

Public Sub New()
     MyBase.New(ConfigurationManager.ConnectionStrings("ConnectionString").ConnectionString)
End Sub

5. Lets create our entity

Public Class Users
     Property UserId As Integer
     Property Username As Integer
     Property FirstName As String
     Property LastName As String
End Class

6. Add our entity to our context

Private _systemUsers As DbSet(Of Users)
Public Property SystemUsers() As DbSet(Of Users)
     Get
          Return _systemUsers
     End Get
     Set(value As DbSet(Of Users))
          _systemUsers = value
     End Set
End Property

7. And finally lets override OnModelCreating method of our base class DbContext. Why I am doing this? Because I am telling our custom DbContext that I have an existing database and I don’t what you to touch it.

Protected Overrides Sub OnModelCreating(modelBuilder As DbModelBuilder)
     MyBase.OnModelCreating(modelBuilder)
     Database.SetInitializer(Of EFContext)(Nothing)
End Sub

And that is pretty much about it. You now have your custom DbContext using the code first approach.

The complete source is available in github. https://github.com/francorobles/Blog/tree/master/EntityFrameworkVB

Adding AntiForgeryToken to MVC with jQuery

I’ve seen many posts on how to include MVC’s AntiForgeryToken on a view that is using a javascript framework for its UI. Well, below is a simple solution on how you can implement it. By the way, I am using MVC 3 and jQuery while writing this post.

First.
Include @Html.AntiForgeryToken() on your view. Below is an example view.

Second
On your controller, add the [ValidateAntiForgeryToken] attribute.

Finally
To complete the puzzle, lets post our data together with the antiforgery token to our controller action. You need to encode the value of __RequestVerificationToken before posting it, otherwise it will be useless.

And that’s it, as simple as the above.

Returning Multiple Models in 1 View in ASP.NET MVC3

Many mvc developers where asking on how to return multiple Models on a single view. Well its not that complex,  and here is how I did it.

First : Create the models

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcProject.Models {
     public class FirstModel : IEnumerable<FirstModel>, IList<FirstModel> {
         public string Title { get; set; }
         public string Message { get; set; }
         ...
     }
     public class SecondModel : IEnumerable<SecondModel>, IList<SecondModel> {
         public string Title { get; set; }
         public string Message { get; set; }
         ...
     }

     /*Strongly typed wrapper model*/
     public class WrapperModel {
          FirstModel firstModel;
          SecondModel secondModel;
          public WrapperModel() {
                 firstModel = new FirstModel();
                 secondModel = new SecondModel();
          }
     }
}

Second : Create our controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using MvcProject.Models;

namespace MvcProject.Controllers {
     public class HomeController : Controller {
          public ActionResult Index() {
                WrapperModel wrapperModel = new WrapperModel();
                return View(wrapperModel);
          }
     }
}

Finally : Access our model through Razor

@model MvcProject.Models.WrapperModel
<div>
     @{
                foreach (MvcProject.Models.FirstModel fm in ViewData.Model.firstModel) {
                    <div>
                        <div id="SponsorNameContainer">@fm.Title</div>
                        <div id="SponsorMessageContainer">@fm.Message</div>
                    </div>
                }
            }
</div>
<div>
     @{
                foreach (MvcProject.Models.SecondModel sm in ViewData.Model.secondModel) {
                    <div>
                        <div id="SponsorNameContainer">@sm.Title</div>
                        <div id="SponsorMessageContainer">@sm.Message</div>
                    </div>
                }
            }
</div>

Patching .net executables with Reflexil.

Lost the source code of a .net executable file? What will you do? Instead of searching for the missing piece which was not documented and not hosted in the version control, instead of searching for it in windows explorers for hours when you already know it cant be found, instead of blaming someone for not making a backup of it, go move and use a tool from red gate called the reflector and its add-in called reflexil.

My case was like the above, where someone forgot to make a backup of a running program, which will run forever. Its a windows application where members of a certain promotion are going to swipe their cards to the application and if they are entitled, the standalone application will print a voucher stating that they can claim these and those. The application needs to be updated by certain people monthly, and my boss asked me if there is a way to automate it? I said YES, but the problem is i dont have the source code, only the executable. I said, there has to be a way, and here is how I did it.

First, download these tools:
1. Reflector – http://www.red-gate.com/products/reflector/
2. Reflexil – http://sebastien.lebreton.free.fr/reflexil/

Lets setup reflector first.
1. Open reflector.

2. Add reflexil in the add-ins. Just go to View->AddIns and add Reflexil.Reflector.dll.

3.  Load the executable file that you need to patch.

4. Now select the function or method that you want to patch. Right-click on the reflexil pane and select Replace all with code.

5. Now lets make our changes.

Once you did the change, Right-click your loaded assembly and select save as from the context menu.

Now see the lesson? “Next time, host your code in your version control!.”

URL rewrite with encryption for security reasons.

Today I was asked by my friend on how to rewrite a url for security reasons. He added that a geeky person might attempt to do something on the web application. With that in hand, I said, maybe we can try encrypting the string (QueryString) that we append to our original url. And here is how i did it.

First – Create the class that encrypts and decrypts our string.

using System.Text;
using System.Security.Cryptography;

namespace SC.Utility {
     public class Security {

     public static string Encrypt(string toEncrypt, bool useHashing)
        {
            byte[] keyArray;
            byte[] toEncryptArray = UTF8Encoding.UTF8.GetBytes(toEncrypt);

            System.Configuration.AppSettingsReader settingsReader =
                                                new AppSettingsReader();
            // Get the key from config file

            string key = (string)settingsReader.GetValue("SecurityKey",
                                                             typeof(String));
            //System.Windows.Forms.MessageBox.Show(key);
            //If hashing use get hashcode regards to your key
            if (useHashing)
            {
                MD5CryptoServiceProvider hashmd5 = new MD5CryptoServiceProvider();
                keyArray = hashmd5.ComputeHash(UTF8Encoding.UTF8.GetBytes(key));
                //Always release the resources and flush data
                // of the Cryptographic service provide. Best Practice

                hashmd5.Clear();
            }
            else
                keyArray = UTF8Encoding.UTF8.GetBytes(key);

            TripleDESCryptoServiceProvider tdes = new TripleDESCryptoServiceProvider();
            //set the secret key for the tripleDES algorithm
            tdes.Key = keyArray;
            //mode of operation. there are other 4 modes.
            //We choose ECB(Electronic code Book)
            tdes.Mode = CipherMode.ECB;
            //padding mode(if any extra byte added)

            tdes.Padding = PaddingMode.PKCS7;

            ICryptoTransform cTransform = tdes.CreateEncryptor();
            //transform the specified region of bytes array to resultArray
            byte[] resultArray =
              cTransform.TransformFinalBlock(toEncryptArray, 0,
              toEncryptArray.Length);
            //Release resources held by TripleDes Encryptor
            tdes.Clear();
            //Return the encrypted data into unreadable string format
            return Convert.ToBase64String(resultArray, 0, resultArray.Length);
        }

     public static string Decrypt(string cipherString, bool useHashing)
        {
            byte[] keyArray;
            //get the byte code of the string

            byte[] toEncryptArray = Convert.FromBase64String(cipherString);

            System.Configuration.AppSettingsReader settingsReader =
                                                new AppSettingsReader();
            //Get your key from config file to open the lock!
            string key = (string)settingsReader.GetValue("SecurityKey",
                                                         typeof(String));

            if (useHashing)
            {
                //if hashing was used get the hash code with regards to your key
                MD5CryptoServiceProvider hashmd5 = new MD5CryptoServiceProvider();
                keyArray = hashmd5.ComputeHash(UTF8Encoding.UTF8.GetBytes(key));
                //release any resource held by the MD5CryptoServiceProvider

                hashmd5.Clear();
            }
            else
            {
                //if hashing was not implemented get the byte code of the key
                keyArray = UTF8Encoding.UTF8.GetBytes(key);
            }

            TripleDESCryptoServiceProvider tdes = new TripleDESCryptoServiceProvider();
            //set the secret key for the tripleDES algorithm
            tdes.Key = keyArray;
            //mode of operation. there are other 4 modes. 
            //We choose ECB(Electronic code Book)

            tdes.Mode = CipherMode.ECB;
            //padding mode(if any extra byte added)
            tdes.Padding = PaddingMode.PKCS7;

            ICryptoTransform cTransform = tdes.CreateDecryptor();
            byte[] resultArray = cTransform.TransformFinalBlock(
                                 toEncryptArray, 0, toEncryptArray.Length);
            //Release resources held by TripleDes Encryptor                
            tdes.Clear();
            //return the Clear decrypted TEXT
            return UTF8Encoding.UTF8.GetString(resultArray);
        }


       }
}

Then we have to add this security key in our web.config in appSettings section. This can be any key that is referenced by our encrypt and decrypt function.

<appSettings>
    <add key ="SecurityKey" value ="1001101011000011" />
  </appSettings>

And here is how we use it in our page. We first add a reference to our SC.Utility namespace.

using SC.Utilit;

Then on the page where we append our query string, we can do the below code.

Response.Redirect("Products.aspx/" + Security.Encrypt("category=books,sender=franco.robles,subcategoryid=horror,pricerange=100-1000", true));

And on our destination page, we can do the below code.

Response.Write(Security.Decrypt(Request.PathInfo.Substring(1), true));

Here is how it looks like on the browser after the request.

Not quite elegant solution but we did it.

Saving Blob Files direct to SQL Server

The common thinking of a developer if asked for file upload and download component is to put it in a shared directory and upload it as part of a file system. But there is a more neater way of doing it and Sharepoint does it. Now, ill show you how I do it with ASP.NET.

First lets setup our page to support vb.net function call from client side using PageMethods.

.....
<form id="frmStrive" runat="server">
<asp:ScriptManager ID="scriptManager" runat="server" EnablePageMethods="true" />
<asp:FileUpload ID="fileUpload" runat="server" Width="100%" onchange="PutDescOnParent(this.value);"/>
...

right after our form tag is we created a scriptmanager and the most important thing is that we set EnablePageMethods=”true” which will do the trick.

Next we set up our client side code.

function onUploadClick(){
            if ($j("#txtUploadDesc").val() == '') {
                alert("Please put a description for this file.");
                return;
            }
    
            var vaild = fileUpload.value.length > 0;
            if(vaild){
                //  disable the upload button
                $get('upload').disabled = 'disabled';
                
                //  update the message
                updateMessage('info', 'Initializing upload ...');
                PageMethods.SaveFileToDb(document.getElementById("txtUploadDesc").value);
                //  submit the form containing the fileupload
                
                form.submit();
....

Now if you’ll notice on the 14th line i called PageMethods.SaveFileToDb where it accepts one parameter and call a server side code. Lets see what it does from behind.

<System.Web.Services.WebMethod()> _
    <System.Web.Script.Services.ScriptMethod()> _
    Public Shared Sub SaveFileToDb()
        Dim files As New System.Collections.Generic.Dictionary(Of String, String)
        files = DirectCast(HttpContext.Current.Session("Files"), System.Collections.Generic.Dictionary(Of String, String))

        For Each kvp As KeyValuePair(Of String, String) In files
            Using myConnection As New System.Data.SqlClient.SqlConnection(ConfigurationManager.ConnectionStrings("DBConnection2").ConnectionString)
                Const SQL As String = "INSERT INTO [tblFiles] (filename, filedescription, mainfile,parent) VALUES (@fileName, @fileDescription, @mainFile,@parent)"
                Dim myCommand As New System.Data.SqlClient.SqlCommand(SQL, myConnection)
                myCommand.Parameters.AddWithValue("@fileName", kvp.Key)
                myCommand.Parameters.AddWithValue("@fileDescription", kvp.Value)
                Dim im As New _HR001
                Dim fle As New System.IO.FileInfo(im.GetPath(kvp.Key))
                im.Dispose()
                Dim imageBytes(fle.Length) As Byte
                Dim s As System.IO.Stream
                s = fle.OpenRead
                s.Read(imageBytes, 0, imageBytes.Length)
                myCommand.Parameters.Add("@mainFile", Data.SqlDbType.VarBinary)
                myCommand.Parameters("@mainFile").Value = imageBytes
                myCommand.Parameters.AddWithValue("@parent", New _HR001().GetGuid())
                myConnection.Open()
                myCommand.ExecuteNonQuery()
                myConnection.Close()
            End Using
        Next kvp
    End Sub

Now what this block of code does is that it simply retrieves the path of the file(s) the we temporarily store on a session then inserts those files to a particular table which in my case named tblFiles containing a varbinary(max) field which is the container of binary files. Oh by the way during the time we started our session, we created a temporary directory on the server which is identified via creating a unique id and is achieved by the below line.

Sub Session_Start(ByVal sender As Object, ByVal e As EventArgs)
        Dim dir As New System.IO.DirectoryInfo(Server.MapPath("~/uploads/"))
        dir.CreateSubdirectory(Session("TempDir"))
        Session("Files") = New System.Collections.Generic.Dictionary(Of String, String)
End Sub 

NOTE: In sql server 2000, you can upload up to 8mb files only, which is upgraded in sql server 2005 up. In sql server 2005 up? It depends on your disk space. Now let me show you the structure of my table.

You might be asking, after saving to sql server how will i retrieve it? Here’s how.

Using myConnection As New System.Data.SqlClient.SqlConnection(ConfigurationManager.ConnectionStrings("DBConnection2").ConnectionString)

                Const SQL As String = "SELECT * from tblFiles where fileId=@fileId"
                Dim myCommand As New System.Data.SqlClient.SqlCommand(SQL, myConnection)
                myCommand.Parameters.AddWithValue("@fileId", HttpContext.Current.Request.QueryString("fileId"))

                myConnection.Open()
                Dim myReader As System.Data.SqlClient.SqlDataReader = myCommand.ExecuteReader

                If myReader.Read Then

                    Response.ClearContent()
                    Response.AddHeader("Content-Disposition", "attachment; filename=""" & myReader.Item("fileName") & """")

                    Dim bw As New System.IO.BinaryWriter(Response.OutputStream)
                    bw.Write(DirectCast(myReader("mainFile"), Byte()))
                    bw.Close()

                    Response.End()

                End If

                myReader.Close()
                myConnection.Close()


            End Using

See the picture? Its not quite complex. Have to continue doing my project. My next blog will be about how to convert a lousy windows forms to WPF the silverlight way.

Cool jQuery Progress Indicator

One of my projects was to develop a automated employee automation application which will use jQuery. Today I am going to show you how you can create a cool progress indicator to tell your end user that something is going on behind the back of an action. Below is an image of the progress indicator that slides from the top to the middle of the screen then displays the processing message then slides up and disappears once done.

Processing Image

The Code

<html>
<head>
	<script src="scripts/jquery.js"></script>
	<script type="text/javascript" >
		var $j = jQuery.noConflict();
		$j(document).ready(function(){
			$j("#btnSubmit").click(function(){
				$j("#messenger").css("width", document.body.offsetWidth);
        			$j("#messenger").css("height", document.body.offsetHeight);
        			$j("#messenger").css("opacity",.7);
        			$j("#messenger").fadeIn('fast');
				$j("#messengermessage").css("width", document.body.offsetWidth);
				$j("#messengermessage").animate({opacity: "1", top: "+=" + addToAnimation, height: "100", width: document.body.offsetWidth}, "slow")
        			var myhtml = '<div style="float:left; position:relative; padding-top:30px;"><img src="images/processing.gif" /></div><div style="float:left; position:relative; padding-top:40px;"><font style="font-family:verdana; font-size:14px;color:#000000; font-weight:bold;">saving attachments...</font></div>'
        			$j("#messengermessage").html("");
        			$j("#messengermessage").html(myhtml);
				$j.post('handlers/EmployeeRequisition.ashx', {
					requestedBy : GetRequestedBy(),
                    			requestor : GetRequestor(),
                    			requisitionDate : $j("#dtpRequisitionDate").val()
				},
                		function(data) {
					myhtml = '<div style="float:left; position:relative; padding-top:30px;"><img src="images/processing.gif" /></div><div style="float:left; position:relative; padding-top:40px;"><font style="font-family:verdana; font-size:14px;color:#000000; font-weight:bold;">form saved... </font></div>'
                    			$j("#messengermessage").html("");
                    			$j("#messengermessage").html(myhtml);
                    			$j("#messengermessage").animate({opacity: "1"},2000, function(res) {
                        		var subtractThis = document.body.offsetHeight - 500;
                        		$j("#messengermessage").animate({opacity: "0", top: "-=" + subtractThis, height: "0", width: document.body.offsetWidth}, "slow")
                        	        $j("#messenger").fadeOut('fast');
                    		});
			});
		});
	</script>
</head>
<body style="font-family: Verdana; margin: 0px;">
    <form id="frmHR001" runat="server">
	<div>
		............

	</div>
	<div>

		<input type="button" id="btnSubmit" value="submit" />
	</div>
	<div id="messenger" style="float: none; position: absolute; width: 100%; height: 100%;
            background-color: #000000; display: none; left: 0; top: 0;">
        </div>
        <div id="messengermessage" style="float: none; position: absolute; width: 100%; height: 100px;
            background-color: #ffffff; display: none; left: 0; top: 0; text-align: center;">
            <div style="float: left; position: relative; padding-top: 30px;">
                <img src="images/processing.gif" />
            </div>
            <div style="float: left; position: relative; padding-top: 40px;">
                <font style="font-family: Verdana; font-size: 14px; color: #000000; font-weight: bold;">
                    processing...</font>
            </div>
        </div> 
    </form>
</body>
</html>

The code is quite long but then again it achieves our purpose. Lets walk through the code and see how it happened.

1. Our Html
The fading in gray background which is initially hidden through the display:none; css attribute.

<div id="messenger" style="float: none; position: absolute; width: 100%; height: 100%;
            background-color: #000000; display: none; left: 0; top: 0;">
        </div> 

The white progress indicator with the processing image.

<div id="messengermessage" style="float: none; position: absolute; width: 100%; height: 100px;
            background-color: #ffffff; display: none; left: 0; top: 0; text-align: center;">
            <div style="float: left; position: relative; padding-top: 30px;">
                <img src="images/processing.gif" />
            </div>
            <div style="float: left; position: relative; padding-top: 40px;">
                <font style="font-family: Verdana; font-size: 14px; color: #000000; font-weight: bold;">
                    saving form...</font>
            </div>
        </div> 

The submit button which triggers the posting of data via our handler

<input type="button" id="btnSubmit" value="submit" />

2. The jQuery code the does it all.

First we reference our jquery library.

<script src="scripts/jquery.js"></script>

Second we initiate our jQuery code;

<script type="text/javascript" >
		var $j = jQuery.noConflict();
		$j(document).ready(function(){
                });
</script>

Then we assign an click event to our submit button

<script type="text/javascript" >
		var $j = jQuery.noConflict();
		$j(document).ready(function(){
			$j("#btnSubmit").click(function(){
                        });
		});
	</script>

And inside our button the gray slightly transparent background occupies the whole width of the window

$j("#messenger").css("width", document.body.offsetWidth);

then occupies the whole height of the screen

$j("#messenger").css("height", document.body.offsetHeight);

we then set its opacity

$j("#messenger").css("opacity",.7);

and then here is the fading-in animation of the gray background

$j("#messenger").fadeIn('fast');

we then tell the white sliding progress indicator to occupy the whole width of the window

$j("#messengermessage").css("width", document.body.offsetWidth);

and finally the code that makes it slide saying that our form is currently doing something

$j("#messengermessage").animate({opacity: "1", top: "+=" + addToAnimation, height: "100", width: document.body.offsetWidth}, "slow")

how does it slide up after the posting of data? just do the reverse of the latter.

$j("#messengermessage").animate({opacity: "1"},2000, function(res) {
var subtractThis = document.body.offsetHeight - 500;
$j("#messengermessage").animate({opacity: "0", top: "-=" + subtractThis, height: "0", width: document.body.offsetWidth}, "slow")

and lastly we tell the gray background to fadeout since we are done with the processing

$j("#messenger").fadeOut('fast');

Thats it. Of course there are many cool progress indicators but this one is simple and easy to understand yet nice looking. By the way there is one great javascript library asside from jQuery that you would really love. Find out how, this is there site: http://www.sencha.com

Blog at WordPress.com.

Up ↑