Ajax me!

One of my recent projects has been creating a code editor using ASP.Net MVC & Roslyn. Part of that project uses a library called ace.io. It's a really nice Javascript library that allows you to very quickly make an in-browser code editor for almost any language. 

One of the challenges I met was getting the code from the editor to the ASP.Net controller on the back end for processing. In comes jQuery Ajax. The $.ajax() function allows you to make asynchronous HTTP requests which in turn doesn't require a full page refresh. Once you have your code just send it to the controller. But let's look at the code first.
<script type="text/javascript">
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/cloud");
    editor.getSession().setMode("ace/mode/csharp");
 
    $("#btnSubmitCode").click(function () {
        var code = escape(editor.getValue());
        $.ajax({
            type: 'POST',
            url: "/Home/AnalyzeCode?Code=" + code,
            success: function (returnPayload) {
                $("#errorList").append("<li>" + returnPayload + "</li>");
            },
            error: function (xhr, ajaxOptions, thrownError) {
                console && console.log("request failed");
            },
            dataType: "text",
            contentType: "text/plain",
        });
    });
</script>
Really there are just a few simple parameters to set:
  1. type needs to be set to "POST" because we are sending data to the controller.
  2. url probably the most important. The format of the url is /{controller}/{action/method}?{parameters}. The parameters are the overload parameters for the action/method. One thing to note is that order does not mater for the parameters being sent in the Ajax call. Just make sure you spell them right! 
  3. success & error are simply what do you want to do if the call succeeds or fails. In this case with the editor we are returning diagnostics on the code from the editor & are displaying them as list items. 
  4. dataType &  contentType  are also pretty straight forward. Just set them as seen above because we are just passing text to the controller. 
As you can see getting data from Javascript to the back end in an ASP.Net MVC app is actually quite easy. One more tool in the toolbox!

Bootstrap Snippet Pack for Visual Studio

So recently I've been more and more interested in using Bootstrap. Boostrap is awesome for creating very rich and responsive websites or even mobile apps in something like Apache Cordova. My biggest issue was how do I make a Boostrap site quickly without having to memorize all the classes that make up the styles.

In comes Bootstrap Snippet Pack. An extension for Visual Studio that allows you to quickly create Bootstrap elements in a few simple clicks or key strokes. So what is it? It's a Visual Studio extension that contains pre-defined code snippets for you to quickly call. Simple as that!

First, go get the extension here. Once you have run through the installation you may have to restart Visual Studio. Now that you have the extension, open Visual Studio and create a new web project of any kind, MVC, Webforms or just an HTML page.

The easiest way to add a snippet is by using the keyboard shortcut to access code snippets in Visual Studio. The magic key stroke is Crtl+K, Crtl+X. You are presented with the snippet tool as shown below.

Simply select Bootstrap from the menu and hit enter. You are now presented with all the code snippets for Bootstrap. Again, shown below.

Let's try something simple. Find Bootstrap 3.x form. This will give you a simple label, textbox and submit button styled with Bootstrap.

If you run this you are given the following design:

Now as you can see I have used a boilerplate ASP.Net application, specifically a Webforms application. By inserting the form snippet between the Jumbotron element, also boostrap, and the rest of the body, I get a simple Email submittal form. Again this is all styled with Bootstrap.

Now that you have seen how simple it can be to mock up a website using a nice style it's time to explore. Go through the Bootstrap snippets and try them out. The form that I have showed you can have many more fields. Just copy the email label and texbox and paste in as many as you want for whatever fields you need. Just remember to change the names so you don't have 10 email fields. That's it! Also, visit the Bootstrap website here and start digging into how forms, buttons, modals, tables and so much more are styled with Bootstrap.

Well I hope you enjoyed this post. If you have any questions drop me a message via any of the social media spots above. Hopefully this is another tool that will help you be great! Thanks!


Marketability

So who has heard of the saying "You should program yourself out of a job"? Well that may be a good saying, I would say you should program yourself INTO another job. You may ask what exactly does that mean. I will give you a for instance.

My current job has me working on the Integration Team using BizTalk 2010. So where could I go if I only know BizTalk and nothing else with no knowledge of SQL Server, PowerShell, TFS, Windows Server or any other IT related knowledge? Probably not very far. If I can make a SQL query better, automate a build process using PowerShell and TFS, or create a Dev environment by myself I am showing upper management and fellow team members that I have skills and am worth keeping around. So now you ask how do you obtain quality skills and knowledge. Great question! 

My first recommendation is books. Yes the good old paperback or e-book in you like. Not only do they give you a good starting point but they are great reference when you forget something. You set it down beside you and code away. I personally love to use Amazon to get books. I actually have all my books in electronic format so I can carry them with me everywhere. 

My favorite is videos series from websites and this is the one I will detail the most. The first website is Channel9.

Channel9: this website is nothing but Microsoft goodness from webisodes to full series on technologies and methodologies. Yes Channel9 is proprietary but it proves my point. Channel9 reaches out to other people that are talented at teaching and getting topics out to the public. For instance there is a gentleman from LearnVisualStudio named Bob Tabor. He was contacted by Microsoft to create beginner series for programming topics. He has created outstanding C#, Java, HTML5, Windows Phone 8 and Windows Store App series. Channel9 also covers conferences and events held around the world. Some of those videos can give you insight and an advantage on a project.

http://channel9.msdn.com

Microsoft Virtual Academy: this is another Microsoft driven sight but yet another outstanding one. Hear you can enroll and earn points for modules that are completed. If you don't want to keep track that's great just use the content. There is a lot of Jump Start and Deep Dive content for everything from Visual Studio to SQL Server to Azure to Windows Server and more. 

http://www.microsoftvirtualacademy.com

PluralSight: this is another awesome training sight. It is a paid site but provides a very advanced learning area. Another nice thing is that it is not solely devoted to Microsoft technologies. I have used this sight to brush up on Agile programming methods and SCRUM. You do have to pay for this sight at $29/mo for just the content and $49/mo for the content and content files. But if your serious about learning and advancing this is a great tool. If the money sounds a little intimidating they offer a trial period and it gives you 200 minutes of free content. That is certainly enough to go through a good bit of one series or try out a few. 

http://www.pluralsight.com

Go to events! What could be more exciting than being in a room full of nerds or "IT" people talking about nerd stuff. TechEd, VisualStudio Live, Build. These are great events to go to and have your brain pumped with knowledge. Plus you can travel and see the world. 

This one may not be appealing to everyone but it worked for me. Go back to school. I worked as an electrician for four years out of high school before I became a programmer. I finally decided I needed a change and I just did it. If you have an Associates, go get your B.S. If you have your B.S, go get your Masters. If you have your Masters, get your Doctorate. If you have your Doctorate, holy cow that's amazing. Check and see if your company will pay for the schooling or at least help pay for it. Never hurts to ask or try.

My last recommendation is ask your fellow peers. Get the knowledge from other sources but then ask intelligent questions to your peers. Discussion is a great way to solve problems and come up with new good problems. Someone with 10 years of experience can tell you that yes the idea in the book is great BUT when doing that way in this situation this will happen. 

I hope these ideas give you a door way into a new job or at least better your current position. Remember that if you stay still you will fall behind.