MVC Partial Views and Javascript

Question

I have a partial view which is essentially a widget. I want to have between 1 and 'n' of these on the same page.

My issue I'm having is I can't get javascript to execute in each one.

e.g.

Index.cshtml

<div>
   @Html.Partial("_ButtonPartialView")
    <br/>
    <br />
   @Html.Partial("_ButtonPartialView")
</div>

_ButtonPartialView.cshtml

<h2>ButtonView</h2>
<button id="foo">
    on
</button>

BundleConfig.cs

bundles.Add(new ScriptBundle("~/bundles/test").Include(
                        "~/Scripts/test.js"));

Layout.cshtml

@Scripts.Render("~/bundles/test")

test.js

$(document).ready(function() {
    $('#foo').click (function() {
        if ($('#foo').html() === 'on') {
            $('#foo').html('off');
        } else {
            $('#foo').html("on");
        }
    });
});

My problem is, when i click the first button it switches between on and off fine. When I click the second button, nothing happens!

My bigger issue, if I can get this to work is. I obviously want all my Partial Views to be independent. e.g. I don't want to click one button and they all trigger. They are all going to be passed a model and I need to write JS that will do stuff with that model and display the information.

So each widget needs to be independent.

Thanks

first thing id is unique, use class instead for button

Sandip Bantawa
– Sandip Bantawa

2017-02-13 17:20:19 +00:00
Commented Feb 13, 2017 at 17:20 — Sandip Bantawa
– Sandip Bantawa, Commented Feb 13, 2017 at 17:20

Jasen · Accepted Answer · 2017-02-13 17:56:07Z

1

As mentioned in the comments, the id must be unique. If you want to reference the button by id you'll need to generate unique ids.

A cleaner way is to use a class selector instead with $(this) to reference the button instance that triggered the event.

$(".foo").on("click", function(e) {
    var btn = $(this);
    var state = btn.html();
    ...
});

answered Feb 13, 2017 at 17:56

Jasen

14.3k3 gold badges55 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matt Bodily · Accepted Answer · 2017-02-13 18:12:24Z

1

to trigger script on dynamically added content you need to tie the event to the document. change your click event to

$(document).on('click', '#foo', function() {
    if ($('#foo').html() === 'on') {
        $('#foo').html('off');
    } else {
        $('#foo').html("on");
    }
});

then as mentioned in the other answer change the selector to be partial specific

answered Feb 13, 2017 at 18:12

Matt Bodily

6,4134 gold badges32 silver badges51 bronze badges

Collectives™ on Stack Overflow

MVC Partial Views and Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related