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
<div class="detailsPopupContainer">
  <div class="popupDialog">
  
    <div scope="DetailsContent" class="screenContent nested0">
      <div id="tabs">
        <ul>
          <li><a href="#tabs-1">Video Details</a></li>
          <li>
            <a href="#tabs-2"><span>
              <div scope="ReviewsInfo" style="display: inline;">
                <!--showfrom:comm-empty:yes-->
                No user reviews yet
                <!--showstop:comm-empty:yes-->
                <!--showfrom:comm-empty:no-->
                {CommCount} user review(s)
                <!--showstop:comm-empty:no-->
              </div></span>
            </a>
          </li>
        </ul>
        
        <div id="tabs-1">
          <table cellpadding="0" cellspacing="0" border="0" width="100%">
            <tr>
              <td colspan="2">
                <table cellpadding="0" cellspacing="0" border="0">
                  <tr>
                    <td>
                      <div class="videoPackshot" style="color: {Category}">{Category} video category</div>
                    </td>
                    <td valign="top" style="padding-left:20px;">
                      <b>{ID}</b><br />
                      <div style="height:25px;display:block;">{Name}</div><br />
                      <div scope="ReviewsInfo2">
                        <a href="javascript:void(0)" class="reviewsLink">
                          <!--showfrom:comm-empty:yes-->
                          Be first to review this video!
                          <!--showstop:comm-empty:yes-->
                          <!--showfrom:comm-empty:no-->
                          User Rating: {Rating} / {CommCount} review(s)
                          <!--showstop:comm-empty:no-->
                        </a>
                      </div>
                    </td>
                  </tr>
                </table>
                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                  <tr>
                    <td colspan="2">
                      <div>
                        <h3>Description:</h3>
                      </div>
                      <div class="ui-widget-content ui-corner-all" style="display:block;overflow:hidden;overflow-y:scroll;height:100px;padding:10px;">
                        {Description}
                      </div>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>      
          <table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-top:20px;">
            <tr>
              <td>
                <div scope="AlikeVideosHeader" class="ui-widget ui-widget-content ui-corner-all" style="padding: 10px;">
                  <b>Other videos in this category</b>&nbsp;&nbsp;(showing {FromItemNum}-{ToItemNum} of {TotalItemCount})
                </div>
              </td>
              <td style="width:180px;text-align:right;"><div scope="AlikeVideosPager"></div></td>
            </tr>
            <tr>
              <td colspan="2">
                <div scope="AlikeVideosRepeater">
                  <div scope="VideoItem"></div>
                </div>
              </td>
            </tr>
          </table>
        </div>
        
        <div id="tabs-2">
          <div scope="CommentsContent" class="screenContent nested1">
            <table cellpadding="0" cellspacing="0" border="0" width="100%">
              <tr>
                <td>
                  <table cellpadding="0" cellspacing="5px" border="0" class="ui-widget-content ui-corner-all ui-state-hover" style="padding:5px;font-weight:bold;margin-bottom:10px;">
                    <tr>
                      <td style="text-align:right;">Total number of reviews:</td>
                      <td>{CommCount}</td>
                      <td rowspan="2" style="padding-left:20px;"><a href="javascript:void(0)" class="buttonAddNew">Write New Comment</a></td>
                    </tr>
                    <tr>
                      <td style="text-align:right;">Average user rating:</td>
                      <td>{Rating}</td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
            <table cellpadding="0" cellspacing="0" border="0" width="100%">
              <tr>
                <td>
                  <div scope="CommentsHeader" class="ui-widget-content ui-corner-all" style="padding: 10px;">
                    <b>User Comments:</b>&nbsp;&nbsp;(showing {FromItemNum}-{ToItemNum} of {TotalItemCount})
                  </div>
                </td>
                <td style="width:180px;text-align: right;"><div scope="CommentsPager"></div></td>
              </tr>
            </table>
            <table cellpadding="0" cellspacing="0" border="0" width="100%">
              <tr>
                <td>
                  <div scope="CommentsRepeater">
                    <div class="commentPanel ui-widget ui-widget-content ui-corner-all">
                      <div class="commentHeader">
                        <span class="ui-state-default ui-corner-all" style="padding:2px;">#{Num}</span>&nbsp;&nbsp;&nbsp;<b>Posted by <u>{Author}</u> on {Date}</b>
                        <div style="float:right;padding:2px;" class="ui-state-highlight ui-corner-all">Rated {Rated} of 5</div>
                      </div>             
                      {Text}
                    </div>
                  </div>
                </td>
              </tr>
            </table>
          </div>
          <div scope="AddCommentScreen" class="screenContent nested2">
            <table cellpadding="0" cellspacing="10px" border="0" class="ui-widget-content ui-corner-all" style="padding:10px;margin-bottom:10px;">
              <tr>
                <td style="text-align:right;">Enter your name:</td>
                <td><input type="text" class="inputName" style="width:300px;" /></td>
              </tr>
              <tr>
                <td style="text-align:right;">Rate this video:</td>
                <td>
                  <div class="panelRadios">
                    <input type="radio" id="radioRate1" name="VideoRating" value="1" /><label for="radioRate1">1</label>
                    <input type="radio" id="radioRate2" name="VideoRating" value="2" /><label for="radioRate2">2</label>
                    <input type="radio" id="radioRate3" name="VideoRating" value="3" /><label for="radioRate3">3</label>
                    <input type="radio" id="radioRate4" name="VideoRating" value="4" /><label for="radioRate4">4</label>
                    <input type="radio" id="radioRate5" name="VideoRating" value="5" checked="checked" /><label for="radioRate5">5</label>
                  </div>
                </td>
              </tr>
              <tr>
                <td style="text-align:right;" valign="top">Your comment:</td>
                <td><textarea cols="20" rows="5" style="overflow:scroll;width:300px;" class="inputComment"></textarea></td>
              </tr>
              <tr>
                <td colspan="2">
                  <div scope="ErrorDisplay">
                    <div class="ui-widget">
                      <div style="padding: 0pt 0.7em;" class="ui-state-error ui-corner-all">
                        <p><span style="float: left; margin-right: 0.3em;" class="ui-icon ui-icon-alert"></span><strong>Error:</strong> {ErrorMessage}</p>
                      </div>
                    </div>
                  </div>
                </td>
              </tr>
            </table>
            <div>
              <a href="javascript:void(0)" class="buttonSubmit">Submit Comment</a>&nbsp;&nbsp;
              <a href="javascript:void(0)" class="buttonCancel">Cancel</a>
            </div>
          </div>
          <div class="screenWait nested1" style="display: none;">
          </div>
        </div>
        
      </div>
    </div>
    
    <div class="screenWait nested0" style="display: none;">
    </div>
    
  </div>

  <script language="javascript" type="text/javascript">
    ; (function($)
    {
      $(document).ready(function()
      {
        $(".popupDialog").dialog({
          autoOpen: false,
          width: 900,
          height: 600,
          resizable: false,
          modal: true,
          draggable: false
        });

        $(".buttonPopup").live("click", function()
        {
          var videoID = $(this).attr("videoID");
          $(".popupDialog").data("VideoID", videoID);

          var dialogTitle = "Video Details Popup: <span style='text-decoration:underline;'>" + videoID + "</span>";
          $(".popupDialog").dialog("option", "title", dialogTitle);
          $(".popupDialog").dialog("open");

          $(".popupDialog .screenContent.nested0").css("display", "none");
          $(".popupDialog .screenWait.nested0").css("display", "block");

          AspNetDaST.Action('{ScopeClientID}', 'LoadContent', videoID);
        });

        AspNetDaST.AddRefreshHandler("{DetailsContent_ScopeID}", function()
        {
          // setup tab control
          $(".popupDialog #tabs").tabs({
            select: function(e, ui)
            {
              if (ui.index == 1)
              {
                $(".popupDialog .screenContent.nested1").css("display", "none");
                $(".popupDialog .screenContent.nested2").css("display", "none");
                $(".popupDialog .screenWait.nested1").css("display", "block");

                AspNetDaST.Action('{ScopeClientID}', 'LoadComments', '');
              }
            }
          });

          $(".screenContent .reviewsLink").click(function()
          {
            $(".popupDialog #tabs").tabs("select", 1);
            return false;
          });

          $(".popupDialog .screenWait.nested0").css("display", "none");
          $(".popupDialog .screenContent.nested0").css("display", "block");
        });

        AspNetDaST.AddRefreshHandler("{CommentsContent_ScopeID}", function()
        {
          $(".popupDialog .screenContent.nested1 .buttonAddNew").button();
          $(".popupDialog .screenContent.nested1 .buttonAddNew").click(function()
          {
            $(".popupDialog .screenContent.nested1").css("display", "none");
            $(".popupDialog .screenContent.nested2").css("display", "none");
            $(".popupDialog .screenWait.nested1").css("display", "block");

            AspNetDaST.Action('{ScopeClientID}', 'ShowAddCommentScreen', '');
            return false;
          });

          $(".popupDialog .screenWait.nested1").css("display", "none");
          $(".popupDialog .screenContent.nested1").css("display", "block");
        });

        AspNetDaST.AddRefreshHandler("{AddCommentScreen_ScopeID}", function()
        {
          $(".popupDialog .screenContent.nested2 .panelRadios").buttonset();
          $(".popupDialog .screenContent.nested2 .buttonSubmit").button();
          $(".popupDialog .screenContent.nested2 .buttonCancel").button();

          $(".popupDialog .screenContent.nested2 .buttonSubmit").click(function()
          {
            var userInput =
            {
              "Name": $(".popupDialog .screenContent.nested2 .inputName").val(),
              "Rated": parseInt($(".popupDialog .screenContent.nested2 .panelRadios input:radio:checked").val()),
              "Comment": $(".popupDialog .screenContent.nested2 .inputComment").val()
            };

            $(".popupDialog .screenContent.nested1").css("display", "none");
            $(".popupDialog .screenContent.nested2").css("display", "none");
            $(".popupDialog .screenWait.nested1").css("display", "block");

            AspNetDaST.Action('{ScopeClientID}', 'SubmitComment', JSON.stringify(userInput));
            return false;
          });

          $(".popupDialog .screenContent.nested2 .buttonCancel").click(function()
          {
            $(".popupDialog .screenContent.nested1").css("display", "none");
            $(".popupDialog .screenContent.nested2").css("display", "none");
            $(".popupDialog .screenWait.nested1").css("display", "block");

            AspNetDaST.Action('{ScopeClientID}', 'CancelComment', '');
            return false;
          });

          $(".popupDialog .screenWait.nested1").css("display", "none");
          $(".popupDialog .screenContent.nested2").css("display", "block");
        });

        AspNetDaST.AddRefreshHandler("{ErrorDisplay_ScopeID}", function()
        {
          $(".popupDialog .screenWait.nested1").css("display", "none");
          $(".popupDialog .screenContent.nested2").css("display", "block");
        });
      });

    })(jQuery);
  </script>
</div>

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
Web04 | 2.8.141223.1 | Last Updated 12 May 2011
Article Copyright 2011 by rgubarenko
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid