JQuery, ASP.Net, Enter Key and a LinkButton

By Gord at April 23, 2010 23:26
Filed Under: ASP.NET, JQuery

I came across a pretty common problem with ASP.Net when it comes to handling the <enter> key.  More often than not, hitting the enter key on a website does different things depending on what text field is in focus.  Of the many solutions I looked at, none of them handled the submit behaviour of an LinkButton correctly in both FireFox and IE.  In the following example show you a hack that will make it work.

 

<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head runat="server">
<
title></title>
</
head>
<
body>
<
form id="form1" runat="server" defaultbutton="Button1">
<
div>
<
asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<
hr />
<
asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<
asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
<
br />
<
br />
<
asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<
asp:LinkButton ID="LinkButton2"
runat="server" onclick="LinkButton2_Click"><img src="button.png" /></asp:LinkButton>
</
div>
</
form>
</body>
</
html>

 

In this example you’ll see i only have 4 controls: two textboxes, a button and a link button.  Our main concern will be textbox2 and linkbutton2 because a form postback is very easily handled by the button normally.  When you run this code, button1 will change the text of the label to say “button 1 was clicked” and similarly linkbutton2 will change the text to “button 2 was clicked”.  Our goal is to have the text say “button 2 was clicked” when we hit the enter key in textbox 2.

 

The main problem is that a link button technically isn’t a button.  As a result, setting the defaultbutton property of the form to linkbutton2 won’t work (at least not in FireFox).  To get around the problem, we employ JQuery to read some properties off the button, and submit back to our web server as if the link was clicked.  To do that, we use the following script:

 

<script type="text/javascript" language="javascript">
$('#<%= TextBox2.ClientID %>').keypress(
function(event) {
if (event.which == 13) {
var postbackScript = ($('#<%= LinkButton2.ClientID %>').attr('href')
                    .replace('javascript:', ''));
eval(postbackScript);
return false;
} else {
return true;
}
}
);
</script>

 

This simple script simply reads off the href of linkbutton2, strips off the beginning “javascript:” text, and runs it as a javascript.  Simple and effective. 

 

This can applied to more than just link buttons.  A basic function can be written that reads the input of an entire form, and depending on the calling object, react different… I’ll hopefully have that posted up in my next blog entry.

 

You can download the code here: EnterKeyPostback.zip (43.22 kb)

Object Property Mapping Using Reflection

By Gord at April 17, 2010 00:18
Filed Under: .Net Framework 4.0

The new Entity Framework 4.0 has the capability of keeping the entity objects in a separate project from the data definitions (.edmx file) making it possible to build proper n-tier applications – bing POCO for more info on this topic.  This was all well and good until i realized that a change in the database tables would more or less necessitate a change in the entity objects.  While many people may consider this to be a non-issue, I had hoped that I could use these entity objects in a WCF service.  In my situation, I could simply change the data contract of the WCF service whenever I want as this would force clients to update at the same time – that wasn’t going to happen.  As a result, I was forced to make separated data transfer objects (DTOs) specifically for the WCF service being built.  In doing so, I was built up a fun chunk of code that uses reflection and a custom configuration section to dynamically map objects of any type.

 

The ObjectMappingUtility project is very easy to use in code.  Below is an example of how to map from values from one object to another in code.

 

SourceTestObject sourceObject = new SourceTestObject()
{
    sourceStringValue1 = "SV1",
    sourceStringValue2 = "SV2",
    sourceIntValue1 = 99,
    sourceIntValue2 = 42,
    sourceLongValue1 = 6543L,
    sourceLongValue2 = 3456L
};

DestinationTestObject destinationObject = new DestinationTestObject();

destinationObject = (DestinationTestObject)
ObjectMappingUtility.MapObjects(sourceObject, destinationObject);

 

To tell the utility what properties to map, you simply have to add some configuration options to your App.config or Web.config file.  First you need to add the configuration section:

 

  <configSections>
    <sectionGroup name="objMapCustomConfig">
      <section name="objectMappingConfiguration" type="ObjectMapping.ObjectMappingConfiguration,
ObjectMapping,Version=1.0.0.0,Culture=neutral,PublicKeyToken=null
"/> </sectionGroup> </configSections>

 

Then your object and property mappings:

 

  <objMapCustomConfig>
    <objectMappingConfiguration>
      <objectMappings>
        <add name="ObjectMappingUtilityTests.SourceTestObject_
ObjectMappingUtilityTests.DestinationTestObject
"
sourceType="ObjectMappingUtilityTests.SourceTestObject"
destinationType
="ObjectMappingUtilityTests.DestinationTestObject" > <propertyMappings> <add sourceProperty="sourceStringValue1" destinationProperty="destinationStringValue1" /> <add sourceProperty="sourceStringValue2" destinationProperty="destinationStringValue2" /> <add sourceProperty="sourceIntValue1" destinationProperty="destinationIntValue1" /> <add sourceProperty="sourceIntValue2" destinationProperty="destinationIntValue2" /> <add sourceProperty="sourceLongValue1" destinationProperty="destinationLongValue1" /> <add sourceProperty="sourceLongValue2" destinationProperty="destinationLongValue2" /> </propertyMappings> </add> <add name="ObjectMappingUtilityTests.SourceTestObject2_
ObjectMappingUtilityTests.DestinationTestObject2
"
sourceType
="ObjectMappingUtilityTests.SourceTestObject2"
destinationType="ObjectMappingUtilityTests.DestinationTestObject2"> <propertyMappings> <add sourceProperty="sourceStringValue1" destinationProperty="destinationStringValue1" /> <add sourceProperty="sourceIntValue1" destinationProperty="destinationIntValue1" /> <add sourceProperty="sourceLongValue1" destinationProperty="destinationLongValue1" /> </propertyMappings> </add> </objectMappings> </objectMappingConfiguration> </objMapCustomConfig>

 

The only real restriction here is the “name” of the mappings must be the object.GetType().FullName value of the source object followed by the destination object separated with an underscore.

 

When I built this utility, the point was to map Entity Framework POCOs (Plain Old CLR Objects) to specific DTOs (Data Transport Objects) for my WCF service.  If you are using EF POCOs you need to understand that EF builds POCOs with the object type full name System.Data.Entity.DynamicProxies.myObject_a8e7b8e8a6f812.  When using this utility just use the System.Data.Entity.DynamicProxies.myObject and it will handle removing the junk at the end.

 

You can download the code here: ObjectMappingUtility.zip (83.56 kb)

My First Blog

By Gord at April 10, 2010 19:35
Filed Under: Blog

This is my very first blog.  I have never blogged before... but every now and again I think I should.  The reason for this is quite simple - sometimes when I have a problem (relating to development) I find many different potential solutions.  Only after searching thousands of posts do I finally find something that works... the real solution is typically a combination of those few hidden gems inside forum posts.  When this happens I think to myself: If i had a blog, I could share this information so the next poor sucker doesn't have to go through the same tedious hell that I went through.  So, after many years of thinking, I finally decided to act with what you see here. 

-Gord

 

About the author

Gord graduated from Carleton University with a bachelors of Computer Science with minors in both Philosophy and Mathematics.  His post graduate career started in 2005 as a Systems Administrator until becoming a .Net Web Developer 2 years later.  Since then, he has moved on to being a more generic Systems Developer, focusing on intersystem communication, design, and architecture.

Page List