Contents tagged with ASP.net

  • Minify JS and CSS in Visual Studio Build Events

    Tags: .NET 4.0, .NET, ASP.net, VS 2010, SharePoint, Personal

    It’s pretty widely accepted (and common sense) that if you’re putting a site out into the wild – such a simple task as minifying CSS and JavaScript files can save a bunch of load time, especially on mobile devices.

    I’ve been playing about with this today and was quite happily using jsmin as described here until I noticed that in IE 7 and IE 8 the minified CSS didn’t work.

    The problem seems to be when using a background style, it takes out the space between the image url close bracket and the next style.

    background:url(image.png) no-repeat;
    background:url(image.png)no-repeat;

    Not a problem in IE 9 or chrome (haven’t tested others).

    So I set about researching the problem and found nothing…struggled a bit getting the search term right and clearly never mastered it as I found zip.

    Not to be put off, I was looking at the YUI compression tool from Yahoo, said to be better…but needs the java runtime and seems to complex to simply use, certainly for my simple taste!

    Then I found a YUI .net implementation on codeplex.  Excellent, its was even in NuGet.

    However…I wanted it as a build task to run in VS, I don’t really want to think about this stuff more than once.

    So I wrote a little command line wrapper for it.  Excellent.  Even got ILMerge involved to merge the YUI dll’s into my exe.  I know there are ways to use Reflection to load dll’s as embedded resources…but I didn’t fancy doing that!

    I did look at using CommandLine (also on codeplex) as I have done before, but ILMerge does not like that.  Don’t take my word for it, but it seems to be something to do with ILMerge is .net 2 and CommandLine uses some .net4 features.  It wasn’t happy…anyway, I just wrote a few lines of code to parse the command line args myself.

    Perfect!!!

    It’s not complex or very flexible, but is very suitable to my needs.

    You can pass in an array of files to minify and a target path.  That’s it.  It’ll merge the files if you pass more than one…you have no choice!

    > SCmin.exe –s C:\big.css C:\big1.css –t C:\small.css

    // This will take big.css and big1.css and put it into small.css

    Simples!

    Download the exe or full source.

      

    more...

  • jQuery Datatable in MVC … extended.

    Tags: jQuery, ASP.net MVC, .NET 4.0, ASP.net

    There are a million plugins for jQuery and when a web forms developer like myself works in MVC making use of them is par-for-the-course!  MVC is the way now, web forms are but a memory!!

    Grids / tables are my focus at the moment.  I don’t want to get in to righting reems of css and html, but it’s not acceptable to simply dump a table on the screen, functionality like sorting, paging, fixed header and perhaps filtering are expected behaviour.  What isn’t always required though is the massive functionality like editing etc you get with many grid plugins out there.

    You potentially spend a long time getting everything hooked together when you just don’t need it.

    That is where the jQuery DataTable plugin comes in.  It doesn’t have editing “out of the box” (you can add other plugins as you require to achieve such functionality).

    What it does though is very nicely format a table (and integrate with jQuery UI) without needing to hook up and Async actions etc. 

    Take a look here… http://www.datatables.net

    I did in the first instance start looking at the Telerik MVC grid control – I’m a fan of Telerik controls and if you are developing an in-house of open source app you get the MVC stuff for free…nice!  Their grid however is far more than I require. 

    Note: Using Telerik MVC controls with your own jQuery and jQuery UI does come with some hurdles, mainly to do with the order in which all your jQuery is executing – I won’t cover that here though – mainly because I don’t have a clear answer on the best way to solve it!

    One nice thing about the dataTable above is how easy it is to extend http://www.datatables.net/examples/plug-ins/plugin_api.html and there are some nifty examples on the site already…

    I however have a requirement that wasn’t on the site … I need a grid at the bottom of the page that will size automatically to the bottom of the page and be scrollable if required within its own space i.e. everything above the grid didn’t scroll as well.  Now a CSS master may have a great solution to this … I’m not that master and so didn’t! The content above the grid can vary so any kind of fixed positioning is out.

    So I wrote a little extension for the DataTable, hooked that up to the document.ready event and window.resize event.

    Initialising my dataTable ( s )…

    1. $(document).ready(function () {
    2.     var dTable = $(".tdata").dataTable({
    3.         "bPaginate": false,
    4.         "bLengthChange": false,
    5.         "bFilter": true,
    6.         "bSort": true,
    7.         "bInfo": false,
    8.         "bAutoWidth": true,
    9.         "sScrollY": "400px"
    10.     });

    My extension to the API to give me the resizing….

    1. // **********************************************************************
    2. // jQuery dataTable API extension to resize grid and adjust column sizes
    3. //
    4. $.fn.dataTableExt.oApi.fnSetHeightToBottom = function (oSettings) {
    5.     var id = oSettings.nTable.id;
    6.     var dt = $("#" + id);
    7.     var top = dt.position().top;
    8.     var winHeight = $(document).height();
    9.     var remain = (winHeight - top) - 83;
    10.     dt.parent().attr("style", "overflow-x: auto; overflow-y: auto; height: " + remain + "px;");
    11.     this.fnAdjustColumnSizing();
    12. }

    This is very much is debug mode, so pretty verbose at the moment – I’ll tidy that up later!

    You can see the last call is a call to an existing method, as the columns are fixed and that normally involves so CSS voodoo, a call to adjust those sizes is required.

    Just above is the style that the dataTable gives the grid wrapper div, I got that from some firebug action and stick in my new height.

    The –83 is to give me the space at the bottom i require for fixed footer!

    Finally I hook that up to the load and window resize.  I’m actually using jQuery UI tabs as well, so I’ve got that in the open event of the tabs.

    1. $(document).ready(function () {
    2.         var oTable;
    3.         $("#tabs").tabs({
    4.             "show": function (event, ui) {
    5.                 oTable = $('div.dataTables_scrollBody>table.tdata', ui.panel).dataTable();
    6.                 if (oTable.length > 0) {
    7.                     oTable.fnSetHeightToBottom();
    8.                 }
    9.             }
    10.         });
    11.         $(window).bind("resize", function () {
    12.             oTable.fnSetHeightToBottom();
    13.         });
    14.     });

    And that all there is too it.  Testament to the wonders of jQuery and the immense community surrounding it – to which I am extremely grateful.

    I’ve also hooked up some custom column filtering on the grid – pretty normal stuff though – you can get what you need for that from their website.  I do hide the out of the box filter input as I wanted column specific, you need filtering turned on when initialising to get it to work and that input come with it!  Tip: fnFilter is the method you want.  With column index as a param – I used data tags to simply that one.

    more...

  • Setting jQuery after ASP.net AJAX partial post back

    Tags: .NET 4.0, ASP.net, ASP.net AJAX, jQuery

    OK, so for some reason you have a mega mashup solution with ASP.net AJAX, jQuery and web forms. 

    Perhaps you are just on the migration from AjaxControlToolkit to the jQuery UI framework – who knows!!

    Anyway, the problem is that when you post back with something like an UpdatePanel, you will find that your nicely setup jQuery stuff, like the datepicker for example will no longer work.

    You may have something like this…

    1. $(document).ready(function () {
    2.     $(".date-edit").datepicker({ dateFormat: "dd/mm/yy", firstDay: 1, showOtherMonths: true, selectOtherMonths: true });
    3. });

    When you’re ASP.net UpdatePanel post back, you will find that your datepicker has gone.  Bugger!

    Well you need to add this little gem to set it back up again once the UpdatePanel comes back to the page.

    1. var prm = Sys.WebForms.PageRequestManager.getInstance();
    2. prm.add_endRequest(function () {
    3.     $(".date-edit").datepicker({ dateFormat: "dd/mm/yy", firstDay: 1, showOtherMonths: true, selectOtherMonths: true });
    4. });

    Or like me, you would have a javascript function, something like InitPage(); do all your work in there and call that on document.ready and endRequest.

    Your choice…you have the power Smile

    Share this post :

    more...

  • Using Telerik MVC with your own custom jQuery and or other plug-ins

    Tags: ASP.net, .NET, .NET 4.0, ASP.net MVC

    If you are using MVC it might be worth checking out the telerik controls (http://demos.telerik.com/aspnet-mvc), they are free if you are doing an internal or “not for profit” application.

    If however you do choose to use them, you could come up against a little problem I had.  Using the telerik controls with your own custom jQuery.  In my case I was using the jQuery UI dialog.

    It kept throwing an error where I was setting my div to a dialog.

    Code Snippet
    1. $("#textdialog").dialog({

    The problem is when you use the telerik mvc stuff you need to call ScriptRegistrar

    Code Snippet
    1. @Html.Telerik().ScriptRegistrar()

    in order to setup the javascript for the controls.

    By default this adds a reference to jQuery and if you have already added a reference to jQuery because you are using it elsewhere, this causes a problem.

    I found the solution here

    And it was to change the above ScriptRegistrar call to this…

    Code Snippet
    1. @Html.Telerik().ScriptRegistrar().jQuery(false).DefaultGroup(g => g.Combined(true).Compress(true));

    If you come across this one on stackoverflow it wont work – in my case the HtmlEditor would render no problem, but was unusable.  Which is the same as someone else found when using the tab control – they went to the bother of re-writing the ScriptRegistrar.  Not for me that one!!

    more...

  • ASP.net MVC | MvcBuildViews | MachineToApplication Error

    Tags: ASP.net MVC, .NET, ASP.net, Visual Studio

    You may come up against this little error when working on a MVC application, I specifically find things like this crop up when you are upgrading from previous version e.g. VS 2008 to 2010 and the like.

    They are a complete pain in the bum quite frankly, you can spend hours googling around, trying this trying that, posting questions here and there etc etc…so I’m adding to the this and that which you will of course try, because it’s the sort of error you don’t care about…it’s just getting in the way of your day!

    There would seem to be some kind of issue with MvcBuildViews and this error http://goo.gl/ogo1e

    Anyway, what worked for me was to delete the debug directory from within the obj directory and it all worked…

    Hopefully this will help someone else!! Or at the very least be something else to try on the way to solving another time wasting issue!!

    UPDATE:  May have been a bit hasty in my excitement of solving this…its really only part solved as I find i have to delete the debug directory every time I want to publish/package!

    more...

  • EasyDB | What a complete waste of my time...

    Tags: .NET, ASP.net, SQL

    After watching a DNRTV episode with Scott Cate on EasyDB I was really impressed and could definitely see how it could solve a requirement in a project I am planning...

    Straight after listening to the show, with the advice of Scott Cate (a promotion code), I hot stepped over to http://easydb.com to sign up.  After waiting for a few days, maybe a week and still having heard nothing I tried again and was greeted with this little chestnut...

    image 

    ...and that remains to this day.

    Why bother doing a dnrtv episode then not letting me in to try it, blog about it and generally test it???? Pointless...

    Anyone else using this beta that may have the power to let me in?!?!

    more...

  • Sharepoint | Silverlight video player web part

    Tags: .NET 3.5, ASP.net, SharePoint, Silverlight

    Silverlight makes working with videos pretty straight forward, Microsoft makes Silverlight pretty straight forward with ASP.net and sharepoint is written in ASP.net, so match made in tech heaven!!

    I wanted a video player web part for sharepoint, that had some simple functionality like play, pause and volume.  I started with expression encoder which output a nice media player interface...this is OK, but has a couple of restrictions; 1, its far to rich for what I wanted, animations all over the place and 2, its JavaScript with Silverlight 1.  So, using blend I opened one of the exported files to rip out a few features of the player.

    Play / Pause button, volume control and some associated storyboards for some nice animations... visible = true; visible = false is so last year!!!

    I copied the xaml into my own Silverlight 2 app, that already had the media player element.  A little positioning in blend and we're off.  Right that's far too much waffle lets get to it!

    image

    I wont paste the xaml here as it basically only a media element, the play/pause button and volume control copied from Expression Encoder. OK, well maybe a little...

    <MediaElement HorizontalAlignment="Stretch" Margin="0,0,0,0" x:Name="MediaMain" VerticalAlignment="Stretch" Source="" Stretch="Fill" AutoPlay="False"/>

    What I did add was handlers for all of the events e.g. Play, pause, volume (actually all the code to do the slider) and hide/show events for the play button.  More on that in a mo.

    Of course for this to be a web part, the movie file at least has to be a variable that's changeable in the properties of the web part.  To do this I am going to use Silverlight's InitParams property.  Its worth mentioning that the movies are nothing to do with me...they are going to live in a sharepoint library, they are encoded into wmv format using another app.

    In the App.xaml file within your Silverlight project you will find an OnStartUp method, this is where I handle the InitParams.

            private void OnStartup(object sender, StartupEventArgs e) 
            {
                this.VideoUrl = string.Empty;
    
                if (e.InitParams["videoUrl"] != null) {
                    this.VideoUrl = e.InitParams["videoUrl"];
                }
                if (e.InitParams["AutoPlay"] != null) {
                    this.AutoPlay = Convert.ToBoolean(e.InitParams["AutoPlay"]);
                }
                else {
                    this.AutoPlay = false;
                }
                if (e.InitParams["Loop"] != null) {
                    this.Loop = Convert.ToBoolean(e.InitParams["Loop"]);
                }
                else {
                    this.Loop = false;
                }
    
                // Load the main control here
                this.RootVisual = new Page();
            }

    As you can see I am expecting 3 params and set class level properties for later use. AutoPlay(play the video on page load) and Loop play(to obvious to describe!!), VideoUrl (the url of the video to show).

    public string VideoUrl { get; private set; }
    public bool AutoPlay { get; private set; }
    public bool Loop { get; private set; }

    In the Silverlight class (Page) constructor I get the values like this...

            App currApp;
    
            public Page()
            {
                // Required to initialize variables
                InitializeComponent();
    
                currApp = Application.Current as App;
    
                VideoMain.Source = new Uri(currApp.VideoUrl);
    
                VideoMain.AutoPlay = currApp.AutoPlay;
                if (currApp.AutoPlay) {
                    ControlsPlayPause.Opacity = 0;
                    PlaySymbol.Opacity = 0;
                    PauseSymbol.Opacity = 1;
                }

    Here you can see I get the current application, cast it as App (insert whatever the name of your own application class is...App is default) and access the properties.  I am setting the source of the video and deciding whether to play or not, setting the UI to suit.

    I have a couple of handlers on the UserControl to show the play/pause button.  Basically when the mouse hovers over the control show the button (begin the StoryBoard that animates it in)

            private void UserControl_MouseEnter(object sender, MouseEventArgs e)
            {
                if (ControlsPlayPause.Opacity < 1)
                    PlayPause_Show.Begin();
            }
    
            private void UserControl_MouseLeave(object sender, MouseEventArgs e)
            {
                PlayPause_Hide.Begin();
            }

    In the top one, I check for opacity, as you can see in the class constructor if the video is not set to AutoPlay I show the play button.

    I don't use this, but for reference this is what the markup would look like to use this Silverlight app.

        <div id="silverlightControlHost">
            <object data="data:application/x-silverlight," type="application/x-silverlight-2-b2" width="100%" height="100%">
                <param name="source" value="ClientBin/VideoViewer.xap"/>
                <param name="background" value="white" />
                <param name="initParams" value="videoUrl=http://mossinstance/site/library/movie.wmv,AutoPlay=true,Loop=false" />
                <a href="http://Silverlight.2.0.exe" style="text-decoration: none;">
                     <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
                </a>
            </object>
            <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>
        </div>

    -----------------------------------------

    Now onto the web part.  I am going to have the Silverlight app on the Sharepoint server, there are obviously several ways, one that appeals to me most is have a sharepoint library for your Silverlight apps, or it could be as simply as creating a ClientBin folder at the route of the site.  Don't forget you need to set the MIME type up for Silverlight.

    The web part itself is pretty simple, all I need is 3 properties, create the Silverlight control and set the InitParams.

    I do have a custom "NotInstalled" template, but you don't need that.  I didn't want users to have to download the installer from the web, so I have put it on the network. You will also see I have set the source of the Silverlight control to a ClientBin folder at the root of the site.

    Another point to note(!) I have put the dll System.Web.Silverlight in the GAC, there are arguments for and against, I prefer the GAC.

    Now install your web part in whatever method you prefer...

    Some pages/sites/articles that helped.

    I have literally just found this on codeplex, it's a Silverlight 1.0 video player web part for Sharepoint.  Would have been no good for me as I have no interest in Silverlight 1.0, but you might!!

    more...