pauldotknopf/JavaScriptViewEngine

Return View with "js-{auto}" question

Closed this issue · 2 comments

tysonnero commented

I was just wondering if you can explain the "js-{auto}" portion of this code

return View("js-{auto}", new GreetingViewModel { Greeting = greeting });

and the $"js-/statuscode{statusCode} in this code

return View($"js-/statuscode{statusCode}", await BuildState());

pauldotknopf commented

Sure.

The {auto} token is replace by the current path, plus the query string, i.e., /some/path?and=query. For most controllers/actions, you want to do it this way so that your client-application will always render on the server the same way.

However, there are some circumstances where you would want certain server requests to render certain clientside endpoints from your markup, regardless of what the requesting path is. Think exception pages, unauthorized pages, banned users, etc.

For the js-/statuscode{statusCode}, the client application (JavaScript) has a single endpoint that renders an error page, based off of the status code. If you have a 503, you will be passing the path /statuscode404 to the RenderView method for you to render (in JavaScript) the endpoint as you see fit. ASP.NET MVC will call that status controller, anytime a 404 (or exception) happens. What you have then, is as follows.

  • Server requests: /valid/path, client renders: /valid/path
  • Server requests: /exception/throw, client renders /statuspage500 for the /exception/thrown request
  • Server requests: /non/existent/page, cliient renders /statuspage404 for the /non/existent/page request.

You found that js-/statuscode{statusCode} example in the react-aspnet-boilerplate, so we are really talking about react-router here.

But, you can think about it easier without react. Basically, whatever you pass after js-, whether is be a system token {auto}, or a hardcoded value statuscode, this will be sent to the RenderView JavaScript method (path) parameter, for you to do as you wish.

ASP.NET MVC

return View("js-/somepath");

JavaScript

var RenderView = function (path, model, viewBag) {
    // path = '/somepath'
    return {
        html: "<html><head></head><body><p><strong>Model:</strong> " + JSON.stringify(model) + "</p><p><strong>ViewBag:</strong> " + JSON.stringify(viewBag) + "</p></body>",
        status: 200,
        redirect: null
    };
};

In the react-aspnet-boilerplate, we are passing that path to react-router to do server-side rendering.

  • 👍1
pauldotknopf commented

Closing this. Any other questions, feel free to open again.