0

Case 1: When clicking on the Delete 1 button the Bootstrap's modal dialog pops up and when you click on the Delete button of that popup, jquery code below, as expected, correctly writes Test: id1 in Chrome browser's console window.

Case 2: But when you use a partial view to render the same html, the jquery code, shown in case 2 below, does not write anything to Chrome browser's console window. I think it may have something to do with the id = DeleteBtnParentID in the main View of Case 2.

NOTE: Difference between the jqueries in two cases is that in Case 2 I'm using Event Delegation while in Case 1 I did not have to.

  1. Case 1: Following works.

View (all by itself without partial view)

<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal" value="id1">Delete1</button>
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal" value="id2">Delete2</button>
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal" value="id3">Delete3</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-sm">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header btn-warning" style="font-weight:bold;color:white;">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h5 class="modal-title modal-sm">Delete Warning</h5>
            </div>
            <div class="modal-body">
                <p>Are you sure?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" id="DeleteBtnID" data-dismiss="modal">Delete</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>
@section Scripts{
    <script>
        $(document).ready(function () {

            $('#DeleteBtnID').on('click', function (event) {
                console.log('Test: ' + $(this).attr('value'));
            });

            $('#myModal').on('show.bs.modal', function (e) {
                var btnValue = $(e.relatedTarget).attr('value');
                $('#DeleteBtnID').attr('value', btnValue);
            })
        });
    </script>
}
  1. Case 2: Following dos NOT work when the above html is rendered via a Partial View:

Main View:

<div id="DeleteBtnParentID">
    @Html.Partial("TestPartial")
</div>

Partial View [TestPartial.cshtml]:

<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal" value="id1">Delete1</button>
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal" value="id2">Delete2</button>
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal" value="id3">Delete3</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-sm">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header btn-warning" style="font-weight:bold;color:white;">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h5 class="modal-title modal-sm">Delete Warning</h5>
            </div>
            <div class="modal-body">
                <p>Are you sure?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" id="DeleteBtnID" data-dismiss="modal">Delete</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>
@section Scripts{
    <script>
        $(document).ready(function () {

            $('#DeleteBtnParentID').on('click', '#DeleteBtnID', function (event) {
                console.log('Test: ' + $(this).attr('value'));
            });

            $('#myModal').on('show.bs.modal', function (e) {
                var btnValue = $(e.relatedTarget).attr('value');
                $('#DeleteBtnID').attr('value', btnValue);
            })
        });
    </script>
}
nam
  • 21,967
  • 37
  • 158
  • 332
  • 2
    `@section` is not supported in partials (refer [this answer](http://stackoverflow.com/questions/7556400/injecting-content-into-specific-sections-from-a-partial-view-asp-net-mvc-3-with)), and scripts should not be in partials anyway. Move the script to you main view. –  Apr 17 '17 at 21:55
  • @StephenMuecke Your suggestion worked (thanks). – nam Apr 17 '17 at 21:58

1 Answers1

3

The problem is that you are using @section inside PartialView which will never work by design.

Work around: change from

@section Scripts{
<script>
    $(document).ready(function () {

        $('#DeleteBtnParentID').on('click', '#DeleteBtnID', function (event) {
            console.log('Test: ' + $(this).attr('value'));
        });

        $('#myModal').on('show.bs.modal', function (e) {
            var btnValue = $(e.relatedTarget).attr('value');
            $('#DeleteBtnID').attr('value', btnValue);
        })
    });
</script>
}

to

<script>
    $(document).ready(function () {

        $('#DeleteBtnParentID').on('click', '#DeleteBtnID', function (event) {
            console.log('Test: ' + $(this).attr('value'));
        });

        $('#myModal').on('show.bs.modal', function (e) {
            var btnValue = $(e.relatedTarget).attr('value');
            $('#DeleteBtnID').attr('value', btnValue);
        })
    });
</script>

For more information you can check this question: Injecting content into specific sections from a partial view ASP.NET MVC 3 with Razor View Engine

Community
  • 1
  • 1
Van VO
  • 637
  • 3
  • 10
  • I'm not clear on your suggested change. In ASP.NET MVC one has to have `@section Scripts{ ...}` in order to use `javascript` code inside a an **individual** view. That's why they have `@RenderSection("scripts", required: false)` inside layout view: `_Layout.cshtml` – nam Apr 17 '17 at 21:40
  • yeah I know. You can do it in View but not in PartialView which is the problem. Alternatively, you can put your script inside PartialView – Van VO Apr 18 '17 at 10:03
  • But if I understand your suggestion correctly it suggests to me to just remove my jquery code from inside `@section Scripts{...}` and it will work. But reading the solution from the link you provided it seems like you want to suggest to move the entire script from partial view to the main view. Could you reword your suggestion above to what I think you really have in mind - and I will mark yoursuggestion as an answer. – nam Apr 18 '17 at 15:48
  • Yes, my suggestion is that instead of add @section Scripts inside your partial, you can add only your script and it can work normally as you put your script in main view. Here is the example e.g: [link](http://codepen.io/anon/pen/vmNzwm) – Van VO Apr 18 '17 at 17:15
  • I've tested that by adding script without `@section` gives the following error in Chrome's console window: `Uncaught ReferenceError: $ is not defined`. And, that is because, as I noticed as well, without using `@section` the script is loaded before loading the necessary `js` files. Please see the explanations [here](http://javarevisited.blogspot.com/2016/04/3-ways-to-solve-jquery-uncaught-reference-error-is-not-defined.html) and [here](http://stackoverflow.com/a/29937582/1232087). I think the answer to this post is the link you provided in your original response and from `@StephenMuecke` above – nam Apr 19 '17 at 15:56