Using @addTagHelper in ASP.NET Core WebAPI #1002

NiceStepUp · 2017-06-01T11:43:02Z

I am following this tutorial of "Microsoft.AspNetCore.SpaServices Server Side Prerendering" and there are two important steps to use power "Microsoft.AspNetCore.SpaServices":

1. Go to your "Views/_ViewImports.cshtml" file, and add the following line:
@addTagHelper "*, Microsoft.AspNetCore.SpaServices"`

2. Choose a place in one of your MVC views where you `want to prerender a SPA component. For example, open "Views/Home/Index.cshtml", and add markup like the following:

<div id="my-spa" asp-prerender-module="ClientApp/boot-server"></div>

But "Web Api" does not have "Views" folder. How can I do above steps in Web API?

The text was updated successfully, but these errors were encountered:

SteveSandersonMS · 2017-06-05T09:33:50Z

In WebApi you're not using Razor views, so it doesn't make sense to use tag helpers. Instead, look into using the Microsoft.AspNetCore.SpaServices.Prerendering.Prerenderer.RenderToString method directly from your C# code. Example usage here: #607

NiceStepUp · 2017-06-05T10:36:03Z

I've developed an web application built using ASP.NET Core Web API and Angular 4. My module bundler is Web Pack 2.
So I cannot use this piece of code: ViewData["SpaHtml"] = prerenderResult.Html; from my controller. I do not have any cshtml views., so I cannot send data from controller to view through ViewData["SpaHtml"].

But I would like to use server side prerendering. I would like to add metatags into head:

import { Meta } from '@angular/platform-browser';

constructor(
    private metaService: Meta) {
}

let newText = "Foo data. This is test data!:)";
    //metatags to publish this page at social nets
    this.metaService.addTags([
        // Open Graph data
        { property: 'og:title', content: newText },
        { property: 'og:description', content: newText },        { 
        { property: "og:url", content: window.location.href },        
        { property: 'og:image', content: "http://usiter.com/uploads/20111118/zhivotnie+koshki+kartinka+s+malenkim+kotyonkom+35121656913.jpg" }]);

Is it possible to do without "ViewData"?`

MarkPieszak · 2017-06-06T17:32:16Z

You're going to have to create all the tags and add them to your rendered HTML.

NiceStepUp · 2017-06-08T06:34:04Z

@MarkPieszak yeah, I've added these tags into head by metaService:

import { Meta } from '@angular/platform-browser';

constructor(
private metaService: Meta) {
}

let newText = "Foo data. This is test data!:)";
//metatags to publish this page at social nets
this.metaService.addTags([
// Open Graph data
{ property: 'og:title', content: newText },
{ property: 'og:description', content: newText }, { 
{ property: "og:url", content: window.location.href }, 
{ property: 'og:image', content: "http://www.freeimageslive.co.uk/files
/images004/Italy_Venice_Canal_Grande.jpg" }]);

and rendered html at browser looks like this when I inspect this element in a browser:

<head>    
    <meta property="og:title" content="<span style=&quot;color:red&quot;>Foo data. This is test data!:)</span>">    
    <meta property="og:description" content="<span style=&quot;color:red&quot;>Foo data. This is test data!:)</span>">
    <meta name="og:url" content="http://foourl.com">
	<meta property="og:image" content="http://www.freeimageslive.co.uk/files
/images004/Italy_Venice_Canal_Grande.jpg"">    
</head>

However, view source in a browser does not have any rendered html.

I've developed an web application built using ASP.NET Core Web API and Angular 4. My module bundler is Web Pack 2.
So I cannot use this piece of code: ViewData["SpaHtml"] = prerenderResult.Html; from my controller. I do not have any cshtml views., so I cannot send data from controller to view through ViewData["SpaHtml"].

But I would like to use server side prerendering to be crawled by SEO I can post my news from my web site by Google, Facebook, Twitter, other social nets.

SteveSandersonMS closed this as completed Jun 5, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Using @addTagHelper in ASP.NET Core WebAPI #1002

Using @addTagHelper in ASP.NET Core WebAPI #1002

NiceStepUp commented Jun 1, 2017 •

edited

Loading

SteveSandersonMS commented Jun 5, 2017

NiceStepUp commented Jun 5, 2017 •

edited

Loading

MarkPieszak commented Jun 6, 2017

NiceStepUp commented Jun 8, 2017

Using @addTagHelper in ASP.NET Core WebAPI #1002

Using @addTagHelper in ASP.NET Core WebAPI #1002

Comments

NiceStepUp commented Jun 1, 2017 • edited Loading

SteveSandersonMS commented Jun 5, 2017

NiceStepUp commented Jun 5, 2017 • edited Loading

MarkPieszak commented Jun 6, 2017

NiceStepUp commented Jun 8, 2017

NiceStepUp commented Jun 1, 2017 •

edited

Loading

NiceStepUp commented Jun 5, 2017 •

edited

Loading