Contents tagged with Ajax

  • AuctionSite Starter-kit Update

     

    I've done an update to the starterkit today, and figured it might be a good idea to get some screenshots in front of people, as well as a demo site up - so I've done both. :)

    The demo site is available at

    http://ask.proessent.com/default.aspx

    Feel free to register a username and look around.  If you don't want to register a username you may use

    Username: Testing

    Password: testing!

     

    AuctionDetails AuctionListings

    BidHistory Login

    NewItem

     

    note: the website may be going up and down as I make changes and perform updates.  Please be patient. :)

    Read more...

  • AuctionSite Starterkit Alpha Release

    Just a quick plug to the community.  I've gotten to the Alpha release of my AuctionSite Starterkit and have published a release on Codeplex

    http://www.codeplex.com/auctionsk

    It's designed and produced in .net 3.5 utilizing some cool features like LINQ, the new Listview, the .NET membership, full CSS design and some other goodies like some Ajax sections.  It's freely available for download, take it - use it - abuse it.  Its designed to give users a good start in the LINQ world, with a real world application on a smaller scale.  It's database is extensible, and pages have been intentionally kept simple and straight forward, so they can be modified, tailored.

    I'll be continuing to update it it through a stable release, then refactoring some of the "goofier" sections.

    Have Fun!

    Read more...

  • HDC07 - A big success!

    What a great time to be had a development conferences.  Putting that many smart people in one room should be illegal honestly.  Two solid days of .NET energy (and one adobe flex talk, ...<blink>) - Culminated with a 4 hour presentation by Scott Guthrie on the new Visual Studios 2008 / .NET 3.0 and 3.5 features. 

    Read more...

  • Ajax Service Methods: Returning Strong types or lists.

    In all the examples we've seen so far, we've returned simple strings, integers, or a standard type / value.  That's all fine and good, until we have something a little more complex to return, or need to return a list or array of something, or a list of type.  In the following example I'll demonstrate through code how to accomplish just that.

    So lets get started at our webservice first.  I'll create a webservice in my project named WebService1.asmx.  Inside it will be a class called WebService1.  The first thing we need to do is add the class attribute that lets us call this through our JavaScript proxy.

    <System.Web.Script.Services.ScriptService()> _

    I'm going to go ahead and fire up my service to check it and test the hello world example, once I'm done with that, we can move on!

    <?xml version="1.0" encoding="utf-8" ?> <string xmlns="http://tempuri.org/">Hello World</string>
     

    Ok, I hope everyone checked their service, now...to create the complex type that we'll be returning, we need are going to add a new class file to our project, and call it widget.

    I'm going to keep the example simple, so I've just wired up two properties, with their private members, and a default constructor with one overload so that I can new it in one line.

    Public Class widget
     
     Private _Name As String
     Public Property Name() As String
     Get
     Return _Name
     End Get
     Set(ByVal value As String)
     _Name = value
     End Set
     End Property
     
     Private _Price As Decimal
     Public Property Price() As Decimal
     Get
     Return _Price
     End Get
     Set(ByVal value As Decimal)
     _Price = value
     End Set
     End Property
     Public Sub New()
     
     End Sub
     Public Sub New(ByVal Name As String, ByVal Price As Decimal)
     _Price = Price
     _Name = Name
     End Sub
    End Class

    Ok, so back to our webservice to do something with our widget!  I'm going to mock up 5 widgets for this example, normally you'd connect to your datasource or collection object to get real life data.

    <WebMethod()> _
    Public Function GetWidgets() As List(Of widget)
     Dim tempWidgets As New List(Of widget)
     For I As Integer = 1 To 5
     Dim tempWidget As New widget("Name:" & I, CDec(I))
     tempWidgets.Add(tempWidget)
     Next
     Return tempWidgets
    End Function

    I can verify this is working by running the service again and getting this result:

    <?xml version="1.0" encoding="utf-8" ?> 
    - <ArrayOfWidget xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://tempuri.org/">
    - <widget>
     <Name>Name:1</Name> 
     <Price>1</Price> 
     </widget>
    - <widget>
     <Name>Name:2</Name> 
     <Price>2</Price> 
     </widget>
    - <widget>
     <Name>Name:3</Name> 
     <Price>3</Price> 
     </widget>
    - <widget>
     <Name>Name:4</Name> 
     <Price>4</Price> 
     </widget>
    - <widget>
     <Name>Name:5</Name> 
     <Price>5</Price> 
     </widget>
     </ArrayOfWidget>

    Ok, now for the fun part, lets work with this data coming back - lets get into the page we'd like to call the webservice, and wire it up.  The first thing we'll need is a container to hold this data.  I'm just loading up a div in this case, dont forget to set the ID so you can find it. 

    <div id="returnData">
     
    </div>

    In this case, I'm going to have a button fire the event that calls the webservice, so we'll add that too:

    <asp:Button ID="button1" runat="server" OnClientClick="doWork" Text="Do Work" />

    The last thing we need before we write our JavaScript is our service reference inside our script manager on the page.

    <asp:ScriptManager ID="scriptmanager1" runat="server">
     <Services>
     <asp:ServiceReference Path="~/WebService1.asmx" />
     </Services>
    </asp:ScriptManager>

    Ok, on to our Javascript!

    I'm going to post the complete example in here - and let you guys parse through it.  Please feel free to post comments or questions:

    <script type="text/javascript" language="javascript">
     function pageLoad(){
     ret = WebService1.GetWidgets(onComplete, onError, onTimeout);
     }
     function onComplete(result){
     var retData = new Array(5);
     retData = result;
     var strDiv = ""
     var x = 0;
     for (x=0; x<5; x++)
     {
     strDiv = strDiv + retData[x].Name + " " + retData[x].Price + "<br />";
     }
     document.getElementById("returnData").innerHTML = strDiv;
     }
     function onError(){}
     function onTimeout(){}
    </script>

    As always, Happy Coding and good luck!

    Bryan Sampica

    Read more...

  • Creating an Efficient UI in ASP.NET. Part 2

    In the first installment of this series, we discussed the reasons for creating a clean and efficient UI, and some of the methods behind it.  If you haven't read the first part I suggest you do so here.  In this article we are going to go over some of the basics in getting setup to provide a streamlined user interface in a business sector.  Examples of use would be an intranet application, a Contact management solution, or some similar file / information store.  We'll discuss the pro's and con's of a few model types and ultimately choose a method and start our design.  The goal at the end of this article is to provide an interface "shell" that can be reused across different application types.  This shell should be similar to a template, but more extensible. 

    Read more...

  • CRINETA - Thanks again!

    I just wanted to take a moment to thank the Cedar Rapids branch of the INETA user group for the warm welcome.  I enjoyed speaking to the group tonight, and I hope some useful information was had by all.

    I'm in the process as we speak of converting the video I took to a web format, and I'll make it available as soon as I can get it converted to something web friendly.

    I look forward to further meetings. 

    To those that had extended questions - I'll get emails out to you, as soon as I can work up some good examples. 

    To clarify a few points:

    At one point during the presentation I mentioned that PHP was not a high performance platform.  I should stand corrected (with a little help).  What I should have said was - any I could write under PHP wouldn't be high performance by any means. 

    One of the most significant questions of the evening was:

    'What do you see are the downsides to using Ajax' (non verbatim). 

    Anyone that has comments about that topic - feel free to post.

    Thanks again,

    Bryan Sampica

    Microsoft MVP

    EDIT:  The video is available here -

    Crineta Video

    Read more...

  • Ajax Script Services. A mortgage calculation and amortization example

    Recently, I was given the opportunity to speak at an up-coming INETA meeting (Cedar Rapids, IA branch.  http://www.crineta.org).  I have been doing a lot of Ajax Script service things lately, and really wanted to get the lead out and try my hand at an entire example. 

    It was important that for my speech planning I created a real life business requirement type application.  Pseudo and example code is great for learning, but as a topic of presentation I personally always adhere to the "what and why" methodology.  I like to give my listeners a real example of something they may be tasked with in their environment and make it work.

    The product of that is the proceeding project.  I'm not going to go through the code here, rather I'll make it available for download -

     

    Technologies used:

    AJAX Script services (100%)  - there isn't an update panel ANYWHERE in sight.

    Webservice methods doing real-time mortgage and amortization calculations.

    Postback free - single page model

     

    Here's a screenshot of the running application

    Running App

     

    IMPORTANT - to protect from distribution except from this blog the slide deck is password protected.  the password is "asp.net" without the quotes.  Don't forget the period asp (dot) net

    Download Slidedeck

    Download Source

    Happy Coding!

    Bryan Sampica

    Read more...

  • Ajax Control Toolkit's Dragpanelextender

    I typically track stats to my blog using a free site called StatCounter ( http://www.statcounter.com ) which is a remarkable tool if you can run just a little JavaScript in a master page on your site.  I've noticed over the past several weeks that consistently a keyword in my searches keeps coming up on top!  See below:

    stats

    Now this is great and all - but I haven't done a blog on the <Ajax:Dragpanelextender> yet...where are you people coming from and why?  Ok ok, I jest.  I'm a man of the people so I'll give you what you want.

    There's actually 2 ways a good drag panel is implemented.  Numero Uno is as a standalone drag-able panel, the second is setting the modalpopupextender to be drag-able.  In this case, we are going to focus on the first example.  Now, mind you there should be a good reason for letting users wily dilly drag content around on your site. Because you can isn't really good enough.  It will confuse the users to no end if you decide that something is drag enabled, with no behavior associated with it.  Ok, enough of the disclaimers, on to the code:

    The incorporation I've used previously was for a "View in a Room" page that allowed users to see a piece of art in a designated room - allowing them to drag it around and position it the way they'd like.  We can go ahead and build a simplified version of the one seen here:

    Liquidhue | Room View

    I'm going to open up a new project and drop 2 images in - one is the room, the other is the image we are going to allow the user to drag around.  Feel free to use mine if you don't have 2 good images of your own. 

    hands

     

      (right click: Save picture as)

     

    room2 

     

     

      (right click: Save picture as)

     

     

     

    It should save the high res version of both of these for you - but then again:  I've never tried to get windows live writer to accomplish that, so after I publish this I'll make sure it does, or attach images to this article at the bottom.

    So create a blank Ajax enabled asp.net website and drop these two files into the images folder.

    vs

    (click above for a full sized version)

    I'm going to go ahead and set my page up to display the larger room sized image first:

    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <div style="background-image:url(images/room2.jpg); width:800px; height:600px">
            </div>
        </form>
    </body>

    Really nothing hard so far.  We are just creating an 800 x 600 div, and setting our room as the background image to that Div.  Now it's time to add the panel that will act as our container for our drag enable image.

    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <div style="background-image:url(images/room2.jpg); width:800px; height:600px">
                <asp:Panel ID="pnlDragable" runat="server">
                    <asp:Image ID="imgPlace" runat="server" ImageUrl="~/images/hands.jpg" Width="175px" />
                </asp:Panel>
            </div>
        </form>
    </body>

    Now in my LiquidHue example, some serious calculates are being done, based on the size I know that room to be (I took the photograph) and I'm sizing the picture being loaded accordingly using a longest side algorithm, based on how big the artist that uploaded the image said the final piece was...in this case we are just going to hard code it's with to 175px which looks like a real good size to fit that room.  It's time now to make that panel dragable using the ajax drag panel extender!

    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <div style="background-image: url(images/room2.jpg); width: 800px; height: 600px">
                <asp:Panel ID="pnlDragable" runat="server" BorderColor="gray" BorderWidth="1px" BackColor="white">
                    <asp:Image ID="imgPlace" runat="server" ImageUrl="~/images/hands.jpg" Width="175px"
                        BorderColor="white" BorderWidth="5px" />
                </asp:Panel>
            </div>
            <Ajax:DragPanelExtender ID="DragPanelExtender1" runat="server" DragHandleID="imgPlace"
                TargetControlID="pnlDragable" />
        </form>
    </body>

    And now ladies and gentleman - for my next trick, I'll be teaching you a small Dropshadowextender hack that I've developed, that will give a more realistic looking drop shadow using the ajax extender.  It involves "stacking" the extender a few times on the same object, with different depths and opacity's.

    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <div style="background-image: url(images/room2.jpg); width: 800px; height: 600px">
                <asp:Panel ID="pnlDragable" runat="server" Width="175">
                    <asp:Image ID="imgPlace" runat="server" ImageUrl="~/images/hands.jpg" Width="175px"
                        BorderColor="white" BorderWidth="5px" />
                    <Ajax:DropShadowExtender ID="ds1" runat="server" TargetControlID="imgPlace" Width="2"
                        TrackPosition="true" Opacity="1" />
                    <Ajax:DropShadowExtender ID="DropShadowExtender1" runat="server" TargetControlID="imgPlace"
                        Width="3" TrackPosition="true" Opacity=".8" />
                    <Ajax:DropShadowExtender ID="DropShadowExtender2" runat="server" TargetControlID="imgPlace"
                        Width="4" TrackPosition="true" Opacity=".4" />
                    <Ajax:DropShadowExtender ID="DropShadowExtender3" runat="server" TargetControlID="imgPlace"
                        Width="5" TrackPosition="true" Opacity=".1" />
                </asp:Panel>
            </div>
            <Ajax:DragPanelExtender ID="DragPanelExtender1" runat="server" DragHandleID="imgPlace"
                TargetControlID="pnlDragable" />
        </form>
    </body>

    Now it should be noted, that there is a performance decrease with every drop shadow extender you put in there, especially with the track position.  Lastly, lets notify the user as they move their little mouse around, that they can drag the window (when they happen to put their cursor over it)

    Completed Example:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Untitled Page</title>
        <script type="text/javascript" language="Javascript">
       1:  
       2:         function showDiv(){
       3:         var div = document.getElementById("dragText");
       4:         div.style.display = "block";
       5:         }
       6:         function hideDiv(){
       7:         var div = document.getElementById("dragText");
       8:         div.style.display = "none";
       9:         }
      10:     
    </script> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <div style="background-image: url(images/room2.jpg); width: 800px; height: 600px"> <asp:Panel ID="pnlDragable" runat="server" Width="175"> <asp:Image ID="imgPlace" runat="server" ImageUrl="~/images/hands.jpg" Width="175px" BorderColor="white" BorderWidth="5px" onMouseOver="showDiv()" onMouseOut="hideDiv()" /> <Ajax:DropShadowExtender ID="ds1" runat="server" TargetControlID="imgPlace" Width="2" TrackPosition="true" Opacity="1" /> <Ajax:DropShadowExtender ID="DropShadowExtender1" runat="server" TargetControlID="imgPlace" Width="3" TrackPosition="true" Opacity=".8" /> <Ajax:DropShadowExtender ID="DropShadowExtender2" runat="server" TargetControlID="imgPlace" Width="4" TrackPosition="true" Opacity=".4" /> <Ajax:DropShadowExtender ID="DropShadowExtender3" runat="server" TargetControlID="imgPlace" Width="5" TrackPosition="true" Opacity=".1" /> <div id="dragText" style="display:none; position:relative; top:-150px; left:0px; border:1px solid black; width:100px; height:20px; background-color:Gray; color:white"> Dragable </div> </asp:Panel> </div> <Ajax:DragPanelExtender ID="DragPanelExtender1" runat="server" DragHandleID="imgPlace" TargetControlID="pnlDragable" /> </form> </body> </html>

     

    Good luck and happy coding!

    Bryan Sampica (freakyuno)

    Read more...

  • Extending Service Methods: Part 3

    Returning single bits of data is nice, as seen in the previous examples.  Doing it async is even better - but what we really want to do is make this useful for business, and in business we use objects.  In this example I'll demonstrate how to use serialization methods, to return an object (serialized to an array) to our calling JavaScript proxy - and then bind that to area's of our page.  The goal of course being to do something useful in a business application, giving the user a nice Ajaxian style experience, and gathering / displaying the information we need at the appropriate time.

    Problem:

    We are going to mock up an application what will check and validate a credit card number.  Calling a fake credit card validation webservice.  Typically these can take some time, and depending on your processing company, they may or may not return useful information that you can provide to your user.  Most Credit Card processing gateways are webservice's themselves, or some type of Over the Wire API you're going to call.  So we actually end up with 2 layers. 

    1st Layer  = Our proxy method calling our same domain webservice.

    2nd Layer = Our in domain webservice calling the Credit Card Gateways API or Webservice.

    The importance of an understandable UI and proper information presentation in these steps can make or break your site.  People are very very very nervous about their credit cards, and rightfully so.  They are VERY likely to click away from your site if there seems to be a tricky step, or something that doesn't work, or hangs the user up at a time they wouldn't expect.

    Ok, so lets begin.  Lets setup our Page UI first, this will give us the ability to gather the information we need to process a credit card.

    <table style="width: 500px">
        <tr>
            <td>
                <asp:Label ID="Label1" runat="server" Text="Name On Card :"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="TextBox1" runat="server" Width="245px"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label ID="Label2" runat="server" Text="Card Number :"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="TextBox2" runat="server" Width="245px"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label ID="Label3" runat="server" Text="Card Exp :"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label ID="Label4" runat="server" Text="Billing Zipcode :"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td colspan="2" style="text-align:right">
                <asp:Button ID="Button1" runat="server"  Text="Process" />
            </td>
        </tr>
    </table>

    No Magic yet right?  I know what you're thinking...but I like tables!  I really do.  Ok, now with a pencil and paper I had already decided that I was going to provide meaningful errors to the user AS they typed.  So what we are going to do is wire up a web service, that is familiar with each of the different fields we are trying to send to it, so lets do that now.

    ''Declare our Webservice class callable by our JavaScript proxy
    <System.Web.Script.Services.ScriptService()> _
     
    <WebMethod()> _
    Public Function ProcessCard(ByVal name As String, ByVal cardnum As String, ByVal exp As String, ByVal zipcode As String) As String
        ''Perform checks to make sure the three things we can verify look as they should.
        ''These checks are not business secure and only for the purpose of the example
    
        'Declare our return string to give the user instant feedback
        Dim SB As New StringBuilder
    
        'Valdiate that CC number at least looks like a credit card number
        Dim pattern As String = "^3(?:[47]\d([ -]?)\d{4}(?:\1\d{4}){2}|0[0-5]\d{11}|[68]\d{12})$|^4(?:\d\d\d)?([ -]?)\d{4}(?:\2\d{4}){2}$|^6011([ -]?)\d{4}(?:\3\d{4}){2}$|^5[1-5]\d\d([ -]?)\d{4}(?:\4\d{4}){2}$|^2014\d{11}$|^2149\d{11}$|^2131\d{11}$|^1800\d{11}$|^3\d{15}$"
        Dim ccRegex As Regex = New Regex(pattern, RegexOptions.IgnoreCase)
        Dim ccMatch As Match = ccRegex.Match(cardnum)
        If Not ccMatch.Success Then
            SB.Append("Credit Card Number Invalid <br>")
        End If
    
        'Validate the expiration date
        Dim strongDate As Date = Nothing
        Date.TryParse(exp, strongDate)
        If strongDate = Nothing Then
            SB.Append("Expiration Date is Invalid<br>")
        End If
    
        'Validate the ZipCode
        If zipcode.Length < 5 Or zipcode.Length > 9 Then
            SB.Append("Zipcode is invalid")
        End If
    
        If SB.Length = 0 Then
            'Sleep the thread to simulate the call to the web service that would process the card.
            Threading.Thread.Sleep(5000)
            SB.Append("<br><br><span style=""color:green; font-weight:bold"">Approved</span>")
            SB.Append("<br><br><button onClick=""docontinue()"">Continue</button>")
        End If
    
        Return SB.ToString
    
    End Function
    

     

    Now in most cases you'd be parsing the return code you'd get from your credit card payment gateway, which usually returns as a hex value or parameterized argument but for this example we don't have a real gateway available to use so we had to mock one up a little bit.  Next we'll be displaying this data in our web form through the async call.  What we want to accomplish is a streamlined user interface, where the processing is actually happening in realtime.

    We need to make our Scriptmanager look like this:

    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
            <asp:ServiceReference Path="~/WebService1.asmx" />
        </Services>
    </asp:ScriptManager>

    Remember, what we are after in this section is the PATH to the webservice file, not the class name.  Next we need to setup a JavaScript callable method, that we are going to use in our form as we enter data.

    <script type="text/javascript" language="Javascript">
        function inlineValidation() {
            var strName = document.getElementById("TextBox1").value;
            var strCardNum = document.getElementById("TextBox2").value;
            var strExp = document.getElementById("TextBox3").value;
            var strZip = document.getElementById("TextBox4").value;
            document.getElementById("btn1").style.display = "none";
            document.getElementById("progress").style.width = "10000px";
            document.getElementById("progress").style.height = "10000px";   
            var ret = Sandbox.WebService1.ProcessCard(strName, strCardNum, strExp, strZip, onComplete, onAError, onTimeout);
            }
        function onComplete(result){
            document.getElementById("progress").style.width = "0px";
            document.getElementById("progress").style.height = "0px";
            document.getElementById("resultdiv").innerHTML = result;
        }
        function onTimeout(result){
            alert("Timeout");
        }
        function onAError(result){
            alert("Error");
        }
        function docontinue(){
            window.open("http://www.asp.net","ASP.NET");
        }
    </script>
    

     

    Now before you flame me - I know it's full of holes.  But the example should hold true.  Good luck and feel free to send me an email, or comment here on my blog if you have problems or issues.

    Good luck -

    Bryan Sampica ( Freakyuno )

    Read more...