Geek Answers Handbook

MiniProfiler: how do I create an AngularJS + WebAPI application?

Cross-hosted in the MiniProfiler community .

I am trying to run MiniProfiler on the current stack. I think I'm mostly set up, but I skipped the UI approach and would like to recommend the best way to proceed.

Current stack

  • SQL for the database (including MiniProfiler tables)
  • Ef 6
  • WebAPI 2 API Application
  • Angular 1.x. application for the user interface (a separate application, without MVC support). At the moment, I think it is 1.5.x.

So, the current method is RenderIncludes()not available to me.

What is the best way to include JS files and configure them to extract information from SQL Server repository? I know that the files are included in the user interface repositories , but I have not seen the documents for explicit configuration.

What I tried so far - web API application

  • Installed packages MiniProfilerand MiniProfiler.EF6.

Web.Config - Added handler

(not sure if this is necessary):

<add name="MiniProfiler" path="mini-profiler-resources/*" verb="*" type="System.Web.Routing.UrlRoutingModule" resourceType="Unspecified" preCondition="integratedMode" />

Added CORS filter to display MiniProfiler identifiers in my client application:

public class AddMiniProfilerCORSHeaderFilter : ActionFilterAttribute
{
    public override void OnActionExecuted(HttpActionExecutedContext actionExecutedContext)
    {
        actionExecutedContext.Response.Headers.Add("Access-Control-Expose-Headers", "X-MiniProfiler-Ids");
    }
}

Add this filter as part of the launch:

config.Filters.Add(new AddMiniProfilerCORSHeaderFilter());`

In Global.asax added to Application_Start ():

var connectionString = ConfigurationReader.GetConnectionString(Constants.ConfigSettings.CONNECTION_STRING_NAME);

MiniProfiler.Settings.Storage = new SqlServerStorage(connectionString);
MiniProfilerEF6.Initialize();

Update start and end queries:

   protected void Application_BeginRequest()
    {
        if (Request.IsLocal || ConfigurationReader.GetAppSetting(Constants.ConfigSettings.USE_PROFILER, false))
        {
            var sessionId = Guid.NewGuid().ToString();
            MiniProfiler.Start(sessionId);
        }
    }

    protected void Application_EndRequest()
    {
        MiniProfiler.Stop();
    }

What I have tried so far is the (Angular) App client

  • Compress UI files from Github Repo
  • Copy the user interface directory to my project

CSS Link:

<link rel="stylesheet" href="js/lib/miniprofiler/includes.css" />

JavaScript

  <script async type="text/javascript" 
    id="mini-profiler" 
    src="js/lib/miniprofiler/includes.js?v=1.0.0.0" 
    data-current-id="" 
    data-path="https://localhost:44378/api/profiler/" 
    data-children="true" 
    data-ids="" 
    data-version="1.0.0.0" 
    data-controls="true" 
    data-start-hidden="false" 
    data-trivial-milliseconds="5">
  </script>

, , WebAPI . , ( ), , .

+4
1

RenderIncludes , <script> . UI Repo include.partial.html :

<script async type="text/javascript" id="mini-profiler" 
        src="{path}includes.js?v={version}" data-version="{version}" 
        data-path="{path}" data-current-id="{currentId}" 
        data-ids="{ids}" data-position="{position}" 
        data-trivial="{showTrivial}" data-children="{showChildren}" 
        data-max-traces="{maxTracesToShow}" data-controls="{showControls}"
        data-authorized="{authorized}" data-toggle-shortcut="{toggleShortcut}" 
        data-start-hidden="{startHidden}" data-trivial-milliseconds="{trivialMilliseconds}">
</script>

Javascript, .

RenderIncludes . :

  • ,
  • , .
  • , , script, include.partial.html
  • <script>

, RenderIncludes, , script , , , <script> .

Id :

var ids = authorized 
            ? MiniProfiler.Settings.Storage.GetUnviewedIds(profiler.User) 
            : new List<Guid>();
ids.Add(profiler.Id);

profiler - MiniProfiler ( .

, , , , script /mini -profiler-resources/results ( id ). GetSingleProfilerResult(HttpContext context)

+1

More articles:


All Articles