
<p>
  This walkthrough turtorial is about how to setup Swagger with ASP.NET MVC API
  by using Visual Studio 2015, also provide steps of how to customize the
  swagger UI.&nbsp;
</p>
<h2>What's Swagger?</h2>
<p>
  Swagger could provide more rich documents for your API, but that's not it, it
  provides how to design tests and documentation about your API. Although, this
  blog just focuses on how to set up Swagger UI on Visual Studio 2015's ASP.NET
  API project. ASP.NET MVC also has a Web API Helper page but unlike Swagger,
  which is more powerful with client generation, discoverable, and more
  developer support.&nbsp;
</p>
<p>
  This blog will show how to use Swagger to ASP.NET MVC API project and provide
  a list of how to.
</p>
<blockquote>
  <p>
    With a Swagger-enabled API, you get interactive documentation, client SDK
    generation and discoverability.
  </p>
</blockquote>
<pre class="language-xml"><code>Install-Package Swashbuckle
</code></pre>
<p>Following are few information relative with Swagger.</p>
<ul>
  <li>
    <a href="http://swagger.io/" target="_blank" rel="noopener">swagger.io</a>
  </li>
  <li>
    <a
      href="https://github.com/domaindrivendev/Swashbuckle"
      target="_blank"
      rel="noopener"
      >Swashbuckle</a
    >
  </li>
  <li>
    <a
      href="https://github.com/swagger-api/swagger-codegen/tree/master/samples"
      target="_blank"
      rel="noopener"
      >swagger-codegen</a
    >
  </li>
  <li>
    <a
      href="https://github.com/swagger-api/swagger-ui"
      target="_blank"
      rel="noopener"
      >swagger-ui</a
    >
  </li>
  <li>
    <a
      href="https://github.com/OAI/OpenAPI-Specification/blob/master/versions/2.0.md"
      target="_blank"
      rel="noopener"
      >OpenAPI Specification</a
    >
  </li>
</ul>
<h2>Use Azure API App template with Swagger</h2>
<p>
  You can use Swagger with Visual Studio 2015, ASP.NET 4.5.2 Templates. Once you
  use Visual Studio and create a web application by template Azure API App, at
  your solution you should see the following Swagger at the package file.
</p>
<p>
  <img
    class="img-responsive"
    src="http://res.cloudinary.com/dmwrakaup/image/upload/v1458931625/vrtczaiykyxoxtecgloc.png"
    alt=""
  />
</p>
<p>
  You will find the NuGet library <code>Swashbuckle</code>, that .NET version of
  Swagger, if you want to use the latest NuGet version. You can use NuGet to
  uninstall the package and install the latest NuGet package again.
</p>
<p>
  <img
    class="img-responsive"
    src="https://d1p0mp3f1fx0hz.cloudfront.net/_dp4q0c174.png"
    alt=""
  />
</p>
<h3>
  <code>SwaggerConfig</code> and <code>EnableSwaggerUi</code> and basic
  configuration
</h3>
<p>
  After installing Swashbuckle, you will see a SwaggerConfig under your
  App_Start folder. This <code>SwaggerConfig</code> is the start point to enable
  Swagger. At the following, if you have already contained, then your setup is
  done. We should see the API document written by Swagger.
</p>
<pre
  class="language-csharp"
><code>[assembly: PreApplicationStartMethod(typeof(SwaggerConfig), "Register")]

namespace WebApplication1
{
    public class SwaggerConfig
    {
        public static void Register()
        {
            var thisAssembly = typeof(SwaggerConfig).Assembly;

            GlobalConfiguration.Configuration 
                
                .EnableSwagger(c =&gt;
                    // {...
                    // this will enable swagger UI
                .EnableSwaggerUi(c =&gt;
</code></pre>
<h3>
  Build the solution and check the URL
  <code>{yoururl}/swagger or {yoururl/swagger/ui/index</code>
</h3>
<p>
  Boom!!!, you should be able to see the following swagger UI document page. I
  have two Web APIs, <code>TestController</code> and
  <code>ValuesController. </code>As you can see, it contains a search feature
  and you can try it out!!?
</p>
<p>
  <img
    class="img-responsive"
    src="http://res.cloudinary.com/dmwrakaup/image/upload/v1458932570/vbbqw3dh7xbalqxmxlyd.png"
    alt=""
  />
  <img
    class="img-responsive"
    src="https://d1p0mp3f1fx0hz.cloudfront.net/_3cxww0sfn.png"
    alt=""
  />
</p>
<p>
  However, I also got the following question when I first see these pages
  generated by Swagger.
</p>
<ul>
  <li>Can I change this API document's UI, including logo, stylesheet?</li>
  <li>Can I add javascript to this?</li>
  <li>Can I change the URL instead of /swagger?</li>
  <li>Can I add my own page to this auto-generated page?</li>
  <li>Can I make certain Web API does not show?</li>
  <li>
    Can I turn the swagger's API documents off at production, but only in
    development?
  </li>
</ul>
<p>
  I might not cover all these questions I have in my mind but will give them a
  try and list them here.
</p>
<h3>Can I Use a customized stylesheet for Swagger?</h3>
<p>
  Let's assume I want to change the following style, which changes the header
  background color to <code>#704C8F</code>.
</p>
<h3>1. CSS file</h3>
<pre class="language-css"><code>.swagger-section #header {
    background-color: #704C8F;
    padding: 14px;
}
</code></pre>
<h3>2. SwaggerConfig</h3>
<pre class="language-csharp"><code>.EnableSwaggerUi(c =&gt;                   {
c.InjectStylesheet(Assembly.GetAssembly(typeof(WebApiApplication)), "WebApplication2.styles.swagger_test.css");
</code></pre>
<h3>3. Global.ascx</h3>
<h4>How the WebApiApplication looks like</h4>
<p>
  The SwaggerConfig's InjectStylesSheet's first parameter need to pass the
  current application's assembly, the second parameter is a little tricky. The
  filename <code>WebApplication2.styles.swagger_test.css</code>is
  <code>Project Folder name</code>.<code>{folder name}</code> and the file name.
</p>
<pre class="language-csharp"><code>namespace WebApplication2
{
    public class WebApiApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();
            GlobalConfiguration.Configure(WebApiConfig.Register);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
        }
    }
}</code></pre>
<h4>4. styles file location</h4>
<p>
  Also, this is very important, you have made the file BuildAction an Embedded
  Resource.
</p>
<pre class="language-csharp"><code></code></pre>
<h4>4. After 1 - 4 steps, how the page looks like</h4>
<p>
  <img
    class="img-responsive"
    src="http://res.cloudinary.com/dmwrakaup/image/upload/v1458968917/vetiqfmu4mizsfyolm2h.png"
    alt=""
  />
</p>
<p>&nbsp;</p>
<h3>Can I add my own Javascript file to Swagger API documents?</h3>
<p>
  You are able to do it as follows, assume you have a javascript file like this.
</p>
<p>1. Javascript</p>
<pre class="language-javascript"><code>(function () {
    function init() {

        console.info("init for my swagger function");

        $("#explore").click(function () {
            alert("you clicked explore");
        });
    }

    init();
})();</code></pre>
<h4>2. Javascript file location and Build Action Property</h4>
<pre class="language-javascript"><code>
</code></pre>
<h4>3. SwaggerConfig class</h4>
<p>set the javascript path as string type like following.</p>
<pre
  class="language-csharp"
><code>   var myAssembly = Assembly.GetAssembly(typeof(WebApiApplication));
   c.InjectJavaScript(myAssembly, "WebApplication2.js.swagger_test.js");
</code></pre>
<h4>4. Done, check the page</h4>
<p>
  When the page load, you can see the javascript console message, now you can
  add javascript to the page, my next question is can I change the default Html?
</p>
<p>
  <img
    class="img-responsive"
    src="http://res.cloudinary.com/dmwrakaup/image/upload/v1458969860/h3novy9llbwau4kearez.png"
    alt=""
  />
</p>
<h3>
  Now, we know we can change javascript, CSS, can we change the entire HTML?
</h3>
<p>
  Yes, and the main feature will still work if you use the swagger's existing
  javascript. Following is how we can do it.
</p>
<h4>1. Html Files</h4>
<p>
  This time I want to add two HTML, after creating these HTML you also have to
  change Build Action as Embedded Resource again.
</p>
<p>
  <img
    class="img-responsive"
    src="http://res.cloudinary.com/dmwrakaup/image/upload/v1458971711/evgs4ci6wclqwpqpirxg.png"
    alt=""
  />
</p>
<p>swagger_test.html</p>
<pre class="language-html"><code>&lt;h3&gt;Bomm!!!!&lt;/h3&gt;
</code></pre>
<p>OtherVersion.html</p>
<pre class="language-html"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Swagger UI My Own Version&lt;/title&gt;
    &lt;link rel="icon" type="image/png" href="images/favicon-32x32-png" sizes="32x32" /&gt;
    &lt;link rel="icon" type="image/png" href="images/favicon-16x16-png" sizes="16x16" /&gt;
    &lt;link href='css/typography-css' media='screen' rel='stylesheet' type='text/css' /&gt;
    &lt;link href='css/reset-css&amp;#
39; media='screen' rel='stylesheet' type='text/css' /&gt;
    &lt;link href='css/screen-css' media='screen' rel='stylesheet' type='text/css' /&gt;
    &lt;link href='css/reset-css' media='print' rel='stylesheet' type='text/css' /&gt;
    &lt;link href='css/print-css' media='print' rel='stylesheet' type='text/css' /&gt;
    &lt;link href='ext/WebApplication2-styles-swagger_test-css' media='screen' rel='stylesheet' type='text/css' /&gt;

    &lt;script src='lib/jquery-1-8-0-min-js' type='text/javascript'&gt;&lt;/script&gt;
    &lt;script src='lib/jquery-slideto-min-js' type='text/javascript'&gt;&lt;/script&gt;
    &lt;script src='lib/jquery-wiggle-min-js' type='text/javascript'&gt;&lt;/script&gt;
    &lt;script src='lib/jquery-ba-bbq-min-js' type='text/javascript'&gt;&lt;/script&gt;
    &lt;script src='lib/handlebars-2-0-0-js' type='text/javascript'&gt;&lt;/script&gt;
    &lt;script src='lib/underscore-min-js' type='text/javascript'&gt;&lt;/script&gt;
    &lt;script src='lib/backbone-min-js' type='text/javascript'&gt;&lt;/script&gt;
    &lt;script src='swagger-ui-min-js' type='text/javascript'&gt;&lt;/script&gt;
    &lt;script src='lib/highlight-7-3-pack-js' type='text/javascript'&gt;&lt;/script&gt;
    &lt;script src='lib/jsoneditor-min-js' type='text/javascript'&gt;&lt;/script&gt;
    &lt;script src='lib/marked-js' type='text/javascript'&gt;&lt;/script&gt;
    &lt;script src='lib/swagger-oauth-js' type='text/javascript'&gt;&lt;/script&gt;

    &lt;!-- Some basic translations --&gt;
    &lt;!-- &lt;script src='lang/translator.js' type='text/javascript'&gt;&lt;/script&gt; --&gt;
    &lt;!-- &lt;script src='lang/ru.js' type='text/javascript'&gt;&lt;/script&gt; --&gt;
    &lt;!-- &lt;script src='lang/en.js' type='text/javascript'&gt;&lt;/script&gt; --&gt;

    &lt;script type="text/javascript"&gt;
    $(function () {
      var url = window.location.search.match(/url=([^&amp;]+)/);
      if (url &amp;&amp; url.length &gt; 1) {
        url = decodeURIComponent(url[1]);
      } else {
        url = "http://petstore.swagger.io/v2/swagger.json";
      }

      // Get Swashbuckle config into JavaScript
      function arrayFrom(configString) {
        return (configString !== "") ? configString.split('|') : [];
      }

      function stringOrNullFrom(configString) {
        return (configString !== "null") ? configString : null;
      }

      window.swashbuckleConfig = {
        rootUrl: 'http://localhost:65343',
        discoveryPaths: arrayFrom('swagger/docs/v1'),
        booleanValues: arrayFrom('true|false'),
        validatorUrl: stringOrNullFrom('http://localhost:65343/validator'),
        customScripts: arrayFrom('ext/WebApplication2-js-swagger_test-js'),
        docExpansion: 'none',
        oAuth2Enabled: ('false' == 'true'),
        oAuth2ClientId: '',
        oAuth2ClientSecret: '',
        oAuth2Realm: '',
        oAuth2AppName: '',
        oAuth2ScopeSeperator: ' ',
        oAuth2AdditionalQueryStringParams: JSON.parse('{}')
      };

      // Pre load translate...
      if(window.SwaggerTranslator) {
        window.SwaggerTranslator.translate();
      }
      window.swaggerUi = new SwaggerUi({
        url: swashbuckleConfig.rootUrl + "/" + swashbuckleConfig.discoveryPaths[0],
        dom_id: "swagger-ui-container",
        booleanValues: swashbuckleConfig.booleanValues,
        onComplete: function(swaggerApi, swaggerUi){
          if (typeof initOAuth == "function" &amp;&amp; swashbuckleConfig.oAuth2Enabled) {
            initOAuth({
              clientId: swashbuckleConfig.oAuth2ClientId,
              clientSecret: swashbuckleConfig.oAuth2ClientSecret,
              realm: swashbuckleConfig.oAuth2Realm,
              appName: swashbuckleConfig.oAuth2AppName,
              scopeSeparator: swashbuckleConfig.oAuth2ScopeSeperator,
              additionalQueryStringParams: swashbuckleConfig.oAuth2AdditionalQueryStringParams
            });
          }

          if(window.SwaggerTranslator) {
            window.SwaggerTranslator.translate();
          }

          $('pre code').each(function(i, e) {
            hljs.highlightBlock(e)
          });

          addApiKeyAuthorization();

          window.swaggerApi = swaggerApi;
          _.each(swashbuckleConfig.customScripts, function (script) {
            $.getScript(script);
          });
        },
        onFailure: function(data) {
          log("Unable to Load SwaggerUI");
        },
        docExpansion: swashbuckleConfig.docExpansion,
        jsonEditor: false,
        apisSorter: null, // default to server
        defaultModelRendering: 'schema',
        showRequestHeaders: false
      });

      if (window.swashbuckleConfig.validatorUrl !== '')
        window.swaggerUi.options.validatorUrl = window.swashbuckleConfig.validatorUrl;

      function addApiKeyAuthorization(){
        var key = encodeURIComponent($('#input_apiKey')[0].value);
        if (key &amp;&amp; key.trim() != "") {
          var apiKeyAuth = new SwaggerClient.ApiKeyAuthorization("api_key", key, "query");
            window.swaggerUi.api.clientAuthorizations.add("api_key", apiKeyAuth);
            log("added key " + key);
        }
      }

      $('#input_apiKey').change(addApiKeyAuthorization);

      // if you have an apiKey you would like to pre-populate on the page for demonstration purposes...
      /*
        var apiKey = "myApiKeyXXXX123456789";
        $('#input_apiKey').val(apiKey);
      */

      window.swaggerUi.load();

      function log() {
        if ('console' in window) {
          console.log.apply(console, arguments);
        }
      }
  });
    &lt;/script&gt;
&lt;/head&gt;

&lt;body class="swagger-section"&gt;
    &lt;h1&gt;Damn, I love this! Swagger!&lt;/h1&gt;

    &lt;div id="message-bar" class="swagger-ui-wrap" data-sw-translate&gt;&amp;nbsp;&lt;/div&gt;
    &lt;div id="swagger-ui-container" class="swagger-ui-wrap"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

</code></pre>
<h3>2. SwaggerConfig for Html</h3>
<pre>
      c.CustomAsset("swagger_test", myAssembly, "WebApplication2.html.swagger_test.html");
                        c.CustomAsset("OtherVersion", myAssembly, "WebApplication2.html.OtherVersion.html");
</pre>
<h3>3. That's it, let's check the browser.</h3>
<p>
  Now, you're going to ask a question, what's the URL. I didn't figure it out at
  the first, but look like Swagger is using the file name as the URL. Since
  their default page is /swagger/ui/index, so my new files' URL will be
  <code>/swagger/ui/OtherVersion</code> and
  <code>/swagger/ui/swagger_test</code>
</p>
<p>
  Following is one of my new pages, OtherVersion. Isn't this so sweet? As a
  developer when you use other UI Framework if you can replace CSS, Javascript
  and HTML but keep their original logic. That's just fantastic.
</p>
<p>
  <img
    class="img-responsive"
    src="http://res.cloudinary.com/dmwrakaup/image/upload/v1458972150/uiblm9hoxxitxz1fgxls.png"
    alt=""
  />
</p>
<h3>Add .NET XML comment for swagger's API description</h3>
<p>
  ASP.NET WebAPI's default API helper document also looks for DLL's XML comment
  for description. We can do that in swagger too.
</p>
<h4>1. Project property</h4>
<p>
  The first thing you need to do is go to the project that contains the API
  controller to check the XML documentation file, so when building the solution
  visual studio will update the XML with comments you add to the class. Also,
  swagger later will read the XML's comment as a description of the API too.
</p>
<p>
  <img
    class="img-responsive"
    src="http://res.cloudinary.com/dmwrakaup/image/upload/v1459030325/o170ozq0mak76k8hfoqi.png"
    alt=""
  />
</p>
<h4>2. SwaggerConfig setting</h4>
<p>
  The next important thing is, swagger has not registered the API XML, you can
  add it as follows.
</p>
<pre
  class="language-csharp"
><code> c.IncludeXmlComments(string.Format(@"{0}\bin\APIDemo.XML", System.AppDomain.CurrentDomain.BaseDirectory));
</code></pre>
<p>
  Following are examples of the WebAPI controller and the API Model class' XML
  document.
</p>
<pre class="language-csharp"><code>/// &lt;summary&gt;
    /// my product
    /// &lt;/summary&gt;
    public class Product
    {
        /// &lt;summary&gt;
        /// product id
        /// &lt;/summary&gt;
        public Guid GuidId { get; set; }
        /// &lt;summary&gt;
        /// product Id
        /// &lt;/summary&gt;
        public int ProductId { get; set; }
        /// &lt;summary&gt;
        /// product name
        /// &lt;/summary&gt;
        public string ProductName { get; set; }
        /// &lt;summary&gt;
        /// product price
        /// &lt;/summary&gt;
        public decimal Price { get; set; }
        /// &lt;summary&gt;
        /// product unit
        /// &lt;/summary&gt;
        public int Unit { get; set; }
</code></pre>
<pre class="language-csharp"><code>/// &lt;summary&gt;
    /// ProductController API
    /// &lt;/summary&gt;
    public class ProductController : ApiController
    {
        /// &lt;summary&gt;
        /// products data
        /// &lt;/summary&gt;
        public static List&lt;Product&gt; Products
        {
            get
            {
                return new List&lt;Product&gt;
                {
                    new Product(Guid.NewGuid(), 122, "Product A", 300, 1),
                    new Product(Guid.NewGuid(), 333, "Product B", 400, 10),
                    new Product(Guid.NewGuid(), 444, "Product C", 500, 20),
                    new Product(Guid.NewGuid(), 555, "Product D", 600, 15),
                    new Product(Guid.NewGuid(), 777, "Product E", 700, 5)
                };
            }
        }

        /// &lt;summary&gt;
        ///  get values for products
        /// &lt;/summary&gt;
        /// &lt;returns&gt;&lt;/returns&gt;
        public IEnumerable&lt;Product&gt; Get()
        {
            return Products;
        }
</code></pre>
<h4>3. Done! Let's browser the API Document</h4>
<p>
  Now, we're done, after building the solution, you should see your XML comment
  add to the Csharp class at the Swagger API documentation page.
</p>
<p>
  <img
    class="img-responsive"
    src="https://d1p0mp3f1fx0hz.cloudfront.net/_iw664rs80.png"
    alt=""
  />
</p>
<h3>Conclusion</h3>
<p>
  Swagger with ASP.NET MVC will provide very powerful API documentation and it
  is very flexible.
</p>
<p>
  Check the
  <a
    href="https://github.com/keke78ui9/Sample-Code-For-Swagger/tree/master/swagger-aspnetmvc-2015"
    target="_blank"
    title="setup swagger ui to aspnet "
    rel="noopener"
    >Code</a
  >
  mentioned in this blog.
</p>


This walkthrough tutorial is about how to set up Swagger with ASP.NET MVC API by using Visual Studio 2015, also provides steps ofhow to customize the swagger UI.

How to Setup and Customize Swagger with ASP.NET MVC


<p>
  Every company need a backend-office system, either SCM, ERP and others. You
  can build everything from scratch or start from something already exist to
  save your time. Here, I tried to provide list of site provide Intranet
  functions will good content.
</p>
<ol>
  <ol>
    <li>
      <a href="http://www.exoplatform.com/" target="_blank"
        >http://www.exoplatform.com</a
      >/(PHP)
    </li>
    <li>
      <a href="http://openatrium.com/#!/" target="_blank"
        >http://openatrium.com/#!/</a
      >(PHP)
    </li>
    <li>
      <a href="https://www.getpantheon.com/" target="_blank"
        >https://www.getpantheon.com/</a
      >(PHP)
    </li>
    <li>
      <a href="http://www.composite.net/" target="_blank"
        >http://www.composite.net/ (ASP.NET Razor, Web Forms, MVC)</a
      >
    </li>
    <li>
      <a href="http://www.acquia.com/Drupal-7" target="_blank"
        >http://www.acquia.com/Drupal-7</a
      >(PHP)
    </li>
    <li>
      <a href="http://www.bettercms.com/" target="_blank"
        >http://www.bettercms.com/ (ASP.Net MVC platform)</a
      >
    </li>
    <li>
      <a href="http://www.kentico.com/" target="_blank"
        >http://www.kentico.com/ (ASP.NET platform)</a
      >
    </li>
    <li>
      <a href="http://www.lemoon.com/" target="_blank"
        >http://www.lemoon.com/ (ASP.NET platform)</a
      >
    </li>
    <li>
      <a href="https://www.mojoportal.com/" target="_blank"
        >https://www.mojoportal.com/ (ASP.NET, featuring Blogs, Forums, Event
        Calendar, Newsletter, Maps, ecommerce and more.)</a
      >
    </li>
    <li>
      <a href="http://monox.mono-software.com" target="_blank"
        >http://monox.mono-software.com/ (CMS and Social Networking Platform for
        ASP.NET)</a
      >
    </li>
    <li>
      h<a href="http://www.orchardproject.net/" target="_blank"
        >ttp://www.orchardproject.net/ (Orchard CMS is a free, open source
        content management system that allows users to rapidly create web sites
        on the Microsoft ASP.NET platform.)</a
      >
    </li>
    <li>
      <a href="http://virtocommerce.com/" target="_blank"
        >http://virtocommerce.com/ (Virto Commerce is based on .NET 4.5 with
        extensive use of MVC, IoC, EF, Azure and many other cutting edge
        technologies.)</a
      >
    </li>
    <li>
      <a
        href="http://office.microsoft.com/en-us/sharepoint/microsoft-sharepoint-online-collaboration-and-management-software-FX103789366.aspx"
        target="_blank"
        >sharepoint online</a
      >(Sharepoint)
    </li>
  </ol>
</ol>
<h2>getpantheon</h2>
<p>
  If you're start building new system, want to flexiable to customize the site
  and possible to use any programming language, I highly recommand&nbsp;<a
    href="https://dashboard.getpantheon.com/"
    target="_blank"
    >getPantheon</a
  >.&nbsp;
</p>
<ul>
  <li>
    Use open source "OpenAtrium", contains basic login, security, role, media
    &amp; content management.
  </li>
  <li>Fee to try it out.</li>
  <li>Contains development, as DEV, Test, Prod Enviroment.&nbsp;</li>
  <li>Deploy code via SFTP or Git</li>
  <li>Able to export Database and Files</li>
  <li>You don't need to hander WebServer.</li>
</ul>
<p>
  If you have money,&nbsp;<a
    href="https://dashboard.getpantheon.com/"
    target="_blank"
    >getPantheon</a
  >&nbsp;could let your start really quick to create a admin. The programming
  language is PHP.
</p>
<p>
  <img
    src="https://res.cloudinary.com/dmwrakaup/image/upload/v1409096749/mudwavz3g1qdmuhq7zkj.png"
    alt=""
    width="317"
    height="274"
  />
</p>
<p>&nbsp;</p>
<p>
  <a href="https://dashboard.getpantheon.com/" target="_blank">getPantheon</a>'s
  DEV, TEST, PROD enviroment.
</p>
<p>
  <img
    src="https://res.cloudinary.com/dmwrakaup/image/upload/v1409270535/esncffv6vvtpqat6mgsz.png"
    alt=""
    width="322"
    height="214"
  />
</p>
<h2>orchardproject</h2>
<p>
  <a
    style="font-family: 'Segoe UI'; font-size: 13px; line-height: 21px"
    href="http://www.orchardproject.net/"
    target="_blank"
    >orchardproject</a
  >&nbsp;is good intranet too, using ASP.NET MVC.&nbsp;
</p>
<p>
  <img
    src="https://res.cloudinary.com/dmwrakaup/image/upload/v1409121479/ainvoqpagqcukngkjmsm.png"
    alt=""
    width="424"
    height="190"
  />
</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>
  There are just so many different of system out there you can use for your
  intranet system. I'm focus of comparing OpenAtrium, Sharepoint and Orchard.
</p>
<div class="table-responsive">
  <table class="table">
    <colgroup>
      <col width="143" />
      <col width="100" />
      <col width="260" />
      <col width="260" />
      <col width="286" />
      <col width="103" />
      <col width="233" />
    </colgroup>
    <tbody>
      <tr style="height: 21px">
        <td
          style="
            padding: 2px 3px;
            font-size: 120%;
            font-weight: bold;
            vertical-align: top;
          "
          data-sheets-value='[null,2,"name"]'
        >
          name
        </td>
        <td
          style="
            padding: 2px 3px;
            font-size: 120%;
            font-weight: bold;
            vertical-align: top;
          "
          data-sheets-value='[null,2,"Language"]'
        >
          Language
        </td>
        <td
          style="
            padding: 2px 3px;
            font-size: 120%;
            font-weight: bold;
            vertical-align: top;
          "
          data-sheets-value='[null,2,"features"]'
        >
          features
        </td>
        <td
          style="
            padding: 2px 3px;
            font-size: 120%;
            font-weight: bold;
            vertical-align: top;
          "
          data-sheets-value='[null,2,"Pros"]'
        >
          Pros
        </td>
        <td
          style="
            padding: 2px 3px;
            font-size: 120%;
            font-weight: bold;
            vertical-align: top;
          "
          data-sheets-value='[null,2,"Cons"]'
        >
          Cons
        </td>
        <td
          style="
            padding: 2px 3px;
            font-size: 120%;
            font-weight: bold;
            vertical-align: top;
          "
          data-sheets-value='[null,2,"Customize"]'
        >
          Customize App
        </td>
        <td
          style="
            padding: 2px 3px;
            font-size: 120%;
            font-weight: bold;
            vertical-align: top;
          "
          data-sheets-value='[null,2,"Price"]'
        >
          Price
        </td>
      </tr>
      <tr style="height: 21px">
        <td
          style="
            padding: 2px 3px;
            vertical-align: top;
            background-color: #d0e0e3;
          "
          data-sheets-value='[null,2,"OpenAtrium"]'
        >
          OpenAtrium
        </td>
        <td
          style="padding: 2px 3px; vertical-align: top"
          data-sheets-value='[null,2,"PHP"]'
        >
          PHP, Apache
        </td>
        <td
          style="padding: 2px 3px; vertical-align: top"
          data-sheets-value='[null,2,"Just a source code provide lots modules, content management"]'
        >
          Just a source code provide lots modules, content management
        </td>
        <td
          style="padding: 2px 3px; vertical-align: top"
          data-sheets-value='[null,2,"After download OpenAtrium the rest of development you doing you self, could be Pros or Cons"]'
        >
          <p>1. Good Looking UI.</p>
          <p>2. Lots of features.</p>
          <p>3. Greate Communite Support</p>
          <p>4. PHP, largest language using at internet</p>
          <p>5. Able to manage the application life cycle.</p>
          <p>6. It's FREE</p>
        </td>
        <td
          style="padding: 2px 3px; vertical-align: top"
          data-sheets-value='[null,2,"You need to host the site your self, need to learn, PHP, Apache server, "]'
        >
          <p>
            1. Need to setup everything for development. Deploy, Source Control,
            Different enviroment setup
          </p>
          <p>2. Take time to deploy your time and manage the process.</p>
          <p>3. Management File, Database</p>
        </td>
        <td
          style="padding: 2px 3px; vertical-align: top"
          data-sheets-value='[null,2,"very frexiable"]'
        >
          very frexiable
        </td>
        <td
          style="padding: 2px 3px; vertical-align: top"
          data-sheets-value='[null,2,"free"]'
        >
          free
        </td>
      </tr>
      <tr style="height: 21px">
        <td
          style="
            padding: 2px 3px;
            vertical-align: top;
            background-color: #d0e0e3;
          "
          data-sheets-value='[null,2,"Pantheon"]'
        >
          Pantheon
        </td>
        <td
          style="padding: 2px 3px; vertical-align: top"
          data-sheets-value='[null,2,"PHP"]'
        >
          PHP, Apache
        </td>
        <td
          style="padding: 2px 3px; vertical-align: top"
          data-sheets-value='[null,2,"Provide hosting OpenAtrium up to 3 site for free.\nUse SFTP, git for development and deploy\nInclude provide, DEV, TEST, Production Enviroment"]'
        >
          Provide hosting OpenAtrium up to 3 site for free.<br />Use SFTP, git
          for development and deploy<br />Include provide, DEV, TEST, Production
          Enviroment
        </td>
        <td
          style="padding: 2px 3px; vertical-align: top"
          data-sheets-value='[null,2,"install and hosting OpenAtrium Online"]'
        >
          <p>1. Everything Above</p>
          <p>2. Deploy your code right now with DEV, TEST.PROD enviroment.</p>
          <p>
            3. Have to pay but everything you need to develop your site is in
            it.
          </p>
        </td>
        <td
          style="padding: 2px 3px; vertical-align: top"
          data-sheets-value='[null,2,"need to learn PHP"]'
        >
          1. Need to pay
        </td>
        <td
          style="padding: 2px 3px; vertical-align: top"
          data-sheets-value='[null,2,"very frexiable"]'
        >
          very frexiable
        </td>
        <td
          style="padding: 2px 3px; vertical-align: top"
          data-sheets-value='[null,2,"need to pay if want to more features"]'
        >
          need to pay if want to more features
        </td>
      </tr>
      <tr style="height: 21px">
        <td
          style="
            padding: 2px 3px;
            vertical-align: top;
            background-color: #d0e0e3;
          "
          data-sheets-value='[null,2,"Sharepoint2013"]'
        >
          Sharepoint2013
        </td>
        <td
          style="padding: 2px 3px; vertical-align: top"
          data-sheets-value='[null,2,"Microsoft"]'
        >
          Microsoft
        </td>
        <td
          style="padding: 2px 3px; vertical-align: top"
          data-sheets-value='[null,2,"Social, Content Management, Workflow, sharing, WorkManagement and more"]'
        >
          Social, Content Management, Workflow, sharing, WorkManagement and more
        </td>
        <td
          style="padding: 2px 3px; vertical-align: top"
          data-sheets-value='[null,2,"customize sharepoint"]'
        >
          <p>1. Able to customize sharepoint</p>
          <p>2. Choose your server</p>
        </td>
        <td
          style="padding: 2px 3px; vertical-align: top"
          data-sheets-value='[null,2,"need to setup sharepoint server, cost more money"]'
        >
          1. You have to setup server for sharepoint
        </td>
        <td
          style="padding: 2px 3px; vertical-align: top"
          data-sheets-value='[null,2,"frexiable"]'
        >
          frexiable
        </td>
        <td
          style="padding: 2px 3px; vertical-align: top"
          data-sheets-value='[null,2,"linsence, could be expensive"]'
        >
          linsence, could be expensive
        </td>
      </tr>
      <tr style="height: 21px">
        <td
          style="
            padding: 2px 3px;
            vertical-align: top;
            background-color: #d0e0e3;
          "
          data-sheets-value='[null,2,"Sharepoint2013Online"]'
        >
          Sharepoint2013Online
        </td>
        <td
          style="padding: 2px 3px; vertical-align: top"
          data-sheets-value='[null,2,"Microsoft"]'
        >
          Microsoft
        </td>
        <td
          style="padding: 2px 3px; vertical-align: top"
          data-sheets-value='[null,2,"Social, Content Management, Workflow, sharing, WorkManagement and more"]'
        >
          Social, Content Management, Workflow, sharing, WorkManagement and more
        </td>
        <td
          style="padding: 2px 3px; vertical-align: top"
          data-sheets-value='[null,2,"min $5 user/month, use sharepoint server online"]'
        >
          min $5 user/month, use sharepoint server online
        </td>
        <td
          style="padding: 2px 3px; vertical-align: top"
          data-sheets-value='[null,2,"not frexiable to customize"]'
        >
          not frexiable to customize
        </td>
        <td
          style="padding: 2px 3px; vertical-align: top"
          data-sheets-value='[null,2,"not very frexiable"]'
        >
          not very frexiable
        </td>
        <td
          style="padding: 2px 3px; vertical-align: top"
          data-sheets-value='[null,2,"min $5/user/month"]'
        >
          min $5/user/month
        </td>
      </tr>
      <tr style="height: 21px">
        <td
          style="
            padding: 2px 3px;
            vertical-align: top;
            background-color: #d0e0e3;
          "
          data-sheets-value='[null,2,"Orchard1.8.0"]'
        >
          Orchard1.8.0
        </td>
        <td
          style="padding: 2px 3px; vertical-align: top"
          data-sheets-value='[null,2,"ASP.NET MVC"]'
        >
          C#, ASP.NET MVC
        </td>
        <td
          style="padding: 2px 3px; vertical-align: top"
          data-sheets-value='[null,2,"Content Management"]'
        >
          Content Management
        </td>
        <td
          style="padding: 2px 3px; vertical-align: top"
          data-sheets-value='[null,2,"similar with OpenAtrium, only thing need to learn is how to use orchard."]'
        >
          similar with OpenAtrium, only thing need to learn is how to use
          orchard.
        </td>
        <td
          style="padding: 2px 3px; vertical-align: top"
          data-sheets-value='[null,2,"have to host your self"]'
        >
          have to host your self
        </td>
        <td
          style="padding: 2px 3px; vertical-align: top"
          data-sheets-value='[null,2,"very frexiable"]'
        >
          very frexiable
        </td>
        <td
          style="padding: 2px 3px; vertical-align: top"
          data-sheets-value='[null,2,"free, modules need to buy"]'
        >
          free, modules need to buy
        </td>
      </tr>
    </tbody>
  </table>
</div>
<p>&nbsp;</p>


Every company need a backend-office system, either SCM, ERP and others. You can build everything from scratch or start fromsomething already exist to save your time. Here, I tried to provide list of site provide Intranet functions will good content.

13 Intranet Application for Use By Back-end Office System


<h3>Example of Log WebAPI MVC3 Controller</h3>
<p>
  Example code of logging every request/response/exception when access to
  ASP.NET MVC 3 controller.
</p>
<pre class="language-csharp"><code>
public class LogFilterAttribute : ActionFilterAttribute
    {
        ILog _log;

        public LogFilterAttribute()
            : this(null)
        {
        }
		
        public LogFilterAttribute(ILog log)
        {
			// TODO: define default ILog Service
            //_log = log ?? SomekindOfDefaultLogService()
        }
		
        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            string controllerNamespace = string.Format("{0} {1}Controller.{2} {3}",
                filterContext.HttpContext.Request.HttpMethod,
                filterContext.ActionDescriptor.ControllerDescriptor.ControllerName,
                filterContext.ActionDescriptor.ActionName, "Request");
            var requestObject = new
            {
                Request = new
                {
                    Parameters = JsonConvert.SerializeObject(filterContext.ActionParameters),
                    Url = filterContext.HttpContext.Request.RawUrl,
                    Headers = JsonConvert.SerializeObject(filterContext.HttpContext.Request.Headers)
                }
            };

            _log.Save(controllerNamespace, JsonConvert.SerializeObject(requestObject));

            base.OnActionExecuting(filterContext);
        }

        public override void OnActionExecuted(ActionExecutedContext filterContext)
        {
            string controllerNamespace = string.Format("{0}Controller.{1} {2}", filterContext.ActionDescriptor.ControllerDescriptor.ControllerName, filterContext.ActionDescriptor.ActionName, "Response");

            var reponseObject = new
            {
                Response = new
                {
                    StatusCode = filterContext.HttpContext.Response.StatusCode,
                    StatusDescription = filterContext.HttpContext.Response.StatusDescription,
                    Exception = JsonConvert.SerializeObject(filterContext.Exception)
                }
            };

            if (filterContext.Exception != null)
            {
                controllerNamespace = controllerNamespace + " Exception";
            }

            _log.Save(controllerNamespace, JsonConvert.SerializeObject(reponseObject));

            base.OnActionExecuted(filterContext);
        }
    }
</code></pre>


EXAMPLE OF LOG WEBAPI MVC3 CONTROLLERExample code of logging every request/response/exception when access to ASP.NET MVC 3 controller.

How to Log All WebAPI Request Response at ASP.NET MVC


<h4>Only showing Play Icon for youtube video</h4>
<p>
  If you don't like youtube default setting as, title, youtube mark, just append
  following parameters to your youtube url and your embed youtube will looks
  like following.
</p>
<p><code>?showinfo=0&amp;color=white&amp;autohide=1</code></p>
<pre
  class="language-javascript"
><code>http://www.youtube.com/embed/9tzyJEwO9Os?showinfo=0&amp;color=white&amp;autohide=1
</code></pre>
<p>
  <iframe
    src="http://www.youtube.com/embed/9tzyJEwO9Os?showinfo=0&amp;color=white&amp;autohide=1"
    width="300"
    height="200"
    frameborder="0"
    allowfullscreen=""
  ></iframe>
</p>
<p>if you want to check the rest of the parameters.&nbsp;</p>
<p>
  <a
    href="https://developers.google.com/youtube/player_parameters"
    target="_blank"
    >&nbsp;YouTube Embedded Players and Player Parameters</a
  >
</p>
<p>&nbsp;</p>
<h4>vimeo video</h4>
<p>
  Following is another video site, vimeo's default view. Good thing for vimeo is
  you can easily change the play icon color like following.
</p>
<pre
  class="language-javascript"
><code>&lt;iframe src="http://player.vimeo.com/video/108883478?title=0&amp;byline=0&amp;portrait=0&amp;color=a89767" width="300" height="128" frameborder="0" allowfullscreen=""&gt; </code></pre>
<p>&nbsp;</p>
<p>
  <iframe
    src="http://player.vimeo.com/video/53755097?title=0&amp;byline=0&amp;portrait=0&amp;color=028482"
    width="300"
    height="225"
    frameborder="0"
    allowfullscreen=""
  ></iframe>
</p>
<p>&nbsp;</p>
<h4>Load youtube iFrame from javascript</h4>
<p>
  <small
    >from
    http://stackoverflow.com/questions/18220209/load-youtube-video-listen-to-onplayerstatechange</small
  >
</p>
<pre class="language-javascript">
// Load API asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '220',
        width: '300',
        videoId: '9tzyJEwO9Os',
        playerVars: {'showinfo': 0, 'color': 'white', 'autohide': 1},
        events: {'onStateChange': onPlayerStateChange}
    });
}

function onPlayerStateChange(event) {    
    if(event.data === 0) {          
        hideVideo();
    }
}

$("#link").click(function(){
    $('#player').show(); // show player
    player.playVideo(); // begin playback
});
</pre>


How to Embedded Video on Your Site


<p>&nbsp;</p>
<p>11 tools for responsive UI.</p>
<ol>
  <li>
    <a href="http://www.browserstack.com/responsive" target="_blank"
      >http://www.browserstack.com/responsive</a
    >
    <p>
      Best tool! Lots of variety testing enviroment.Altought have to paid, but
      it's worth.
    </p>
  </li>
  <li>
    <a href="http://www.studiopress.com/responsive/" target="_blank"
      >http://www.studiopress.com/responsive/</a
    >
  </li>
  <li>
    <a href="http://responsivetest.net/" target="_blank"
      >http://responsivetest.net/</a
    >
  </li>
  <li>
    <a
      href="http://responsivedesignchecker.com/getbootstrap.com/"
      target="_blank"
      >http://responsivedesignchecker.com/getbootstrap.com/</a
    >
  </li>
  <li>
    <a href="http://lab.maltewassermann.com/viewport-resizer/" target="_blank"
      >http://lab.maltewassermann.com/viewport-resizer/</a
    >
  </li>
  <li>
    <a href="http://quirktools.com/screenfly/" target="_blank"
      >http://quirktools.com/screenfly/</a
    >
  </li>
  <li>
    <a
      href="http://www.vandelaydesign.com/responsive-web-design-testing/"
      target="_blank"
      >10 Helpful Resources for Testing Responsive Web Design</a
    >
  </li>
  <li>
    <a href="http://responsive.is/" target="_blank">http://responsive.is/</a>
  </li>
  <li>
    <a
      href="https://chrome.google.com/webstore/detail/responsive-web-design-tes/objclahbaimlfnbjdeobicmmlnbhamkg?hl=en"
      target="_blank"
      >Chrome Extension: Responsive Web Design Tester</a
    >
  </li>
  <li>
    <a href="http://www.hongkiat.com/blog/rwd-tools/" target="_blank"
      >50 Useful Responsive Web Design Tools For Designers</a
    >
  </li>
  <li>
    <a
      href="http://bradfrost.github.io/this-is-responsive/resources.html"
      target="_blank"
      >Responsive Resources</a
    >
  </li>
</ol>


This blog, I'm trying to list few UI framework if you choose the

Category WebAPI

How to Setup and Customize Swagger with ASP.NET MVC

13 Intranet Application for Use By Back-end Office System

How to Log All WebAPI Request Response at ASP.NET MVC

How to Embedded Video on Your Site

Few Useful Links About How to Test Responsive UI

Few Useful Links for Responsive Web UI Frameworks