CODEWITHSUNDEEP
asp.net-corejquery-ui-sortablerazor-pages
OJB1
OJB1

Reputation: 2785

ASP.NET Core 2.2 Razor Pages - JQuery UI Sortable not working

The code below works fine on JS Fiddle, but I cant get it working in my asp.net core project. Given the fact that I'm using external links for the JQuery library, leaves me little in understanding why this isn't working in .Net Core. Can anyone tell me what I'm missing here?

Note: it doesn't seem to matter where the external library links are placed... tried placing in usual place underneath razor bits as well but no difference.

Razor Page:

 @page
 @model myProject.Pages.test1Model
 @{
    ViewData["Title"] = "test1";
  }

<head>
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<style>
 #sortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 60%;
 }
</style>

<div class="text-light" id="sortable">
 <div class="bg-success text-dark">Item 1</div>
 <div class="bg-danger">Item 2</div>
 <div class="bg-warning">Item 2</div>


 <script>
  $(function () {
    $("#sortable").sortable();
    $("#sortable").disableSelection();
  });
 </script>

Upvotes: 0

Views: 532

Answers (1)

Nan Yu
Nan Yu

Reputation: 27578

In your razor page , you can load the scripts in Scripts section (which defines from _Layout.cshtml):

<div class="text-light" id="sortable">
    <div class="bg-success text-dark">Item 1</div>
    <div class="bg-danger">Item 2</div>
    <div class="bg-warning">Item 2</div>
</div>

@section Scripts{

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>

        $(function () {
            $("#sortable").sortable();
            $("#sortable").disableSelection();
        });

    </script>
}

Razor Pages Tutorial

Upvotes: 1

Related Questions