How to add script to ASP.NET Core partial view properly?

Question

I am new to ASP.NET.

I needed to show a list of items. I made a partial view to represent each item. It works fine.

I needed to add a script in the partial view. So I created a new javascript file in wwwroot > js. Then referenced it from the partial view, like this:

<script src="~/js/testjs.js"></script>

And this is the javascript file:

var upbtn = document.getElementById("upbtn");
var dnbtn = document.getElementById("dnbtn");

upbtn.onclick = upbtn_click;
dnbtn.onclick = dnbtn_click;

function upbtn_click() {
    upbtn.children[0].children[0].style.fill = "green";
    dnbtn.children[0].children[0].style.fill = "gray"
}

function dnbtn_click() {
    upbtn.children[0].children[0].style.fill = "gray";
    dnbtn.children[0].children[0].style.fill = "green";
}

The problem is with the script. It only executes fot the first partial view, not for the others. So, for the first partial view, when I click the buttons, I can see the changes. But for the rest of the partial views, they have no effect. What should I do to make the script work for all partial views?

The project is using ASP.NET Core.

G_P · Accepted Answer · 2020-07-28 13:25:47Z

The reason you are seeing your functions only get called for the first partial view is due to how that javascript code works and the fact that the same element id's and javascript is being repeated in each partial view.

For example, the first partial view gets rendered and your onclick events get hooked up for your two elements with id's "upbtn" and "dnbtn". When the second partial view gets rendered (and any others after that), that document.getElementById runs, and finds the first element with that id in the document, which will be that of the first partial. (also element id's should be unique throughout a page, so you should look at ways to get unique id's in repeated partial views after you get this working. I didn't add that to this answer so as to keep focused on this question/answer)

In order to get this working, you need to re-design how the elements in your partials are calling the js functions, and you can move the js out to the parent view or to a single shared js file for your site. Note I'm making some assumptions/estimates on html elements below since you did not share that code.

For your upbtn/dnbtn elements, you can change them to something like below. The "buttonsParentElement" div is so we can get to the other btn elements children upon any click.

<div id="buttonsParentElement">
  <div id="upbtn" onclick="upbtn_click(this)">UP</div>
  <div id="dnbtn" onclick="dnbtn_click(this)">DOWN</div>
</div>

Then update your js methods (again, not in the partial but either in the parent view, or a shared js file):

function upbtn_click(element) {
    element.children[0].children[0].style.fill = "green";

    var relatedDnBtn = element.closest("#buttonsParentElement").querySelector("#dnbtn");
    relatedDnBtn.children[0].children[0].style.fill = "gray"
}

function dnbtn_click(element) {
    var relatedUpBtn = element.closest("#buttonsParentElement").querySelector("#upbtn");
    relatedUpBtn.children[0].children[0].style.fill = "gray";

    element.children[0].children[0].style.fill = "green";
}

Collectives™ on Stack Overflow

How to add script to ASP.NET Core partial view properly?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related