http://channel9.msdn.com/Events/Visual-Studio/Connect-event-2014/810
Recently faced an issue where a client had a memory allocation issue on one of their servers. I’m not going to deep dive into any of these, but here were some of the tools I used in tracking down the culprit:
In a little more detail:
Below are notes – mostly for me – on trying to get a KnockoutJS/MVVM/EF6 going with an existing database. I’m not going to presume that what I attempted is impossible, but for now I’m stepping back from MVVM and going to MVC/EF6. Here’s why.
I’ll cut things short and give it to you straight. You’ll find most of the webAPI samples you see out there are code-first. I think there’s a reason for that. For MVC applications, maybe a straight up EF6 model, database-first, is the way to go – with Linq to SQL. There it is, for now.
Here’s the general pattern I as going for: (Thanks Mike Wasson, you rock!)
In more detail – we’d like a wire format like the following. This works, just great, if you follow Mike’s article below explicitly, and use POCO code-first approach. It bogs down, as we’ll see, with db-first.
In review: Knockout.js is a Javascript library that makes it easy to bind HTML controls to data. Knockout.js uses the Model-View-ViewModel (MVVM) pattern.
The view is data-bound to the view-model. Updates to the view-model are automatically reflected in the view. The view-model also gets events from the view, such as button clicks, and performs operations on the model, such as creating an order.
Our goals:
To do this I tried the following steps:
You’ll see the following:
Go through ProductType.cs and copy and paste it to the main Models folder. Then go nuts on it. Add a reference to System.ComponentModel.DataAnnotations, and add some attributes. Make the ID fields so they don’t scaffold; add some Required attributes, etc.
There’s all kinds of cool things you could do above. Add CustomValidationAttributes, link to enums for dropdown lists, data type attributes, rangeattributes, regular expression and string length validators… the world is your oyster. Side note – I saw a ref to System.ComponentModel.DataAnnotations in the project, but couldn’t refer to it in the class. Turns out, when I chose the SPA template as my starting point, it was pointed to an older .NET framework version – .NET 4.5 versus .NET 4.5.1. Big difference!
Then go into App_Start and add events using Entity Framework for the Product class.
Build. You’ll need reflection to be up to date for the next step.
Now, right click on Controllers, and select Web API 2 Controller with actions, using Entity Framework.
In the next screen enter a good logical name for your Controller. Here I’m shortening the table to Product. Below I clicked on the new data context button – but don’t do this, just use the context you used with EntityFramework that’s already in your web.config.
Build it in your browser. Log in, and click on the API menu item. Look at the snazziness! Your new Product API class is available and – does it serve up data?
Punch in {yoursitename}/api/Product, and voila – hot steaming cup of JSON! (And, turns out, not so much – when I added new entities to the model, it returned EVERYTHING.)
Trying to create a model initially didn’t show asynchronous methods available, which I favor. EntityFramework didn’t show in NuGet. However, running Install-Package EntityFramework in PackageManager Console did the trick. Now I see the following:
However, I’m still not getting reliable results. WebAPI, you’re out of time… for now. Sorry, would have been terrific if it was truly code-first.
So, very frustrated. I think I’m trying to beat a square peg into a round hole. I’m getting [] JSON responses on my web services. Code that SHOULD work doesn’t; I honestly think WebAPI is meant for code-first/POCO approaches. There’s LOTS of examples, some very elaborate, of getting WebAPI to work – I’m thinking in particular this one and this one – without an existing db. But EF generated entities just aren’t working for us with a db-first approach. I’m running out of time; bagging it, and going with what I do know works – EF6, MVC generated controllers, so long MVVM/KnockoutJS. Simply put I don’t think we can guarantee delivery in the time the client demands at this point.
Let’s start with a great quote from TR Roosevelt – a man who knew the value of a little drama:
It is not the critic who counts; not the man who points out how the strong man stumbles, or where the doer of deeds could have done them better. The credit belongs to the man who is actually in the arena, whose face is marred by dust and sweat and blood; who strives valiantly; who errs, who comes short again and again, because there is no effort without error and shortcoming; but who does actually strive to do the deeds; who knows great enthusiasms, the great devotions; who spends himself in a worthy cause; who at the best knows in the end the triumph of high achievement, and who at the worst, if he fails, at least fails while daring greatly, so that his place shall never be with those cold and timid souls who neither know victory nor defeat.
Ties in well with Plato’s “Be kind, for everyone you meet is fighting a great battle”, no?
Kind of a jump but let’s skip from the bloody arena to the even bloodier arena of exception handling. Scott H has been very vocal in how unfair it is on the amount of attention ELMAH hasn’t gotten. And the excellent CodingHorror site (GOD bless you sirs!) notes the compelling arguments behind exception driven development – where teams use exception logs as a defacto to-do list, checking them almost hourly:
Note that Scott’s blog, normally oh-so-reliable, only shows part of the steps you’ll need to get Elmah up and running for your app. Microsoft (in a rare exception) actually has a good post on start-to-finish implementation of Elmah.
Basically we’ll be following these steps:
Let’s get started. Go into NuGet and select ELMAH:
Let’s check our Web.config. What changes do we see?
A new HTTP handler has been configured in your application for consulting the
error log and its feeds. It is reachable at elmah.axd under your application
root. If, for example, your application is deployed at http://www.example.com,
the URL for ELMAH would be http://www.example.com/elmah.axd. You can, of
course, change this path in your application’s configuration file.
If I was to look in packages.config I see the following two lines (and a new “Elmah” node under References):
<package
id=“elmah“
version=“1.2.2“
targetFramework=“net45“ />
<package
id=“elmah.corelibrary“
version=“1.2.2“
targetFramework=“net45“ />
So far so good. Let’s get this actually hooked up to our app. I pulled the latest source code from the code site for Google and opened up SqlServer.sql, and ran the footer of the script on my local database instance. This created one table and three sprocs – nice and neat:
Now I add the following to web.config:
<configuration>
<configSections>
<!– For more information on Entity Framework configuration, visit http://go.microsoft.com/fwlink/?LinkID=237468 –>
<section
name=“entityFramework“
type=“System.Data.Entity.Internal.ConfigFile.EntityFrameworkSection, EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089“
requirePermission=“false“ />
<sectionGroup
name=“elmah“>
<section
name=“security“
requirePermission=“false“
type=“Elmah.SecuritySectionHandler, Elmah“/>
<section
name=“errorLog“
requirePermission=“false“
type=“Elmah.ErrorLogSectionHandler, Elmah“ />
<section
name=“errorMail“
requirePermission=“false“
type=“Elmah.ErrorMailSectionHandler, Elmah“ />
<section
name=“errorFilter“
requirePermission=“false“
type=“Elmah.ErrorFilterSectionHandler, Elmah“/>
</sectionGroup>
</configSections>
To the location path where I set up folder-level rolebased security, I added this node:
<!– AND lock down our exception logging page –>
<location
path=“elmah.axd“>
<system.web>
<authorization>
<allow
roles=“Admin“ />
<deny
users=“*“ />
</authorization>
</system.web>
</location>
… and right above system.web I added this node
<!– This must be on same level as <system.web> nod. NOTE – allowRemoteAccess means its visible remotely, a potential security risk
dev points to our database instance –>
<elmah>
<security
allowRemoteAccess=“1“ />
<errorLog
type=“Elmah.SqlErrorLog, Elmah“
connectionStringName=“dev“ />
<errorMail
from=“support.perceptive@microsoft.com”
to=“v-davhar@XXX.com”
subject=“Perceptive Site Runtime Error”
async=“true“ />
<!– to filter
<errorFilter>
<test>
<equal binding=”HttpStatusCode” value=”404″ type=”Int32″ />
</test>
</errorFilter> –>
</elmah>
<system.web>
Under <system.webserver> I added the following:
<system.webServer>
<validation
validateIntegratedModeConfiguration=“false“ />
<modules>
<remove
name=“FormsAuthenticationModule“ />
<add
name=“Elmah.ErrorLog“
type=“Elmah.ErrorLogModule, Elmah“
preCondition=“managedHandler“ />
<add
name=“Elmah.ErrorLog“
type=“Elmah.ErrorLogModule, Elmah“
preCondition=“managedHandler“ />
<add
name=“Elmah.ErrorMail“
type=“Elmah.ErrorMailModule“
preCondition=“managedHandler“ />
</modules>
<handlers>
<remove
name=“ExtensionlessUrlHandler-Integrated-4.0“ />
<remove
name=“OPTIONSVerbHandler“ />
<remove
name=“TRACEVerbHandler“ />
<add
name=“ExtensionlessUrlHandler-Integrated-4.0“
path=“*.“
verb=“*“
type=“System.Web.Handlers.TransferRequestHandler“
preCondition=“integratedMode,runtimeVersionv4.0“ />
<!– DH added the following –>
<add
name=“Elmah“
path=“elmah.axd“
verb=“POST,GET,HEAD“
type=“Elmah.ErrorLogPageFactory, Elmah“
preCondition=“integratedMode“ />
</handlers>
</system.webServer>
Above, if this was targeting an IIS6 webserver it would be under HttpHandlers and HttpModules.
I run the project and get a very … not too informative page. Let’s try to throw an error, shall we? Append a “/test” at the end of your elmah.axd call and then refresh – and you’ll see the following:
Clicking on the details gives us that treasured “yellow screen of death” that provides such awesome information in capturing and reproducing issues.
Let’s generate a few more just to be on the safe side. I add a few lines to my forms, one generating a DivideByZeroException within a try/catch block, the other straight up (where a naughty programmer forgot to wrap his logic in try/catch).
I get the above screen, the famed Yellow Screen of Death – and pointing the browser to elmah.axd gives me all the generated error messages. I can view them in the new ELMAH_Error table in SQL Server, and subscribe to it via a RSS feed. Very nifty!
Here’s the Catch logic I used to call the newer form of the elmah API:
catch(Exception ex)
{
//older API
//Elmah.ErrorLog.GetDefault(HttpContext.Current).Log(new Elmah.Error(ex));
//newer API
//This applies ELMAH filtering rules to exception, is subscription based (i.e. multi logger enabled)
Elmah.ErrorSignal.FromCurrentContext().Raise(ex);
}
Note that all we’ve done is trap application exceptions in one handy location. So, how do we trap these so the user is presented with a better, more friendly experience when the unexpected occurs?
Scott Mitchell put it best – “Every web application should have a custom error page. It provides a more professional-looking alternative to the Runtime Error YSOD, it is easy to create, and configuring the application to use the custom error page takes only a few moments.” Fair enough, and I WHOLEHEARTEDLY agree. So, how to add this to my app?
As my five year old would say, “Easy-peasy!” Add a new page to your application called “ErrorForm” – and link to a master page so its nice and spiffy. The code couldn’t be simpler:
<asp:Content
ID=”Content1″
ContentPlaceHolderID=”MainContent”
runat=”server”>
<h2>Oops!!!</h2>
<br
/><br
/>
<p>Looks like we’re having problems now with the application. Our site admins have been alerted: please follow the link below to go back to Home.</p>
<ul>
<li>
<asp:HyperLink
runat=”server”
ID=”lnkHome”
NavigateUrl=”~/Default.aspx”>Return to the homepage</asp:HyperLink>
</li>
</ul>
</asp:Content>
And add the following to your web.config:
<!– Remoteonly should be our default setting for local debugging on dev, Off to show explicit error messages outside of elmah –>
<customErrors
mode=“RemoteOnly“
defaultRedirect=“~/ErrorForm.aspx“ />
More information on error filtering – i.e. only throwing “top 20” errors like 404 etc – is found here: http://code.google.com/p/elmah/wiki/ErrorFiltering. There’s some great information on ELMAH here –
This doesn’t mean that TDD is a waste of time and test projects are a brake on development speed. In our project, we’re remarkably weak still in not having a test project – that’s basic, and I pity the fool that doesn’t have “time” to write unit tests! This will be addressed over the next two weeks – it’s like not taking the time to buckle a seat belt before getting in and driving. Regression errors are starting to drive us crazy, and TDD/BDD or some form of this is the standard answer. That being said – THANKS ELMAH for making my life that much easier and not having to write some custom library to capture and log errors. This kind of direct feedback from the user community is too valuable to let go to waste.
And, side note, I’m loving GIMP for image editing. Cheaper than Photoshop, and much more functional than Paint.NET or Picasa. Yay open source!!!
I’m embarrassed to say, I hadn’t visited the AJAX control toolkit suite for a while… with the advent of MVC and the abolition of Postbacks/session state (or so I thought), I was putting all that stuff in my rear view mirror. But, suffice to say, there are still times when you’re going to be using WebForms.
So, here’s some of my favorite controls from this suite – and why:
And there’s others – MultiHandleSlider (slider controls), NumericUpDown (up/down controls for month, integers), PasswordStrength(tests password strength), Rating (with star displays), ReorderList (drag and drop order of steps), TabContainer for tabs to organize contents – I’m not a fan of this one, should be separate pages to keep code neat).
The whole Webforms/SmartUI pattern – it’s more of an antipattern – is very dated and I’m running against the constraints of the model every day. But there are times when it’s called for… I’ll post on that later. If you are working in that space, I do love using these controls over paid-for heavyweight suites (looking at you, Telerik/infragistics/etc).