Nies Nies - 6 months ago 37
jQuery Question

Get the HTML Class Name inside Partial View in JavaScript or jQuery

I have the following markup inside my

.cshtml
Partial View and it is placed in the
Views/Shared
folder:

_Modal.cshtml

<div class="loadingOverlay">
<button class="btn loading-button" disabled><i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i></button>
</div>


And also the External JavaScript (different file from the Partial View .cshtml):

Modal.js

var Modal;

Modal = Modal || (function () {
var loadingDiv = $('.loadingOverlay');
return {
Loading: function () {
loadingDiv.css('display', 'block');
$('body').prepend(loadingDiv);
},
LoadingDismiss: function () {
loadingDiv.fadeOut('500');
},
};
})();


And I call from my page like below:

Index.cshtml

<!DOCTYPE html>
<html>
<head>
@Styles.Render("~/Content/font-awesome", "~/Content/css")
</head>
<body>
<div class="container-fluid">
<div class="container">
<div class="row">
<button id="showOverlay" class="btn btn-default"></button>
</div>
</div>
</div>
@Scripts.Render("~/bundles/jquery")

<script type="text/javascript">
$(document).ready(function () {
$('#showOverlay').click(function () {
Modal.Loading();
});
})
</script>
</body>
</html>


My problem is: whenever I clicked the button, nothing happens. But it works when I put the html element not inside
_Modal.cshtml
(Refer to the below code).

My question is: how can I get the class name in the
_Modal.cshtml
using JavaScript or JQuery?

I can do this in the
Modal.js
(Note that it is same as I put that into _Modal.cshtml) but that would be hard to maintain and I would like to put all of the content in the Partial View, and call it when needed by class name, instead of write string that will converted to JavaScript Object:

var loadingDiv = $('<div class="loadingOverlay"><button class="btn loading-button" disabled>'
+ '<i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i></button></div>');


Your answer much appreciated.

Edit:

Question on 31st of May 2016:


  • What's the difference between
    @Html.Partial("_Modal")
    with
    @Html.Partial("~/Views/Shared/_Modal.cshtml")
    . is it just to better understand for where the compiler get the partial views from?



Answered on 1st of June 2016 by @Guruprasad Rao:


  • There is nothing difference between two except the mentioning of
    partialview
    name. The one I suggested was providing fully qualified path which helps compiler from where to fetch the
    partialview
    . To one you use will search in all the directories under the View folder. So the one I mentioned will be good in the aspect of performance.



Thanks for the @Guruprasad Rao for the answer and the explanation.

Cheers~

Answer

You should import the partialview first from server to client browser first and then you can manipulate it with jquery. Otherwise there would be no element with the selector you are trying to find. User, @Html.Partial or @Html.RenderPartial to import it, hide it at initial state and show it on click. Take a below example:

<body>
  <div class="container-fluid">
    <div class="container">
      <div class="row">
        <button id="showOverlay" class="btn btn-default"></button>
      </div>
    </div>
  </div>
  @Html.Partial("~/Views/Shared/_Modal.cshtml")
  <!--I assume that the content inside this will be initially in hidden state-->

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

  <script type="text/javascript">
    $(document).ready(function() {
      $('#showOverlay').click(function() {
        Modal.Loading();
      });
    })
  </script>
</body>

Modal.js changes

var Modal;

Modal = Modal || (function () {
    var loadingDiv = $('.loadingOverlay');
    return {
        Loading: function () {
            loadingDiv.css('display', 'block');
            //$('body').prepend(loadingDiv);
            //No need to prepend here since we are importing it through partial method
        },
        LoadingDismiss: function () {
            loadingDiv.fadeOut('500');
        },
    };
})();