Five common mistakes for ASP.NET MVC accesing resources : css, js, images, ajax

This is a Razor /MVC5 variant of older post
http://msprogrammer.serviciipeweb.ro/2010/10/09/five-common-mistakes-for-asp-net-mvc-accesing-resources-css-js-images-ajax/

To have once for all the link to show to people, because too much makes the same error again and again. (From here – you can use ResolveUrl or Url.Content – it’s the same for me. I use ResolveUrl because I used first …)

Case 1 The image does not display

Please check you have the following :

 <img src="@Url.Content("~/Content/images/YOURIMAGE.jpg" )" alt="image" style="border:0" /> or 
 
<img src="~/Content/images/YOURIMAGE.jpg" alt="image" style="border:0" /> 

Case 2 The css does not show

Please check you have the following :

 @string.Format("<link href="{0}" type="text/css" rel="stylesheet" />", Url.Content("~/Content/your.css"))  

or

 <style type="text/css">
@import '@Url.Content("~/Content/your.css")';

</style>  
  <style type="text/css">
<link href='~/Content/your.css' type='text/css' rel='stylesheet' />

</style>  

Case 3 The js does not execute (undefined error)

3.1 Please check you have the following :

 <script type="text/javascript" src="@Url.Content("~/Scripts/yourjs.js")"></script> 

or

 <script type="text/javascript" src="~/Scripts/yourjs.js"></script> 

This should be either in _Layout.cshtml, or in the scripts section

 @section scripts {   } 

in your .cshtml file.
3.2 please check in browser console ( press F12 ) for any javascript error that code may have

Case 4 The js does execute in .cshtml page, but did not execute under js file

Please check you DO NOT have the following @something in the js file. The js file is not interpreted by the same engine as cshtml, so can not interpret asp.net tags. Instead , add a parameter to your function for each @ variable that you have. Simple example : Let’s say in cshtml you have :

 <script type=”text/javascript”>

function Generate(){

window.open('@Url.Action(“About”)’);
}

</script> 

and you call Generate() from .cshtml file. Now you want the same in a .js file. The function Generate will have a parameter instead of Razor variable

 function Generate(url){  window.open(url); } 

and call like this from .cshtml file:

 Generate('@Url.Action("About")'); 

Case 5 The ajax request gives you a 404 error.

Please ensure that you have

 @Url.Content("~/path”) 

and not

 /path 

when you call the Ajax URL

Bonus 1: T4MVC , http://mvccontrib.codeplex.com/releases

Bonus 2: Edit the project file and put <MvcBuildViews>true</MvcBuildViews>

( short url: http://bit.ly/asp5Mistakes)

Developing an outlook helper–part 5 from 5–conclusions

Series

 

Developing Outlook helper – introduction

Developing Outlook helper-VBA macro

Developing Outlook helper-C#

Developing Outlook helper – javascript for Office 365

Developing Outlook helper – conclusions

As you see, the developing and testing the Outlook  simple application was made significantly and increasingly difficult . The start point also is more difficult.

Think now about a real application and his verticals also(  saving data / settings, logging, security / authorization , errors …)

What is relatively simple is the upgrade process that is simpler now (  did not mention, but involves just a re-deploy to Microsoft Store)

Another important thing : All the methods to create the application are available. This is beautiful and scaring ….

Developing an outlook helper–part 4 from 5–javascript / Office 365 project

Series

 

Developing Outlook helper – introduction

Developing Outlook helper-VBA macro

Developing Outlook helper-C#

Developing Outlook helper – javascript for Office 365

Developing Outlook helper – conclusions

Develop like it was 201x:

Read about Office Javascript API and try to understand the documentation – https://dev.office.com/docs/add-ins/develop/understanding-the-javascript-api-for-office . Then realize there are some samples where you can start: https://dev.outlook.com/Samples/Addins .

You find Hello World addin (https://github.com/jasonjoh/hello-world-addin) and decide to try it. Download to the PC . The files are

C:\Users\aignat\Downloads\hello-world-addin-master\hello-world-addin-master
.gitattributes
.gitignore
app
HelloWorld.xml
LICENSE.TXT
README.md
app\compose
app\content
app\images
app\read
app\scripts
app\compose\App.css
app\compose\App.js
app\compose\Home
app\compose\Home\Home.css
app\compose\Home\Home.html
app\compose\Home\Home.js
app\content\Office.css
app\images\Close.png
app\read\App.css
app\read\App.js
app\read\Home
app\read\Home\Home.css
app\read\Home\Home.html
app\read\Home\Home.js
app\scripts\jquery-1.9.1.js

You find eventually the code that reads the email data ( in the Home.js ) and displays data(in the Home.html)

You see that this line finds the email

var item = Office.cast.item.toItemRead(Office.context.mailbox.item);

You want to modify the  code. You do not have intellisense helpers, but just documentation.

Test like it was 201x:

SO you have now a bunch of files. How to test it? You cannot test with Outlook. You do not want to deploy to Microsoft store yet. It is testing, right?

You read again what it should be done from       Hello World addin (https://github.com/jasonjoh/hello-world-addin) – and now I am quoting

"

  1. Copy the app directory from the project to your web server.
  2. Open manifest.xml in a text editor and update all instances of https://<your web server> to the base URL of the directory on your web server where you deployed the app directory.
  3. Logon to Outlook Web Access. Click on the gear cog in the upper right corner of the page and click on Manage apps.
  4. On the Manage apps page, click on the ‘+’ icon, select Add from file. Browse to the manifest.xml file included in the project.
  5. Return to the Mail view in Outlook Web Access.
  6. To try the read mode functionality of the add-in, open any message and launch the HelloWorld app from the app bar.

“ – end quoting

So you need

  1. a https server  with FTP account to deploy files
  2. an Outlook 365 account

Once you have those, it is a simple process:

  1. Copy files to the https server.
  2. Goto Outlook 365 settings, load addon from HelloWorld.xml .
  3. Verify if all ok
  4. If not, unload the addon from Office 365.
  5. Modify the files to make the app .
  6. GOTO 1

Deploy like it was 201x:

Pass to the Microsoft Store to get a developer ID and deploy to their server the application.

Developing an outlook helper–part 3 from 5–C# project

Series

 

Developing Outlook helper – introduction

Developing Outlook helper-VBA macro

Developing Outlook helper-C#

Developing Outlook helper – javascript for Office 365

Developing Outlook helper – conclusions

Develop like it was  200x:

Start  Visual Studio. See that you do not have the project. Download the Office addon for VS that create the project. Find the Outlook project – that is a wizard and let you have some choices . Give a name and wait for Visual Studio to load all files.

Those are the files generated by VS2013 ( differs from version to version)

app.config
Properties
Resources
ThisAddIn.cs
ThisAddIn.Designer.cs
ThisAddIn.Designer.xml
FindInEmail.cs
FindInEmail.Designer.cs
FindInEmail.resx
FindInEmailIn.csproj
FindInEmailIn.csproj.user
FindInEmailIn.sln
FindInEmailIn_TemporaryKey.pfx
FindSettings.cs
FindSettings.Designer.cs
FindSettings.resx
.vs\FindInEmailIn
.vs\FindInEmailIn\v14
Properties\AssemblyInfo.cs
Properties\Resources.Designer.cs
Properties\Resources.resx
Properties\Settings.Designer.cs
Properties\Settings.settings

After a while, you realize that you want a button in the ribbon.  You will find eventually the http://www.visualstudioextensibility.com/ site where Carlos Quintero maintains various blog posts about that and understand how to add the ribbon button and how to intercept clock event . Then you wrote more or less the same code as in part 2 :

var m = Globals.ThisAddIn.Application.ActiveInspector().CurrentItem;
MailItem mi = m as MailItem;
if (mi == null)
      return;
//C# same code as in http://msprogrammer.serviciipeweb.ro/2017/01/30/developing-an-outlook-helperpart-2-from-5vba/ 

Test like it was 200x:

Press F5 to run the project. Outlook starts and loads the plugin. So now there are 2 resource hogs on your system: Outlook + Visual Studio. Set break point in VS . Open the email. Find the ribbon in Outlook. Press the button and debug.

Deploy like it was 200x:

Create a VS Setup project and pray

    1. user have the same .NET Framework version that you have developed with
    2. user have the same  Outlook version that you have developed

( There are solution for 1 and 2 to be integrated – but it requires some programming / settings)

Friday links 229

  1. 10 Free Add-ins For Microsoft Office that Improve Productivity
  2. blog.cleancoder.com/uncle-bob/2016/03/19/GivingUpOnTDD.html
  3. venturebeat.com/2016/03/20/why-indoor-location-tech-is-facing-an-uphill-battle/
  4. The Joel Test: 12 Steps to Better Code – Joel on Software
  5. https://segment.com/blog/the-deep-roots-of-js-fatigue/
  6. sethgodin.typepad.com/seths_blog/2016/03/what-are-you-competing-on.html
  7.  mperdeck/LINQtoCSV: Popular, easy to use library to read and write CSV files.
  8. DefinitelyTyped/jsnlog.d.ts at master · DefinitelyTyped/DefinitelyTyped
  9. Event processing at all scales with Reactive Extensions | Techdays 2014 the Netherlands | Channel 9
  10. Consider app.config remapping of assembly warning after upgrade with Nuget | The ASP.NET Forums
  11.  Legacy Code for Developers: Managing your Manager – NDepend
  12.  Docker Toolbox | Docker
  13. Build Lambda Expressions Dynamically – CodeProject
  14. Build Where Clause Dynamically in Linq – CodeProject
  15. Spying on Razor View Compilation
  16. Sinon Tutorial: JavaScript Testing with Mocks, Spies & Stubs
  17.  ClipX
  18. Immutability is not enough
  19. Microsoft/BotBuilder: The Microsoft Bot Builder SDK is one of three main components of the Microsoft Bot Framework. The Microsoft Bot Framework provides just what you need to build and connect intelligent bots that interact naturally wherever your users a
  20. Bot Framework Emulator
  21. Bot Framework 
  22.   evanw/thinscript: A low-level programming language inspired by TypeScript
  23. toddmotto/public-apis: A collective list of public JSON APIs for use in web development.
  24. Testing with mocha and jsdom ∙ Babel Starter Kit
  25. https://www.kriasoft.com/babel-starter-kit/recipes/testing-with-mocha-and-jsdom