# Thursday, 01 September 2011

Visual Studio is a great tool but not all tooling is well known. I see this question still way too often on the ASP.NET forums so I thought I would blog about it.

Problem:

You have a nice -vsdoc.js file sitting in your solution explorer and are used to get that great Intellisense kicking in when you work inside a webpage or webform doing some cool ASP.NET coding.

scriptsinsolutionexplorer

Figure 1: Solution Explorer showing our –vsdoc.js files

However if you want to follow good habits and make use of best practices and opt for a non obtrusive javascript approach, meaning simply that you put your script in a separate file with .js extension, you find yourself out of luck. Intellisense is gone!

nointellisenseforjavascript

Figure 2: No Intellisense when we expect to see some assistance for jQuery

Yikes!

Solution:

Of course there’s a solution. And luckily for us, a very easy one:

  1. Open the .js file
  2. In the Solution Explorer pick the right –vsdoc.js file
  3. Drag and drop that in the .js file like in figure 3
  4. Now try to type $( again and you’ll see like in figure 4 that Intellisense is back again.
  5. Drink a beer and celebrate (this last step isn’t really necessary but can spice up the fun factor)

dragdropjsfileonjsfile

Figure 3: Drag and drop from the Solution Explorer into the opened .js file

intellisenseisbackforjavascript

Figure 4: Intellisense is way back. Woohoo!

Grz, Kris.

Thursday, 01 September 2011 21:18:55 (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [0]  | 
# Tuesday, 04 May 2010
Being a pimp with Silverlight (using ASP.NET MVC2 and jQuery) was my first presentation for the Belgian user group Visug.
Tuesday, 04 May 2010 10:21:32 (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [1]  | 
# Monday, 19 April 2010
This article shows how to use ajax to load a partial view into a view and afterwards the form data can be retrieved from that dynamically added control.
Ajax | jQuery | MVC | PartialView
Monday, 19 April 2010 20:24:15 (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [0]  | 
# Thursday, 15 April 2010

Codeplex is a great resource to find all kinds of things developer related. One of the things I found recently were a bunch of snippets for jQuery to make life easier for developers using Visual Studio 2010. You can download them here.

Grz, Kris.

Thursday, 15 April 2010 19:51:13 (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [0]  | 
# Thursday, 08 April 2010

Yesterday I had the pleasure to deliver my first international presentation in Lebanon. The talk was about ASP.NET MVC 2 which got recently released topped with some jQuery. Since I knew that most people didn’t have hands on experience with MVC I made a more entry level presentation, explaining why it was introduced by Microsoft and what it was. Then I used several demos especially crafted to demonstrate some of the handy and powerful additions like data annotations and the interaction with jQuery validation, templated helpers, partial views, using a JsonResult together with jQuery to fill up html elements dynamically, …

For me it was a great experience and I got several felicitations from the spectators. I myself would like to thank Bilal Haidar for getting me into contact with the Lebdev user group and Samer Chidiac from Microsoft Lebanon for organizing this event at Berytech.

The slidedeck that I used can already be found on slideshare:

Grz, Kris.

Thursday, 08 April 2010 13:26:00 (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [3]  | 
# Wednesday, 02 December 2009

With a lot of ajax, sometimes too much, being used in modern web applications it usually means that also calculations or data is being kept on the client. That’s all great but sometimes one has to perform a postback to the server. When the browser unloads and all form data’s passed to the server the javascript variables that were living happily in the browser are lost. A possible solution is to use a hidden field to send it back and forth. Some source code explains this scenario better:

Markup:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="passjsdataviahiddenfield.aspx.cs" Inherits="betslap.passjsdataviahiddenfield" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function () {
        
            $('#<%= btnGo.ClientID %>').click(function () {
                var txtValue = 'Hello ' + $('#<%= txtInput.ClientID %>').val();
                $('#<%= hidden1.ClientID %>').val(txtValue);
            });
        });
     
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:HiddenField runat="server" ID="hidden1" />
        Fill in your name please: <asp:TextBox runat="server" ID="txtInput" />
        <br />
        <asp:Button runat="server" ID="btnGo" Text="Go!" OnClick="btnGo_Click" />
        <br />
        <asp:Literal ID="Literal1" runat="server"></asp:Literal>
    </div>
    </form>
</body>
</html>

Codebehind:

using System;

namespace betslap
{
    public partial class passjsdataviahiddenfield : System.Web.UI.Page
    {
        protected void btnGo_Click(object sender, EventArgs e)
        {
            Literal1.Text = hidden1.Value;
        }
    }
}

In the markup I make use of the new CDN (Content Delivery Network) from Microsoft. In the piece of javascript that follows a click event is wired and to the button control. The value of the textbox prefixed with the string Hello is put in a local variable txtValue. Then that variable’s used to fill up the hidden field value attribute. Once the button gets clicked this value passing to the hidden field gets processed and then the postback occurs. There we set in the Click eventhandler, on the server, the text of the literal control to the text of the hidden field, in which we passed our javascript variable. The page gets processed, html is rendered and sent back to the browser. Both the value of the hidden field and the text of the literal are the same right now. This demonstrates the working.

Something else that I touched is this syntax:

<%= btnGo.ClientID %>

Since ASP.NET generates the ids of the html that gets rendered it can be sometimes something else than you expect. Especially when using master pages and javascript a lot of people get surprised with the, in their eyes, unpredictable behavior as it also generates a lot of prefixes. ASP.NET exposes the ClientID property on server controls which provides us with the rendered id on the client. With this line we inject that ClientID directly into the code of javascript, which gets rendered to the browser and there the correct id is always available.

To learn more about Microsoft CDN take a look at this page: http://www.asp.net/ajaxlibrary/CDN.ashx.

Grz, Kris.

ASP.NET | CDN | jQuery
Wednesday, 02 December 2009 20:46:59 (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [0]  | 
# Monday, 29 June 2009

I’ve seen questions about this control over and over again on the forums and decided to write something about it. The most common questions seem to be these:

1) How to show the modalpopup from codebehind?

Quite an easy one. The control itself exposes a Show method. This can be called during a postback for example to show some informative message or to provide a fill in form for an enduser. The following code snippet show how to do it:

e Language="C#" AutoEventWireup="true" CodeBehind="ModalpopupShowFromCodeBehind.aspx.cs" Inherits="WebApplication35Tech.ModalPopupTesting.ModalpopupShowFromCodeBehind" %>
<%@ Register TagPrefix="act" Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Show a modalpopupextender from codebehind</title>
    <style type="text/css">

    .modalBackground {
        background-color:Gray;
        filter:alpha(opacity=70);
        opacity:0.7;
    }

    .modalPopup {
        background-color:#ffffdd;
        border-width:3px;
        border-style:solid;
        border-color:Gray;
        padding:3px;
        width:250px;
    }

    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="Scriptmanager1" runat="server" />
        
        <asp:Panel ID="pnlOverlay" style="display:none;" runat="server" CssClass="modalPopup">
            Some informative message: Hello world!
        </asp:Panel>
        
        <asp:Button ID="Button1" Text="Click me" runat="server" 
            onclick="Button1_Click" />
        
        <act:ModalPopupExtender runat="server" ID="mpe" 
            PopupControlID="pnlOverlay" 
            BackgroundCssClass="modalBackground" 
            TargetControlID="pnlOverlay"></act:ModalPopupExtender>
    </div>
    </form>
</body>
</html>

And the codebehind:

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

namespace WebApplication35Tech.ModalPopupTesting
{
    public partial class ModalpopupShowFromCodeBehind : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            mpe.Show();
        }
    }
}

 

This little sample, once the button is clicked and a postback has occured, will lay a so called overlay over the content of the page and in the middle of the screen will show what’s inside pnlOverlay.
Notice that I put the style=”display:none;” in the panel markup. This was done to initially hide the content. Otherwise you get the behavior that the content of the overlay will show on rendering in the browser in the top left corner and then suddenly flashes to the center of the screen which is rather unwanted behavior.

2) How to show the modalpopup from script?

This seems to be a bit more tricky. The modalpopup extender control has an ID and most people seem to the think that this should be used in client script to show it. As many have found out this is incorrect. Besides the ID of an extender it also provides a BehaviorID. This is the one that can be used to for example show our modal popup or to set the value of a slider extender (also a part of the ASP.NET Ajax control toolkit).

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ModalpopupShowFromClientScriptWithjQuery.aspx.cs" Inherits="WebApplication35Tech.ModalPopupTesting.ModalpopupShowFromClientScriptWithjQuery" %>
<%@ Register TagPrefix="act" Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Show a modalpopupextender from client script</title>
    <style type="text/css">

    .modalBackground {
        background-color:Gray;
        filter:alpha(opacity=70);
        opacity:0.7;
    }

    .modalPopup {
        background-color:#ffffdd;
        border-width:3px;
        border-style:solid;
        border-color:Gray;
        padding:3px;
        width:250px;
    }

    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
                <asp:ScriptManager ID="Scriptmanager1" runat="server" />
        
        <asp:Panel ID="pnlOverlay" style="display:none;" runat="server" CssClass="modalPopup">
            Some informative message: Hello world!
        </asp:Panel>
        
        <input type="button" id="MyButton" value="Click me" />
        
        <act:ModalPopupExtender runat="server" ID="mpe" 
            PopupControlID="pnlOverlay" 
            BackgroundCssClass="modalBackground" 
            TargetControlID="pnlOverlay"
            BehaviorID="mpeBehaviorID"></act:ModalPopupExtender>
    </div>
    </form>
    <script src="../scripts/jquery-1.3.2.js" type="text/javascript"></script>
    <script type="text/javascript">

        window.onload = function() { $addHandler($get('MyButton'), 'click', showOverlay); }

        function showOverlay() {
            var bid = $find('mpeBehaviorID');
            bid.show();
        }
    
    </script>
</body>
</html>

 

For this sample I made use of the unobtrusive way of capturing a click event of a button. Here I use ASP.NET Ajax to wire up the click event of the button in the onload event of the page. but I could’ve also written the same with jQuery. Note that I’m then mixing 2 different javascript frameworks/libraries together! That little piece of script looks like this:

$(document).ready(function() {
    $('#MyButton').click(function() {
        var bid = $find('mpeBehaviorID');
        bid.show();
    });
});

Once the button is clicked the overlay will show itself.

3) How to reposition the modalpopup?

As we saw in the previous 2 samples the modalpopup shows itself in the center of the screen. Nice but sometimes you want to place it somewhere different. This can be done by using the setLocation function from ASP.NET Ajax. A sample will make it more clear:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ModalpopupChangeScreenPosition.aspx.cs" Inherits="WebApplication35Tech.ModalPopupTesting.ModalpopupChangeScreenPosition" %>
<%@ Register TagPrefix="act" Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Reposition a modalpopup</title>
    <style type="text/css">

    .modalBackground {
        background-color:Gray;
        filter:alpha(opacity=70);
        opacity:0.7;
    }

    .modalPopup {
        background-color:#ffffdd;
        border-width:3px;
        border-style:solid;
        border-color:Gray;
        padding:3px;
        width:250px;
    }

    </style>
    <script type="text/javascript">
    
        function pageLoad() {
            $addHandler($get('btn1'), 'click', reposition);
            $addHandler($get('link2'), 'click', showModalPopupViaClient);
        }
        function reposition(ev) {
            ev.preventDefault();
            var posP = Sys.UI.DomElement.getLocation($get('testLocation'));
            var posPnl = Sys.UI.DomElement.getLocation($get('Pnl3'));
            Sys.UI.DomElement.setLocation($get('Pnl3'), posPnl.x, posP.y);
        }
        function showModalPopupViaClient(ev) {
            if (ev !== undefined) {
                ev.preventDefault();
            }
            var modalPopupBehavior = $find('test');
            modalPopupBehavior.show();
            
            var posP = Sys.UI.DomElement.getLocation($get('link2'));
            var posPnl = Sys.UI.DomElement.getLocation($get('Pnl3'));
            
            Sys.UI.DomElement.setLocation($get('Pnl3'), posPnl.x, posP.y);
        }
    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager runat="server" ID="sm"></asp:ScriptManager>
        <asp:Panel runat="server" ID="Pnl3">
            <asp:TextBox runat="server" ID="txtTest"></asp:TextBox><br />
            <asp:Button runat="server" ID="btn1" Text="Reposition" />
        </asp:Panel>
        <asp:LinkButton runat="server" ID="link1" Text="Click me..."></asp:LinkButton>
        
        <act:ModalPopupExtender runat="server" ID="modal1" PopupControlID="Pnl3"
            TargetControlID="link1" BackgroundCssClass="modalBackground" RepositionMode="None"
            Y="80" BehaviorID="test">
        </act:ModalPopupExtender>
        
        <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
        <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
        <p id="testLocation">test...</p>
        <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
        <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
        <input type="button" id="link2" value="Click me too..." />
    </div>
    </form>
</body>
</html>

Once rendered there’s a link at the top and a button on the bottom of the page. Either one can be clicked and because we wired up the event handlers (with the $addHandler shortcut provided by ASP.NET Ajax) the function showModalPopupViaClient gets called. This once again grabs the BehaviorID, mind the sample in point number 2. Once done it grabs several coordinates with the Sys.UI.DomElement.getLocation function call. Then it uses the x position of the panel that acts as the modalpopup and the y position of the button.

However we notice something strange here. When we click the button on the bottom we expect that the overlay is set to the bottom as well due to the x/y positioning. But when we click the link in the left top corner we would expect that it would center as we didn’t add a handler for that click right? This isn’t the case. The modalpopup becomes visible near the top. How is this done? Well, notice in the markup of the modalpopupextender the attribute Y=”80”. This is what makes it all happen. It’s our default position to show the modalpopup.

Once the popup has appeared we can simply click the button Reposition. The function reposition will get called and the modalpopup will reposition itself to the y position of the paragraph with id=testLocation.

 

Grz, Kris.

Monday, 29 June 2009 22:39:40 (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [1]  | 
# Tuesday, 28 April 2009

Just read on twitter that Glimmer got out today.

Taken from the release announcement:

Glimmer: a jQuery Interactive Design Tool is a prototype from the Mix Online Labs which makes jQuery accessible through a visual tool. The objective for Glimmer is pretty simple: to enable the power of jQuery through an interactive design surface. If jQuery is the "write less, do more” JavaScript library, then Glimmer is the “write none, do more” jQuery design tool. Glimmer has three core audiences: power users, designers and developers.

Get Microsoft Silverlight

This is a video overview of the features.

The team behind it had extensibility in mind so it’s possible to create custom wizards yourself. There are samples available and another great thing: the source code’s going to be available on codeplex! According to the video it’s already there but when I did a quick search I didn’t get a result yet.

Update: perhaps the video was wrong as when I downloaded the bits I noticed that there was also a download link to the source on code.msdn.microsoft.com.

I just downloaded and installed it and gave it a test spin. It looks pretty good. I hope to give a more deep dive testing next weekend.

Grz, Kris.

Glimmer | jQuery | MIX | Tools
Tuesday, 28 April 2009 20:15:34 (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [0]  | 
# Tuesday, 27 January 2009

Just read the news on Scott Guthrie's blog that ASP.NET MVC RC got released today. That’s good news as this means that the final version will probably ship soon as well. Being a fan of jQuery since a couple of months, and already using it in production code, it’s great to see that it MVC ships with this great javascript library as well. Today still with version 1.2.6 but the 1.0 final release of MVC will have 1.3.1 included which is way more performing when you take a look at the graphs.

Grz, Kris.

Tuesday, 27 January 2009 23:45:44 (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [0]  | 
# Tuesday, 28 October 2008

I just noticed that on the site of jQuery there’s now also a download available for having a much better intellisense experience. It’s actually a big js file with xml comment that Visual Studio can interpret but it can be used to power up the development experience. Also when you do reference this only do so while developing and don’t put this into production since it’s waaaay bigger than the minified version (or the packed one). So make sure that you set that into production instead.

Update: I just found out about these extra handy tips for adding the documented jQuery file to your pages.

Grz, Kris.

Tuesday, 28 October 2008 08:29:43 (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [0]  |