Click here to Skip to main content
Click here to Skip to main content
Articles » Web Development » ASP.NET » General » Downloads
 
Add your own
alternative version

DaST Concept: A simpler, smarter, and much more powerful alternative to Forms and MVC.

, 12 May 2011 CPOL
Pure HTML templates and uniform codebehind is the future of web development. The article presents ASP.NET DaST Rendering Engine and its underlying DaST concept that brings web apps architecture to a new level getting rid of all problems and complexity related to standard ASP.NET Forms and MVC.
VideoLibraryDEMO_1.14.zip
VideoLibraryDEMO_1.14
App_Code
Controllers
App_Data
Data
Templates
Bin
AspNetDaST.dll
Global.asax
res
CSS
images
ajax-loader.gif
jQuery
Themes
le-frog
images
ui-bg_diagonals-small_0_aaaaaa_40x40.png
ui-bg_diagonals-thick_15_444444_40x40.png
ui-bg_diagonals-thick_95_ffdc2e_40x40.png
ui-bg_glass_55_fbf5d0_1x400.png
ui-bg_highlight-hard_30_285c00_1x100.png
ui-bg_highlight-soft_33_3a8104_1x100.png
ui-bg_highlight-soft_50_4eb305_1x100.png
ui-bg_highlight-soft_60_4ca20b_1x100.png
ui-bg_inset-soft_10_285c00_1x100.png
ui-icons_4eb305_256x240.png
ui-icons_72b42d_256x240.png
ui-icons_cd0a0a_256x240.png
ui-icons_ffffff_256x240.png
start
images
ui-bg_flat_55_999999_40x100.png
ui-bg_flat_75_aaaaaa_40x100.png
ui-bg_glass_45_0078ae_1x400.png
ui-bg_glass_55_f8da4e_1x400.png
ui-bg_glass_75_79c9ec_1x400.png
ui-bg_gloss-wave_45_e14f1c_500x100.png
ui-bg_gloss-wave_50_6eac2c_500x100.png
ui-bg_gloss-wave_75_2191c0_500x100.png
ui-bg_inset-hard_100_fcfdfd_1x100.png
ui-icons_0078ae_256x240.png
ui-icons_056b93_256x240.png
ui-icons_d8e7f3_256x240.png
ui-icons_e0fdff_256x240.png
ui-icons_f5e175_256x240.png
ui-icons_f7a50d_256x240.png
ui-icons_fcd113_256x240.png
sunny
images
ui-bg_diagonals-medium_20_d34d17_40x40.png
ui-bg_flat_30_cccccc_40x100.png
ui-bg_flat_50_5c5c5c_40x100.png
ui-bg_gloss-wave_45_817865_500x100.png
ui-bg_gloss-wave_60_fece2f_500x100.png
ui-bg_gloss-wave_70_ffdd57_500x100.png
ui-bg_gloss-wave_90_fff9e5_500x100.png
ui-bg_highlight-soft_100_feeebd_1x100.png
ui-bg_inset-soft_30_ffffff_1x100.png
ui-icons_3d3d3d_256x240.png
ui-icons_bd7b00_256x240.png
ui-icons_d19405_256x240.png
ui-icons_eb990f_256x240.png
ui-icons_ed9f26_256x240.png
ui-icons_fadc7a_256x240.png
ui-icons_ffe180_256x240.png
swanky-purse
images
ui-bg_diamond_10_4f4221_10x8.png
ui-bg_diamond_20_372806_10x8.png
ui-bg_diamond_25_675423_10x8.png
ui-bg_diamond_25_d5ac5d_10x8.png
ui-bg_diamond_8_261803_10x8.png
ui-bg_diamond_8_443113_10x8.png
ui-bg_flat_75_ddd4b0_40x100.png
ui-bg_highlight-hard_65_fee4bd_1x100.png
ui-icons_070603_256x240.png
ui-icons_e8e2b5_256x240.png
ui-icons_e9cd86_256x240.png
ui-icons_efec9f_256x240.png
ui-icons_f2ec64_256x240.png
ui-icons_f9f2bd_256x240.png
ui-icons_ff7519_256x240.png
ui-darkness
images
ui-bg_flat_30_cccccc_40x100.png
ui-bg_flat_50_5c5c5c_40x100.png
ui-bg_glass_20_555555_1x400.png
ui-bg_glass_40_0078a3_1x400.png
ui-bg_glass_40_ffc73d_1x400.png
ui-bg_gloss-wave_25_333333_500x100.png
ui-bg_highlight-soft_80_eeeeee_1x100.png
ui-bg_inset-soft_25_000000_1x100.png
ui-bg_inset-soft_30_f58400_1x100.png
ui-icons_222222_256x240.png
ui-icons_4b8e0b_256x240.png
ui-icons_a83300_256x240.png
ui-icons_cccccc_256x240.png
ui-icons_ffffff_256x240.png
ui-lightness
images
ui-bg_diagonals-thick_18_b81900_40x40.png
ui-bg_diagonals-thick_20_666666_40x40.png
ui-bg_flat_10_000000_40x100.png
ui-bg_glass_100_f6f6f6_1x400.png
ui-bg_glass_100_fdf5ce_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_gloss-wave_35_f6a828_500x100.png
ui-bg_highlight-soft_100_eeeeee_1x100.png
ui-bg_highlight-soft_75_ffe45c_1x100.png
ui-icons_222222_256x240.png
ui-icons_228ef1_256x240.png
ui-icons_ef8c08_256x240.png
ui-icons_ffd27a_256x240.png
ui-icons_ffffff_256x240.png
<!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>
  <title>DaST - Video Library | {PageTitleDate}</title>
  <link href="res/CSS/common.css" type="text/css" rel="stylesheet" /> 
  <link id="csslink_jqui" href="res/jQuery/Themes/ui-lightness/jquery-ui.custom.css" type="text/css" rel="stylesheet" /> 
  <script type="text/javascript" src="res/jQuery/jquery-1.4.4.min.js"></script>
  <script type="text/javascript" src="res/jQuery/jquery-ui-1.8.9.custom.min.js"></script>
</head>
<body>
  <div class="ui-widget ui-widget-content ui-corner-all" style="padding:0 20px;">
    <table cellpadding="0" cellspacing="0" border="0" width="100%">
      <tr>
        <td style="width:300px;">
          <div class="ui-state-highlight ui-corner-all" style="padding:10px;margin:10px 0;">
            <h1 style="margin:0;">Video Library v1.4</h1>
            <i>DaST Technology Demonstrator</i>
          </div>
        </td>
        <td style="min-width:800px;">
          <ul>
            <li>Prototype of a video portal with complex and dynamic Web 2.0 UI.</li>
            <li>Populate playlist. Remove from playlist. Open details dialog. Add user reviews and ratings. Change jQuery UI theme.</li>
            <li>NOTE that all changes made (including new comments) are discarded when session ends. </li>
          </ul>
        </td>
      </tr>
    </table>
  </div>
  <hr />
  <div id="canvas">
    <table cellpadding="0" cellspacing="10px" border="0" width="100%">
      <tr>
        <td style="width:300px;" valign="top">
          
          <div class="settingsPanel ui-widget ui-widget-content ui-corner-all">
            <div class="ui-widget-header ui-corner-all">
              Application Settings
            </div>
            <table cellpadding="0" cellspacing="5px" border="0" width="100%">
              <tr>
                <td style="text-align:right;">Selection page size</td>
                <td>
                  <div scope="PageSizeRepeater">
                    <select onchange="AspNetDaST.Action('{ScopeClientID}', 'PageSizeChanged', this.options[this.selectedIndex].value)" autocomplete="off" style="width:120px;">
                      <!--scope-from-->
                      <option value="{OptionValue}" attr_selected>{OptionValue} item(s)</option>
                      <!--scope-stop-->
                    </select>
                  </div>
                </td>
              </tr>
              <tr>
                <td style="text-align:right">jQuery theme</td>
                <td>
                  <div scope="SiteThemeRepeater">
                    <select onchange="ChangeSiteTheme(this.options[this.selectedIndex].value)" autocomplete="off" style="width:120px;">
                      <!--scope-from-->
                      <option value="{OptionValue}" attr_selected>{OptionValue}</option>
                      <!--scope-stop-->
                    </select>
                  </div>
                </td>
              </tr>
            </table>
          </div>
          
          <div class="playlistPanel ui-widget ui-widget-content ui-corner-all">      
           <table cellpadding="0" cellspacing="0" border="0" width="100%">
              <tr>
                <td>
                  <div scope="PlaylistHeader">
                    <!--showfrom:playlist-empty:yes-->
                    <div class="ui-widget-header ui-corner-all" style="display: block;margin-bottom:10px;">Playlist empty</div>
                    You have no items in your playlist so far. Populate playlist by clicking "+" button on the top right corner of the video packshot.
                    <!--showstop:playlist-empty:yes-->
                    <!--showfrom:playlist-empty:no-->
                    <div class="ui-widget-header ui-corner-all" style="display: block;">Playlist ({TotalItemCount})</div> 
                    <!--showstop:playlist-empty:no-->
                  </div>
                </td>
                <td style="max-width:160px;text-align:right;">
                  <div scope="PlaylistPager"></div>
                </td>
              </tr>    
            </table>
            <div scope="PlaylistRepeater">
              <div scope="VideoItem"></div>
            </div>
          </div>      
        </td>
        <td valign="top"> 
          <div class="videoItemsGrid ui-widget ui-widget-content ui-corner-all">
            <table cellpadding="0" cellspacing="0" border="0" width="100%">
              <tr>
                <td>
                  <div class="ui-widget-header ui-corner-all">
                    Video Library |
                    <div scope="VideoItemGridInfo" style="display: inline;">
                      Displaying videos {FromItemNum}-{ToItemNum} of {TotalItemCount}
                    </div>
                  </div>
                </td>
                <td style="width:180px;text-align:right;">
                  <div scope="VideoItemPager"></div>
                </td>
              </tr>
            </table>         
            <div scope="VideoItemRepeater">
              <div scope="VideoItem"></div>
            </div>
          </div>        
        </td>
      </tr>
    </table>
    
    <div scope="DetailsPopup"></div>

  </div>
  
  <div class="globalProgress" style="background-color:Gray;border:solid 2px black;position:fixed;top:0px;left:100%;margin-left:-305px;width:300px;height:20px;overflow:hidden;">
    <div class="screen0" style="color:black;background-color:lime;font-weight:bold;text-align:center;height:100%;display:block;">READY / IDLE</div>
    <div class="screen1" style="color:white;background-color:red;font-weight:bold;text-align:center;height:100%;display:block;">PROCESSING ASYNC POSTBACK ...</div>
  </div>

  <script language="javascript" type="text/javascript">
    ; (function($)
    {
      $(document).ready(function()
      {
        $(".actionButton.ui-state-default").live("mouseenter", function() { $(this).addClass('ui-state-hover'); });
        $(".actionButton.ui-state-hover").live("mouseleave", function() { $(this).removeClass('ui-state-hover'); });

        $(".videoItemContainer").live("mouseenter", function() { $(this).addClass('ui-state-hover'); });
        $(".videoItemContainer").live("mouseleave", function() { $(this).removeClass('ui-state-hover'); });

        var instance = Sys.WebForms.PageRequestManager.getInstance();
        instance.add_initializeRequest(instance_initializeRequest);
        instance.add_endRequest(instance_EndRequest);

        function instance_initializeRequest(sender, args)
        {
          if (instance.get_isInAsyncPostBack()) args.set_cancel(true);
          else
          {
            $(".globalProgress .screen0").css("display", "none");
            $(".globalProgress .screen1").css("display", "block");
          }
        }

        function instance_EndRequest(sender, args)
        {
          $(".globalProgress .screen0").css("display", "block");
          $(".globalProgress .screen1").css("display", "none");
        }
      });

    })(jQuery);

    function ChangeSiteTheme(themeName)
    {
      var themePath = "res/jQuery/Themes/" + themeName + "/";
      $("#csslink_jqui").attr("href", themePath + "jquery-ui.custom.css");
    }
  </script>
</body>
</html>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

rgubarenko
Software Developer (Senior)
Canada Canada
Software Architect with over 15 years in IT field. Started with deep math and C++ Computer Vision software. Currently in .NET and PHP web development. Creator of DaST pattern, open-source frameworks, and plugins. Interested in cutting Edge IT, open-source, Web 2.0, .NET, MVC, C++, Java, jQuery, Mobile tech, and extreme sports.
Follow on   Twitter

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.141216.1 | Last Updated 12 May 2011
Article Copyright 2011 by rgubarenko
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid