AJAX Post Using Serialize Data

AJAX posts are great for calling controller methods.  However, if you have a lot of parameters or if your method only takes a model there is a nice and simple answer to sending all of the data in a quick and efficient matter.  The AJAX call allows you to .serialize() the form that the data is coming from.  It can select on individual elements like <input> or <textarea> but it is typically easier to select the surrounding form. Let’s look at how this call is constructed.

$.ajax({
    type: 'POST',
    url: '/Controller/EmailAction',
    data: $('#form-content').serialize(),
    dataType: "json",
    success: function (data) {
        //show a success message
    },
    error: function () {
        //log failure/show message
    }
});

As you can see it is pretty straight forward.  Data gets set to the form, which in this case is $(‘#form-content’).  From there you call a .serialize() on the form as show above. So if we look at the controller method this is all you need for your method declaration.

public JsonResult EmailAction(MyModel model)
{
       try
       {
              //Processing here.
       }
       catch (Exception ex)
       {
              //log
       }

       return Json(result);
}

It is obviously not a complete method by any means but as you can see it only takes a model.  The magic that happens is when you name the input elements the same as in the model, when you serialize and make the request they are automatically mapped over because it generates a query string of the input elements and they are mapped over to the model.  This makes something like a registration form that has numerous fields it becomes very simple to create a model and just call .serialize() and it’s all done for you.  I found this way a lot easier and more organized then creating methods with tons of parameters and helps to minimize error if you change the names of fields as there are less places to make changes.


Differences Between DataReader and DataAdapter

In doing some research about common interview questions for .Net developers I came across the question of what are the difference between DataReader and DataAdapter; as well as when would each be used.  As it turns out, they are quite easy to figure out which one does what with some distinct difference.

DataReader is a forward only read stream that is useful when you are just selecting data from the database.  DataReader is great for when you are just grabbing information to fill out a DataGrid or WebControls in your page.  However, do note that DataReader requires an open connection to the database until the entire select process is complete.  DataReader is good to use when you only need to grab data once and in a read only context as it offers no way to insert/update/delete data in the database.  With DataReader you also need to make sure that you explicitly open and close the database connection.

DataAdapter is similar in that it can be used to select data but it also allows the other data actions of insert/update/delete.  DataAdapter uses a DataSet to handle all of the data and the manipulations to the data.  This is a nice feature in the respect that it uses a disconnected architecture that allows the database connection to remain close until it is absolutely needed.  A nice difference between DataAdapter and DataReader is that DataAdapter handles the opening and closing of the database connection automatically so there is no manual labor to remember.

Some good points to remember not only for using in your applications but also good to remember going into discussion and interview type of scenes.


Div Border With Rounded Corners And Gradient Background

Getting a div to have rounded corners with CSS is not too difficult of a task. I came across a solution I would like to share quickly and briefly. Please note I found it only works in IE9, Firefox and Chrome. It’s really only a couple lines of CSS so lets’ take a look.

.roundedCorners {
   -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius: 10px;
}

By setting these 3 values, you get a pretty nice rounded edge. Now here is a weird edge case I came across. I used a gradient background through CSS in a div and in IE9 the gradient was not rounded off. So the fix for that was to surround it with a div and use an overflow: hidden to mask the colors.


<div class="roundedCorners mask">
    <div class=" roundedCorners gradientBackground">
    </div>
</div>

//CSS
.gradientBackground {
    /* for IE */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccc', endColorstr='#fff');
    
    /* for webkit browsers */
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff)); /* for webkit browsers */
    
    /* for firefox 3.6+ */
    background: -moz-linear-gradient(top,  #ccc,  #fff); /* for firefox 3.6+ */
}

.mask {
     overflow: hidden;
}

The above code properly rounded the corners of my div and provided a gradient with rounded corners as well in IE9, Firefox, and Chrome.  The rounded corners don’t work in older versions of IE.


Reinstalling and Moving Windows Services using bat file

Utilizing this bat file really makes moving windows services and re-installing them in a new location a fairly easy and quick task. I had an instance where I needed to move a currently running windows service to a new folder in a directory. I found that an easy way to do this was to just uninstall and reinstall the service itself. For this I used a .bat file that includes a couple commands. First, we have to stop the running service.

net stop "Adam's Windows Service"

The next command is using InstallUtil.exe to uninstall the current service. This is the full line for uninstalling.

c:\windows\Microsoft.NET\Framework\v4.0.30319\InstallUtil.exe -u "D:\Adams\AdamsWindowsService.exe"

As you can see, the ‘-u’ signifies uninstall.  Now that we have the service uninstalled we want to reinstall it using the new directory location.  This line looks almost exactly the same as above, however, there is no ‘-u’.  Have a look at the following to install.

c:\windows\Microsoft.NET\Framework\v4.0.30319\InstallUtil.exe "D:\AdamsNewDirectory\AdamsWindowsService.exe"

My service is now running from a new directory at D:\AdamsNewDriectory. The last thing to do is to restart the service.  This is almost the exact same as the first line except it includes a start.

net start "Adam's Windows Service"

Now that we have an AdamsServiceMove.bat (naming doesn’t matter) we can easily modify it for any service to and from any location as well.  Have a look at the full file below.

net stop "Adam's Windows Service" 
c:\windows\Microsoft.NET\Framework\v4.0.30319\InstallUtil.exe -u "D:\Adams\AdamsWindowsService.exe"
echo.
echo Please verify uninstallation ...
pause

c:\windows\Microsoft.NET\Framework\v4.0.30319\InstallUtil.exe "D:\AdamsNewDirectory\AdamsWindowsService.exe"

echo.
echo Starting Adam’s Windows Service...
pause

net start "Adam's Windows Service"

pause


Targeting IE6 and IE7 in CSS

Targeting IE6 and IE7 in CSS, as many of you know, becomes an extremely useful yet hack type of way of coding when you have to support these old browsers.  Some CSS hacks have made it a lot easier to handle the little quirks and override the main CSS to target a specific version.  There are two characters, one for IE6 and one for IE7.  Here is how it looks.

#divName
{
     padding: 5px;  /* shows in all browsers */
     *padding: 5px; /* shows in IE7 and earlier */
      _padding: 5px; /* shows in IE6 and earlier */
}

Really simple; by adding the preceding characters, it can change your CSS world.  I try at all costs to avoid doing such things because I don’t like how it clutters up my CSS page.  However, sometimes it’s just the easiest/quickest way to get the desired result you need when you have a deadline to meet.

There is another way to try and force CSS that is not working at that is by using a modifier called !important. However, this can make code messy and hard to maintain and I recommend avoiding at all costs.

Here is an example:

p {
    color: blue !important;
}

This means, regardless of what color style you use on an paragraph tag in other CSS, it will be trumped and will show up blue. Use wisely my friends.


StackOverflow Profile