Cannot run JavaScript on ASP.NET Core

Simon Leung
Simon Leung used Ask the Experts™
on
I find that my Javascript inside ASP.NET Core Razor page can't be called up. Any idea ?

Thx
_Layout.cshtml
Add.cshtml
Add.cshtml.cs
AddItemModel.cs
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014

Commented:
replace :
    <script type="text/javascript">
    function buildCatIdList() {
        const categories = document.getElementsByName("Category");

Open in new window

by :
    <script type="text/javascript">
alert("one");
    function buildCatIdList() {
alert("two");
        const categories = document.getElementsByName("Category");

Open in new window


you should get a first alert at page load and a second after you click on the button
leakim971Multitechnician
Top Expert 2014

Commented:
if you get both, replace :
<input type="submit" value="Save" onclick="buildCatIdList()" />
by :
<input type="submit" value="Save" onclick="buildCatIdList();return false;" />

Author

Commented:
It seems that the JavaScript can run, as it pops up the alert windows.

However, the Javascript code cannot read the selected categories and put into a variable Categories.

Any idea ?

Thx again.
Error01.png
Error02.png
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

leakim971Multitechnician
Top Expert 2014

Commented:
document.getElementsByName("Category");

Open in new window


is supposed to do what?

Author

Commented:
Hi,

It may get a list of categories for a product. When users click on each category box, it will be checked in the Javascript and join together in a hidden field "AIM_Categories".
leakim971Multitechnician
Top Expert 2014

Commented:
could you add an alert like this :

const categories = document.getElementsByName("Category");
alert(categories.length); // and let me know what number you see in the alert please

Open in new window

Author

Commented:
5
leakim971Multitechnician
Top Expert 2014

Commented:
try the following and come back to comment what you get, thanks :

function buildCatIdList() {
    const categories = document.getElementsByName("Category");
    const catIds = [];
    alert(categories.length); // you said you got 5 in the alert
    for (var i = 0; i< categories.length; i++)
    {
        var cat = categories[i];
        alert("cat.checked is: " + cat.checked + "\ncat.id is: " + cat.id);
        if (cat.checked) {
            catIds.push(cat.id.split("-")[1]);
        }
    }
    alert(catIds); // please do a screen shot of it and post it on EE
    document.getElementsById("<%= AIM_Categories.ClientID %>").value = catIds.join(",");
}

Open in new window

Author

Commented:
seem like there is a data binding issue in form element AIM_Categories to the model class Categories in AddItemModel.cs...

Thx again.
Screenshot01.png
Screenshot02.png
leakim971Multitechnician
Top Expert 2014

Commented:
ok so CatIds is fine
the last part is to be sure your element is here in the page :

function buildCatIdList() {
    const categories = document.getElementsByName("Category");
    const catIds = [];
    alert(categories.length); // you said you got 5 in the alert
    for (var i = 0; i< categories.length; i++)
    {
        var cat = categories[i];
        if (cat.checked) {
            catIds.push(cat.id.split("-")[1]);
        }
    }
    alert("AIM Cat is " + (document.getElementsById("<%= AIM_Categories.ClientID %>")?"":"not") + " present");
    document.getElementsById("<%= AIM_Categories.ClientID %>").value = catIds.join(",");
    alert("its value is set to: " + document.getElementsById("<%= AIM_Categories.ClientID %>").value );
}

Open in new window

Author

Commented:
It doesn't pop up any alerts.... seem like statement document.getElementsById has some issues and doesn't perform...

Thx
Multitechnician
Top Expert 2014
Commented:
oh yes, remove the "s" :

document.getElementById
instead :
document.getElementsById

Author

Commented:
Works. Great Thx
leakim971Multitechnician
Top Expert 2014

Commented:
you welcome!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial