Develop Reference

How to access javascript code from a controller in an Asp.Net Core MVC application

I have an Asp.Net Core MVC application that searches youtube videos and returns a list that is displayed on screen. Each video is placed in a custom component that has a checkbox. Every time a checkbox is selected I access a script that searches all the video components that are on the screen and I store the video id's in a list in my .cshtml page.
At some point I need to get this list of video id's to do a processing. For that I created a javascript method in the same .cshtml page to return this list of ids.
I've already done a research on JSRuntime on Blazor (.razor) pages but that wouldn't be my case.
The fact is that with the click of a button I need to call a controller method, and this method calls my javascript method which returns my list of ids.
How best to do this?
This my javascript code.
#section scripts
{
<script>
var listaDeIds = [];
function Mostrar() {
//document.getElementById("btnplaylist").style.display = 'block';
var videos = document.querySelectorAll('#video');
var count = 0;
var lista = [];
for (var i = 0; i < videos.length; i++) {
//console.log("1 - " + videos.item(i).getAttribute("name"));
var videoID = videos.item(i).getAttribute("name");
//console.log("2 - " + videos.item(i).getAttribute("id"));
const shadow = videos.item(i).shadowRoot;
const childNodes = Array.from(shadow.childNodes);
//console.log("3 - " + childNodes.length);
childNodes.forEach(childNode => {
if (childNode.nodeName === "DIV") {
//console.log("4 - " + childNode.nodeName);
const shadowChilds = Array.from(childNode.childNodes);
//console.log("5 - " + shadowChilds.length);
shadowChilds.forEach(shadowShild => {
if (shadowShild.nodeName === "DIV") {
//console.log("6 - " + shadowShild.nodeName);
const shadowChildsInternas = Array.from(shadowShild.childNodes);
//console.log("7 - " + shadowChildsInternas.length);
shadowChildsInternas.forEach(interna => {
if (interna.nodeName === "INPUT") {
//console.log("8 - Name " + interna.nodeName);
if (interna.checked === true) {
//console.log("9 - Checked: " + interna.checked);
lista[count] = videoID;
count = count + 1;
}
}
});
}
});
}
});
}
if (lista.length > 0) {
document.getElementById("btnplaylist").style.display = 'block';
} else {
document.getElementById("btnplaylist").style.display = 'none';
}
listaDeIds = lista;
}
function RetornaListaDeIds() {
return listaDeIds;
}
</script>
This is my html component code
<custom-iframe id="video" name="#item.Id.VideoId" urlvideo='#Url.Content(item.Url)' onclick="Mostrar()"></custom-iframe>
This is the button that calls my controller.
<div id="btnplaylist" class="right_side hidden">
<button value="Playlist" asp-controller="VideoSearch" asp-action="GravarSelecionados" class="btn green-button button-tamanho-padrao">Playlist</button>
</div>
Code of my control.

I think you might be missing something at a high level here so bear with me.
Your use case is you want users to 'check' videos that you serve to them via a web app, visually altering the page elements around the videos and ultimately sending them off for processing, which I assume means some kind of storage or at least some back-end work.
If I understand your attempted solution to this problem correctly, it is impossible. Even if you did get your backend to run javascript, it wouldn't be aware of the client's state and could not read that list of videos off of it. There's no reason for javascript to run on your server as I see it.
Instead, you need your client-side Javascript to send that list of ids to your server via an API in a JSON format. The flow goes (user checks box -> JS on the browser collects the id of that video and formats a POST request with some json describing what was checked -> that JSON is sent to your server which then reads it an processes it)
The frontend javascript and the server should always communicate with eachother in this way. Again, there's no need for javascript to be run on the server itself.

Moving on to thank everyone who gave suggestions for solving my problem for their support. I followed and tested all the suggestions and the one that fit best to my problem was the use of ajax, suggested by #Andre.Santarosa.
I followed the following article as a reference:http://www.macoratti.net/15/05/mvc_ajax.htm
I installed the package: Microsoft.jQuery.Unobtrusive.Ajax
I added the script reference in my _Layout.cshtml:
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
On the page that lists the videos, the code looks like this:
Button code:
<div id="btnplaylist" class="right_side hidden">
<input type="button" value="Playlist" id="Playlist" class="btn green-button button-tamanho-padrao" />
</div>
Ajax Code:
$('#Playlist').click(function () {
var url = "/VideoSearch/PegarListaDeIds";
var lista = listaDeIds;
$.post(url, { pListaDeIds: lista }, function (data) {
$("#msg").html(data);
});
});

Unable to customize AWS SES email template

I am trying to send a forgot password mail through AWS SES service. I made this template
{
"Template":{
"TemplateName": "forgotpasswrd",
"SubjectPart": "Forgot password ",
"TextPart":"Text area",
"HtmlPart":"<p>We heard that you lost your password. Sorry about that!<\/p>\r\n <p>But don\u2019t worry! You can use the following link to reset your password:<\/p>\r\n <a href=${url}>${url}<\/a>\r\n <p>If you don\u2019t use this link within 1 hour, it will expire.<\/p>\r\n "
}
}
And this is my code in nodejs to input password reset link.
const params = {};
const destination = {
ToAddresses: [String(email)],
};
const templateData = {};
templateData.url = String(Url);
params.Source = 'myemailid#gmail.com';
params.Destination = destination;
params.Template = 'forgotpassword';
params.TemplateData = JSON.stringify(templateData);
In this Url is what i am trying to send.
However when I receive the mail its it does not show the link but only the html text
" But don’t worry! You can use the following link to reset your password:
${url}
If you don’t use this link within 1 hour, it will expire."
How do I send the link in the mail?

It should be {{url}}, not ${url}. See the documentation.

Unable to retrieve data for displaying in the browser

I have a web app where I can login using Firebase. I know the details are stored in the Firebase database. I want the username value to be displayed on the browser in a certain field. Here are the screenshots.
This is the firebase data. In this picture, see the username karthik babu.
I want that username to be displayed on the area in the picture below:
So, instead of the username, I need the actual username value to be displayed.
Here is the code I tried:
var provider = new firebase.auth.GoogleAuthProvider();
provider.addScope('https://www.googleapis.com/auth/plus.login');
firebase.auth().signInWithPopup(provider).then(function(user) {
var token = user.credential.accessToken;
var user = user.user;
var usersRef = firebase.database().ref("WoofyDesktop/UserList");
if (user) {
usersRef.child(user.uid).set({
useremail: user.email,
useruid: user.uid,
username: user.displayName
});
firebase retrieve code i tried:
var rootRef = firebase.database().ref().child("UserList");
rootRef.on("child_added", snap => {
var username = snap.child("username").val();
$("username").append("<div><a><label>" + username + "</label></a></div>");
console.log(username);
});
html code for username..
<div>
<a href="#" class="user">
<label for="username" id="username" >username</label>
</a></div>
Any suggestions on how or what I should change for displaying the required data?
Edit: Tried the updated query as in the answer by aks79 and this is what I am getting. Any insights?

You cannot embed another label inside a label tag
Limitations of label tag...
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
use a different tag like div instead
try using it like
HTML Code
<div class="user" id="username"></div>
and the jquery as
$("#username").append("<a href='javascript:void(0)'><label>" + username + "</label></a>");

java script function and variable based windows.location

One more silly question. How do I open user profile with click on name of user.
test1.php page is common profile page for all users. I use $ui for check user id in data base and display value as required.
test1.php contains
function user_link(user_id) {
var ui=user_id;
window.location = "test1.php?ui=ui";
}
user name link:
<span id="user_link" onclick="user_link(21)">'Samantha Dove'</span>

Use:
function user_link(user_id){
var ui = user_id;
window.location = "test1.php?ui=" + ui;
}
You need to do concatenation here to append your variable in the URL.
Or shorter:
function user_link(user_id){
window.location = "test1.php?ui=" + user_id;
}
Or even shorter, after all:
<a id="user_link" href="test1.php?ui=21">'Samantha Dove'</a>

Linking to current Twitter profile picture and username on a website

I'd like to add a section to my website that shows the social media profiles I manage.
Instead of updating some HTML each time the profile picture or username changes, I'd like it to stay in sync, so to speak.
Is there a simple way to link to the profiles information, without download individual widgets and somehow modifying them?
Thanks

You'd have to write the code, but have you checked the various network's Javascript APIs? They all seem quite simple.
Twitter: https://dev.twitter.com/docs/anywhere/welcome
Facebook: https://developers.facebook.com/docs/reference/javascript/
LinkedIn: http://developer.linkedin.com/javascript
Tumblr: http://www.tumblr.com/docs/en/api/v2
Google+: http://code.google.com/apis/libraries/
This particular example from the twitter api seems to be what you would need:
<span id="twitter-connect-placeholder"></span>
<script type="text/javascript">
twttr.anywhere(function (T) {
var currentUser,
screenName,
profileImage,
profileImageTag;
if (T.isConnected()) {
currentUser = T.currentUser;
screenName = currentUser.data('screen_name');
profileImage = currentUser.data('profile_image_url');
profileImageTag = "<img src='" + profileImage + "'/>";
$('#twitter-connect-placeholder').append("Logged in as " + profileImageTag + " " + screenName);
} else {
T("#twitter-connect-placeholder").connectButton();
};
});
</script>
Based on your comments you may just want to direct link this way:
https://api.twitter.com/1/users/profile_image?screen_name=twitterapi&size=bigger