Accessing web site running in Visual Studio 2017 using an alternative hostname

Assumptions:

• Running in Visual Studio 2017
• Running an application on port 8888
• Url used to access the application is http://localhost:8888

If you want to access the web site using http://somenamehere:8888 you can do this by doing the following.

1. Open your .vs/config/applicationhost.config file in a text editor
2. Find the binding for your application.
   <binding protocol="http" bindingInformation="*:8888:localhost" />
3. In the same <bindings> section, add another <binding>
   <binding protocol="http" bindingInformation="*:8888:" />
4. Optional: If you are using https you will need to do the same. The key is that you match the ports.

You should be able to launch your web site in Visual Studio (Control-F5, etc). This will bring it up as it always have.

Now you need to hack your dns so that it can resolve your new made up hostname. In this example, it is somenamehere. The easiest way to do this is to open up your hosts file (C:\Windows\System32\drivers\etc\hosts) in a text editor and add the following line to the bottom of it.

127.0.0.1   somenamehere

You should now be able to ping that hostname and see that 127.0.0.1 is responding.

Now open up the browser and go to http://somenamehere:8888 and you should get your application again.

NOTE: If VS2017 gives you any issues, it may be helpful to run it as administrator.

Changing Styles for print media query

I had a situation where I needed to change what would be printed based on what button on the web page the user clicked. Here is an easy way to do that.



<style type="text/css" media="print" id="printStyles">
</style>

<script>
    function printOptionA() {
        var styles = "#optionA {display: block;} #optionB {display:none;}";
        $('#printStyles').text(styles);
        window.print();
    }

 function printOptionB() {
        var styles = "#optionB {display: block;} #optionA {display:none;}";
        $('#printStyles').text(styles);
        window.print();
    }
</script>

The two functions can be called from button, hyperlinks, etc.

If the user just does a Control-P to print in the browser it will print the page as expected (neither of these changes). There is no need to undo these changes after printing.

Changing the first line preview in email clients

In many email clients it will now show you the first line of the email body before you open it. If you are a developer creating this email sometimes it shows things like a url of a header image instead of something more useful. The good news is you can trick the email clients into displaying whatever you want. Just make sure the first thing in your body tag (can be after the style tag, etc) is the following:

<!-- HIDDEN PREHEADER TEXT -->

<div style="display: none; mso-hide: all; width: 0px; height: 0px; max-width: 0px; max-height: 0px; font-size: 0px; line-height: 0px;">

    Whatever you want to see in the preview here

</div>