All posts tagged: ajax

Hangman on Silverlight

comments 3
Uncategorized

หลังจากติดค้างพี่ป๊อกมานาน ก็ได้เวลาใช้หนี้ซักที

เรามาดูกันดีกว่าว่าไอ้เจ้า Hangman นี่มันเขียนยากมั้ย

Flickr ASP.NET MVC app pt.2 – ajaxified

Leave a comment
Uncategorized

After we have finished the Flickr MVC app last time. This time will be sequel, ajaxified it. Although the ASP.NET MVC do provide the abstract ajax helper class, only implementation exists publicly is Nikhil's. Certainly, ASP.NET Team will include the ASP.NET AJAX/Microsoft AJAX Library helper in the MVC framework for next CTP bits. As for this tutorial, I will continue with jquery instead of Microsoft AJAX Library because I'm more familiar with it. The ajaxified instructions is mainly related to the view. In order to use jquery, put the library in ~/Content and add the reference to it in the layout.

<head runat="server">
    <title>My Sample MVC Application</title>
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../../Content/jquery.js"></script>
</head>

Next, Open the ~/Views/Home/Index.aspx. Then, add a placeholder div called "result" in the view. We'll use this div to display the response from the ajax call. Additionally, add a eye-candy loading indicator to let user knows that the page is being loaded.
<%Html.Form("Search", "Home", FormExtensions.FormMethod.post, new { ID = "theform" });%>
    <label for="tags">
        Tags:
    </label>
    <%=Html.TextBox("tags", 30) %>
    <%=Html.SubmitButton("find", "Find", "") %>
    <img src="../../Content/loading.gif" id="spinner" style="display:none;" />
    </form>
<div id="result"></div>
Last but not least, add some lines of script to make an ajax call once the form is goin to be submitted.
 $(document).ready(function() {        
        $('#theform').submit(function (){            
            $.post('/Home/Search', {'tags':$('#tags')[0].value}, completeRequest);
            $('#spinner').show();                        
            $('#result').slideUp(1500);
            return false;            
        });
    });
    
    function completeRequest(r){            
        $('#result').html(r).slideDown(1500);                            
        $('#spinner').hide();        
    }
The script will be invoked when the DOM is ready. It'll hook the form submit event, post the textbox value to ~/Home/Search, make the loading indicator visible, hide the result div and then, cancel the event to prevent the full post process. And then, after the request is completed, completeRequest function will be called. It will replace the div's content with the result from the response and then reveal the div by using slide down effect. And lastly, hide the indicator. Try the page and Voila! The ajaxified is completed. Compare to the traditional web form, MVC has a better degree to integrate with the javascript library. Though I use the web form view engine, extension method on the HTML Helper that makes the markup more flexible, no generated id. However, integration with the jquery may not be the easiest one for ASP.NET MVC as ASP.NET Team will deliver its own Ajax helper. In conclusion, AJAX in ASP.NET MVC has a lot of room for improvement, either officially or unofficially. ASP.NET AJAX becomes useless when using it with ASP.NET MVC. However, using the alternative libraries in MVC require less effort than the traditional way. jQquery and ExtJs are the most notable. Besides, mootools and YUI are also gaining their share. Anyway, Microsoft will push ASP.NET AJAX little ahead those 3rd party library through their Ajax Helper once again.

ASP.NET MVC Ajax

Leave a comment
Uncategorized

After the long weekend, Scott announced the ASP.NET 3.5 Extension which includes the preview version of long-waited MVC Framework, ASP.NET MVC. Today, there are many websites and blogs regarding ASP.NET MVC. However, just a few of them are talking about AJAX. In Web form model of ASP.NET, ASP.NET AJAX, along with AJAX Control Toolkit, is the major player for AJAX library. Since ASP.NET AJAX relies on Web form, migrating it to use with ASP.NET MVC which is just a beta bit is not really worth. But in the end, Microsoft will push its AJAX product towards ASP.NET MVC as soon as the latter is ready for production. This can be seen in Nikhil's post about AJAX in ASP.NET MVC. Though Nikhil uses his Script# to create the javascript library, the concept utilizes the behavior/component things which is the concept of ASP.NET AJAX/AJAX Control toolkit. No doubt that ASP.NET AJAX will be the one that shipped with ASP.NET MVC. As for alternative, jQuery seems to be the winner at the time of writing. Moreover, The latest survey reveals that the most favorite alternative javascript library among ASP.NET developer is jQuery and I don't think ASP.NET MVC will differs from its counterpart. jQuery, in fact , is the fourth but the first two places are in paired, the second actually is not the javascript library so I count jQuery as the most favorite one. However, mootools, prototype/script.aculo.us will gaining their share in MVC as many people will go to ASP.NET for its MVC.