Post
Ask Question

Getting Started With Ember.js And .NET Core 3

In my previous article, I talked about new front-end frameworks. I forgot to mention one of the popular frameworks, Ember JS, that's why I decided to write an article on it. Well, here it is.
 

Importance of front-end framework

 
The end-users are seeking easy-to-use applications with robust, modern, intuitive features. Some of the characteristics of the web front-end framework are Drive Performance, Optimize Navigation, Visitor Retention, and Aligning Business Intent.
 

What is EmberJS? 

 
Ember.js is an open-source JavaScript web framework, based on the Model–View–ViewModel pattern. It allows the developers to create scalable single-page web applications by incorporating common idioms and best practices into the framework.
 

Why do developers choose Ember.js? 

 
Ember.js has powerful add-ons, convention over configuration, Ember CLI, Community, Ember Octane, etc. All the above reasons are just the tip of the iceberg and it helps to make a more powerful and approachable UI.
 

Configuration of .NET Core 3 and EmberJS

 
Download the latest version of this SDK and install it.
 
Getting Started With Ember.js And .NET Core 3 
 
You can install Ember with a single command using npm.
  1. npm install -g ember-cli 
  2.   

Let's perform one practical task with Ember.js and .NET Core 3.

Create ASP.NET Core 3 web application project using API template. It takes a few minutes to create an API project.
 
Getting Started With Ember.js And .NET Core 3
 
Create one controller called csharppostlistsController and add the following code as below. In this controller, I made one method which returns author posts. 
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Globalization;  
  4. using System.Linq;  
  5. using System.Xml.Linq;  
  6. using Microsoft.AspNetCore.Mvc;  
  7. using Newtonsoft.Json;  
  8.   
  9. namespace csharpcornerEmberApi.Controllers  
  10. {  
  11.     [Route("api/[controller]")]  
  12.     [ApiController]  
  13.     public class csharppostlistsController : ControllerBase  
  14.     {  
  15.         public readonly CultureInfo culture = new CultureInfo("en-US");  
  16.         // GET api/values  
  17.         [HttpGet]  
  18.         public ActionResult<List<Feed>> Get()  
  19.         {  
  20.             try  
  21.             {  
  22.                 XDocument doc = XDocument.Load("https://www.c-sharpcorner.com/rss/latestcontentall.aspx");  
  23.                 var entries = (from item in doc.Root.Descendants().First(i => i.Name.LocalName == "channel").Elements().Where(i => i.Name.LocalName == "item")  
  24.                                select new Feed  
  25.                                {  
  26.                                    Content = item.Elements().First(i => i.Name.LocalName == "description").Value,  
  27.                                    PublishDate = Convert.ToDateTime(item.Elements().First(i => i.Name.LocalName == "pubDate").Value, culture).ToString("dd-MMM-yyyy"),  
  28.                                    Title = item.Elements().First(i => i.Name.LocalName == "title").Value,  
  29.                                    FeedType = (item.Elements().First(i => i.Name.LocalName == "link").Value).ToLowerInvariant().Contains("blog") ? "Blog" : (item.Elements().First(i => i.Name.LocalName == "link").Value).ToLowerInvariant().Contains("news") ? "News" : "Article",  
  30.                                    Author = item.Elements().First(i => i.Name.LocalName == "author").Value  
  31.                                }).Where(a => a.FeedType == "Article").ToList();  
  32.   
  33.                 entries= entries.OrderBy(a=>a.PubDate).Take(5).ToList();  
  34.   
  35.                 AuthorArticlecs Authorpost = new AuthorArticlecs();  
  36.                 int i = 1;  
  37.                 foreach (var item in entries)  
  38.                 {  
  39.                     Datum data = new Datum  
  40.                     {  
  41.                         id = i.ToString(),  
  42.                         type = "csharppostlist",  
  43.                         attributes = PrepareAttribute(item)  
  44.                     };  
  45.                     Authorpost.data.Add(data);  
  46.   
  47.                     i++;  
  48.                 }  
  49.   
  50.                 string json = JsonConvert.SerializeObject(Authorpost,Formatting.Indented);  
  51.   
  52.                 return Ok(json);  
  53.             }  
  54.             catch  
  55.             {  
  56.                 List<Feed> feeds = new List<Feed>();  
  57.                 Feed feed = new Feed();  
  58.                 feeds.Add(feed);  
  59.                 return Ok(feeds.Take(1).ToList());  
  60.             }  
  61.   
  62.         }  
  63.         public Attributes PrepareAttribute(Feed item)  
  64.         {  
  65.             return new Attributes  
  66.             {  
  67.                 author = item.Author,  
  68.                 content = item.Content,  
  69.                 pd = item.PublishDate,  
  70.                 title = item.Title  
  71.             };  
  72.         }  
  73.   
  74.     }  
  75. }  
Now, add some model and enable cross-origin request at startup.cs file. AuthorPosts and Authorarticle should be like this:
  1. using System.Collections.Generic;  
  2. namespace csharpcornerEmberApi  
  3. {  
  4.     public class AuthorArticlecs  
  5.     {  
  6.         public AuthorArticlecs()  
  7.         {  
  8.             data = new List<Datum>();  
  9.         }  
  10.         public List<Datum> data { get; set; }  
  11.     }  
  12.     public class Datum  
  13.     {  
  14.         public Datum()  
  15.         {  
  16.             attributes = new Attributes();  
  17.         }  
  18.         public string type { get; set; }  
  19.         public string id { get; set; }  
  20.         public Attributes attributes { get; set; }       
  21.     }  
  22.     public class Attributes  
  23.     {  
  24.         public string title { get; set; }  
  25.         public string author { get; set; }  
  26.         public string content { get; set; }  
  27.         public string pd { get; set; }  
  28.     }  
  29. }  
  1. using System;  
  2. using System.Collections.Generic;  
  3.   
  4. namespace csharpcornerEmberApi  
  5. {  
  6.      
  7.     public class Feed  
  8.     {  
  9.         public string Link { get; set; }  
  10.         public string Title { get; set; }  
  11.         public string FeedType { get; set; }  
  12.         public string Author { get; set; }  
  13.         public string Content { get; set; }  
  14.         public DateTime PubDate { get; set; }  
  15.         public string PublishDate { get; set; }  
  16.   
  17.         public Feed()  
  18.         {  
  19.             Link = "";  
  20.             Title = "";  
  21.             FeedType = "";  
  22.             Author = "";  
  23.             Content = "";  
  24.             PubDate = DateTime.Today;  
  25.             PublishDate = DateTime.Today.ToString("dd-MMM-yyyy");  
  26.         }  
  27.     }  
  28. }  
Add this CORS at startup.cs file. 
  1. app.UseCors(builder =>  
  2.                 {  
  3.                     builder.WithOrigins("http://localhost:4200")  
  4.                     .AllowAnyHeader()  
  5.                     .AllowAnyMethod()  
  6.                     .AllowCredentials();  
  7.                 });  
Now, create a client app with ember.js called clientapp and create one route called csharppostlists by following the below commands.
  1. ember new clientapp
  2. cd clientapp
  3. ember generate route csharppostlists
After this, you will see the left side folder like in the below picture.
   
Getting Started With Ember.js And .NET Core 3
 
In this example, I used jsonapiadapter for handling the JSON data. Let's create one file called application.js under Adapter folder and put the following code. 
  1. import DS from 'ember-data';  
  2. import ENV from 'clientapp/config/environment';  
  3. export default DS.JSONAPIAdapter.extend({  
  4.     namespace: ENV.APP.namespace,  
  5.     host: ENV.APP.host,  
  6. });  
Add the below code for configuration purposes.
  1. APP: {      
  2.       host:'https://localhost:44391',  
  3.       namespace: 'api'  
  4.     }  
Now, let's do some modification at csharppostlists.js(route) and add csharppostlist.js(model) as per the below code.
  1. import Route from '@ember/routing/route';  
  2.   
  3. export default Route.extend({  
  4.     model() {         
  5.         return this.store.findAll('csharppostlist')          
  6.        }  
  7. });  
  1. import DS from 'ember-data';  
  2.   
  3. export default DS.Model.extend({  
  4.     author: DS.attr(),  
  5.     content: DS.attr(),  
  6.     pd :DS.attr(),  
  7.     title: DS.attr()  
  8. });  
Now, it's almost done. We have to do some work with the UI and CSS part. Open csharppostlists.hbs file and application.hbs files and put the following codes.
  1. <table class="author">  
  2.   <tr>  
  3.     <th>No</th>  
  4.     <th>Author Name</th>  
  5.     <th>Title</th>  
  6.     <th>Content</th>  
  7.     <th>Publication Date</th>  
  8.   </tr>  
  9.   {{#each this.model as |Author|}}  
  10.    
  11.  <tr>  
  12.      <td>{{Author.id}}</td>  
  13.     <td>{{Author.author}}</td>  
  14.     <td>{{Author.content}}</td>  
  15.     <td>{{Author.title}}</td>  
  16.     <td>{{Author.pd}}</td>  
  17.   </tr>        
  18.   {{/each}}       
  19. </table>      
  1. <img  src="https://csharpcorner-mindcrackerinc.netdna-ssl.com/App_Themes/CSharp/Images/SiteLogo.png" class="cimage" alt="C# Corner">  
  2. <h1 class="heading">Welcome to c-sharp corner letest 5 author post from feed</h1>  
  3. {{outlet}}  
Open the app.css file and put the below style in it.
  1. .author {  
  2.     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;  
  3.     border-collapse: collapse;  
  4.     width: 100%;  
  5.   }  
  6.     
  7.   .author td, .author th {  
  8.     border: 1px solid #ddd;  
  9.     padding: 8px;  
  10.   }  
  11.     
  12.   .author tr:nth-child(even){background-color: #f2f2f2;}  
  13.     
  14.   .author tr:hover {background-color: #ddd;}  
  15.     
  16.   .author th {  
  17.     padding-top: 12px;  
  18.     padding-bottom: 12px;  
  19.     text-align: left;  
  20.     background-color: #4CAF50;  
  21.     color: white;  
  22.   }  
  23.   .heading{  
  24.       text-align: center;  
  25.       margin-bottom: 30px;  
  26.        
  27.   }  
  28.   .cimage{  
  29.     display: block;  
  30.     margin-left: auto;  
  31.     margin-right: auto;  
  32.     margin-top: 20px;  
  33.     text-align: center;  
  34.     height: 83px;  
  35.   }  
Finally, it's time to run API and Ember app with the below command.
  1. ember serve  
You will get an output (http://localhost:4200/csharppostlists) like the below GIF and also, you can download my source code from here.
 
Getting Started With Ember.js And .NET Core 3
 
Let's wrap up this article. 
 
Hope you guys learned something new.
 
 
Here are the links to my previous articles.


Similar Articles