Being a pimp without silverlight
Upcoming SlideShare
Loading in...5
×
 

Being a pimp without silverlight

on

  • 495 views

 

Statistics

Views

Total Views
495
Views on SlideShare
494
Embed Views
1

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 1

http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • MVC is a design pattern that stands for Model-View-Controller. What is strives to do is separate the concerns of an application’s presentation layer by assigning specific roles to the three different components.The Controller is responsible for handling all user input. Once input has been received, the Controller will perform any operations/actions it needs to, which might include interacting with the Model.The Model represents the core concern/logic of the application. Once the Controller retrieves some model data and performs any work with the model/etc it needs to it constructs a presentation model that describes the model in terms the View can understand.The View is the visual representation of the model. It presents the model data to the actual user in a way that is meaningful. In a web application, this would typically be HTML.With these three pieces in place, your presentation layer becomes cleanly separated in such a way that each component can be developed/tested independently.
  • -Model has onepurpose-Controller has onepurpose-View really handles the view, no business logic in there!-Each part is replacable-Source code availableonCodePlex. Not open source, butenablesyou to buildyourown, private flavour
  • -Usersexpect clean URLsnowadays-Notreplacing ASP.NET  built on top of it
  • -Usersexpect clean URLsnowadays-Notreplacing ASP.NET  built on top of it

Being a pimp without silverlight Being a pimp without silverlight Presentation Transcript

  • Bling-bling with MVC and jQuery
    Being a pimp without Silverlight
    Maarten Balliauw @maartenballiauw
    Kris van der Mast @KvdM
  • Who are we? – Maarten
    Maarten Balliauw
    Antwerp, Belgium
    www.realdolmen.com
    Focus on web
    ASP.NET, ASP.NET MVC, PHP, Azure, VSTS, …
    MVP ASP.NET
    http://blog.maartenballiauw.be
    http://twitter.com/maartenballiauw
  • Who are we? – Kris
    Kris van der Mast
    Antwerp, Belgium
    www.ordina.be
    Focus on web technologies
    ASP.NET, ASP.NET MVC, WCF, Silverlight, ...
    MVP for ASP.NET
    ASP Insider
    http://blog.krisvandermast.com
    http://www.twitter.com/KvdM
  • Agenda
    ASP.NET WebForms
    ASP.NET MVC
    jQuery
    Resources
    Q&A
  • ASP.NET MVC
    Mega Very Cool?
  • The ASP.NET family
    ASP.NET
    Dynamic Data
    & AJAX
    Presentation
    ASP.NET
    WebForms
    ASP.NET
    MVC
    ASP.NET
    Core
    Core
    Runtime
  • ASP.NET WebForms
  • ASP.NET WebForms
    Taken programming model from WinForms
    Fake stateful model
    Automatic testing is hard
  • ASP.NET MVC
    Testability
    Control over HTML
    Extensibility
    It makes you think
    Learn new concepts
    “if you are allergic to porc,don’t go work in a sausage factory”
  • Model-View-Controller in ASP.NET MVC
    Model
    (“DTO” between C and V)
    Controller
    (Input)
    Request
    Response
    Application Logic
    View
    (Presentation)
  • Characteristics
    Maintain Clean Separation of Concerns
    Easy Testing
    Red/Green TDD
    Highly maintainable applications by default
    Extensible and Pluggable
    Support replacing any component of system
  • Characteristics
    Enable clean URLs and SEO
    SEO friendly URL structures
    Great ASP.NET integration
    All providers are supported
    Membership, Caching, Session, …
    ASP.NET designer in VS2008/VS2010
  • New in ASP.NET MVC2...
    Validation
    Strongly Typed HTML Helpers
    Templated HTML Helpers
    Areas
    Async Controllers
  • DEMO
    ASP.NET MVC
  • jQuery
    What is jQuery?
    JavaScript Abstraction
    “LINQ to DOM”
    Why use jQuery?
    Making JavaScript and the DOM suck less
    Easy to Use
    Rich Plug-in Ecosystem
    Cross Browser Support
  • Money, money, money!
    $
  • The Basics
    jQuery() and $()
    The ready() Function
    Effective when DOM is ready
    jQuery(document).ready(main);
    $(document).ready(main);
    $(document).ready(function() { … } );
    $(function() { … } );
    function main() {

    }
  • jQuery Basics
    jQuery Wrappers
    jQuery Selectors
    $(selector)
    jQuery(selector)
  • Selectors
    Basic Selectors
    #id
    .class
    element
    selector1,selector2,selectorN,…
    *
    $(this)
  • Selectors
    Other Selector Categories
    Form
    Attribute
    Hierarchy
    Filter
    Content
    Child
  • It gives you power!
    functionvalidateForm() {
    var f = document.forms[0];
    var atLeastOneChecked = false;
    for (var i = 0; i < document.forms[0].length; i++) {
    var e = document.forms[0][i];
    if (e.type == "checkbox" &&
    e.className == "group1" &&
    e.checked) {
    atLeastOneChecked = true;
    }
    }
    if (!atLeastOneChecked) {
    alert("Please check at least one item!");
    }
    return atLeastOneChecked;
    }
    functionvalidateForm() {
    if ($(".group1:checked").length == 0) {
    alert("Please check at least one item!");
    return false;
    }
    return true;
    }
  • Unobtrusive JavaScript
    Start with “plain old HTML”
    Layer on some CSS styling providing visual style
    Layer on some JavaScript providing enhanced behaviour
  • Events
    Unobtrusive JavaScript
    Cross Browser Support
    $(<selector>).eventname(<functionpointer> or inline);
  • Event Binding
    Binds events to matched sets
    $(selector).bind(“eventName",function);
  • Chaining
    Powerful
    Fluent
    $(selector).method
    $(selector).method({…}).method2({…});
  • Manipulating HTML
    html()
    Gets/sets the innerHTML
    text()
    Gets/sets the innerText
    Method, not property syntax
    Other Methods
    append() prepend()
    appendTo() prependTo()
    remove
  • Plug-ins
    Rich Plug-in Ecosystem
    Thousands available
    Downloadable .js files
    You can create your own
    http://jQuery.com/plugins
  • Ajax
    Web Services
    WCF
    XMLHttpRequest
    $.ajax()
  • Ajax
    $.ajax({
    type: "POST",
    url: webMethod,
    data: parameters,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg) {
    $(selector).html(msg.d);
    },
    error: function(e){
    $(selector).html(“error message");
    }
    });
  • DEMO
    Want to see it being used?
  • Resources
    Learn more!
  • Resources
    http://www.jquery.com
    http://www.asp.net/mvc
    http://jqueryui.com/demos/
    http://www.bing.com
    http://www.trirand.net/demoaspnetmvc.aspx
  • Questions?
    More information?
    http://asp.net/mvc
    http://jquery.com
    Contact us!
    http://blog.maartenballiauw.be
    http://blog.krisvandermast.com
    Thank you!