Question

这是我重新排列两张照片的简单页面。

当我在页面删除时删除MasterPageFile，并在aspx页面本身使用html，form，body标签时，代码可以正常工作。我可以知道一些方向如何让jquery在添加母版页时使用？这与重新排列图像无关，但是当我们向aspx添加母版页以使其易于理解时，简单的jquery可能不起作用，因为我觉得通过提供代码使我感到复杂。没有代码隐藏，因为我想通过硬编码图像URL来尝试这个，后来我想从数据库表中映射url路径。

<style type="text/css">
    #sortable {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 450px;
    }

        #sortable li {
            margin: 3px 3px 3px 0;
            padding: 1px;
            float: left;
            width: 100px;
            height: 90px;
            font-size: 4em;
            text-align: center;
        }
</style>
<script>
  $(function () {
      $("#sortable").sortable();
      $("#sortable").disableSelection();
  });

<div runat="server" id="divPhotosDisplay">
    <h4 class="page-header">Masonry with any kind of element</h4>
    <div class="row-masonry row-masonry-md-4 row-masonry-sm-2" runat="server">
        <ul id="sortable">
            <li class="ui-state-default"  runat="server">

                  <asp:Image runat="server" id="imgPhoto1" style="width:150px;height:150px" src="//a57.foxnews.com/images.foxnews.com/content/fox-news/lifestyle/2017/09/30/dunkin-donuts-shrinking-menu-to-improve-doughnut-mojo/_jcr_content/par/featured_image/media-0.img.jpg/931/524/1506797282060.jpg?ve=1&tl=1&text=big-top-image" class="img-rounded" alt="Cinque Terre"  />


            </li>
            <li class="ui-state-default" runat="server">

                  <asp:Image runat="server" id="imgPhoto2" style="width:150px;height:150px" src="https://krispykreme.com/SharedContent/User/97/972786a8-7d91-4d82-983e-6b67a4a93865.png.ashx?w=310&h=310&mode=max&quality=60&format=jpg" class="img-rounded" alt="Cinque Terre" />

            </li>
        </ul>
    </div>
</div>

Answer 1

嗯，我不知道为什么你的代码不应该在这里工作。无论您是通过asp.net还是硬编码渲染页面，只要您的JavaScript文件按顺序加载就无所谓。试试这个：

<强> SiteDonor.Master ：

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Donor.SiteMaster" %>

<!DOCTYPE html>

<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Title</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

    <style type="text/css">
        /* Your style here */
    </style> 
    <script type="text/javascript" src="code.jquery.com/jquery-1.12.4.js"></script>; 
    <script type="text/javascript" src="code.jquery.com/ui/1.12.1/jquery-ui.js"></script>;
    <script type="text/javascript">
        /* Your script here */
    </script>
</head>
<body>
    <div id="main">
      <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
    </div>
</body>
</html>

<强> Content.aspx ：

<%@ Page Title="Donor Application" Language="C#" MasterPageFile="~/SiteDonor.Master" AutoEventWireup="true" CodeBehind="Donor.aspx.cs" Inherits="Eggspecting.Application.Donor" %> 

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    Your page content goes here
</asp:Content>

更新示例

我复制了您的示例并在本地构建了一个Web表单项目，并且可以正常运行。

<强>的Site.Master ：

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="ASP.NET_Test.SiteMaster" %>

<!DOCTYPE html>

<html lang="en">  
<head runat="server">
    <!-- Meta-->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="" />
    <title>jQuery UI Sortable - Display as grid</title>  

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript">
        $(function () {
          $("#sortable").sortable();
          $("#sortable").disableSelection();
        });

    </script>
    <style type="text/css">
          #sortable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
          #sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
          #sortable li img {
              width: 100px;
          }
      </style>
</head>
<body>
    <form id="frmDonor" runat="server">
    <asp:ContentPlaceHolder ID="MainContent" runat="server" />
   </form>
 </body>
</html>

<强> Default.aspx的

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" MasterPageFile="~/Site.Master" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <div runat="server" id="divPhotosDisplay">
        <h4 class="page-header">Masonry with any kind of element</h4>
        <div class="row-masonry row-masonry-md-4 row-masonry-sm-2">
            <ul id="sortable">
                <li class="ui-state-default">1                    
                    <img runat="server" id="imgPhoto1" src="https://upload.wikimedia.org/wikipedia/en/thumb/b/b8/Dunkin%27_Donuts_logo.svg/1280px-Dunkin%27_Donuts_logo.svg.png" class="img-rounded" alt="Cinque Terre"  >                      
                    <asp:HiddenField ID="hdnOrder1" runat="server" />                   
                </li>
                <li class="ui-state-default">2                    
                    <img runat="server" id="imgPhoto2" src="https://www.dunkindonuts.com/content/dam/dd/img/heros-lifestyle/standard/hero-ddcard-lp-donuts-card-640x640.jpg" class="img-rounded" alt="Cinque Terre" >
                    <asp:HiddenField ID="hdnOrder2" runat="server" />                   
                </li>
            </ul>
        </div>
    </div>   
</asp:Content>

Answer 2

If you remove master page, by using html, body tags in content page, my code works. Can you suggest the solution after replicating the issue?

My Content Page:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ArrangeDivs4.aspx.cs" MasterPageFile="~/Site1.Master" Inherits="Site.Examples.ArrangeDivs4" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Sortable - Display as grid</title>    
    <div runat="server" id="divPhotosDisplay">
        <h4 class="page-header">Masonry with any kind of element</h4>
        <div class="row-masonry row-masonry-md-4 row-masonry-sm-2">
            <ul id="sortable">
                <li class="ui-state-default">1                    
                      <img runat="server" id="imgPhoto1" src="https://upload.wikimedia.org/wikipedia/en/thumb/b/b8/Dunkin%27_Donuts_logo.svg/1280px-Dunkin%27_Donuts_logo.svg.png" class="img-rounded" alt="Cinque Terre"  >                      
<asp:HiddenField ID="hdnOrder1" runat="server" />                   
                </li>
                <li class="ui-state-default">2                    
                      <img runat="server" id="imgPhoto2" src="https://www.dunkindonuts.com/content/dam/dd/img/heros-lifestyle/standard/hero-ddcard-lp-donuts-card-640x640.jpg" class="img-rounded" alt="Cinque Terre" >
                      <asp:HiddenField ID="hdnOrder2" runat="server" />                   
                </li>
            </ul>
        </div>
    </div>   
</asp:Content>

My Master page:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.Master.cs" Inherits="WebSite.Site1Master" %>
<!DOCTYPE html>    
<head runat="server">
    <!-- Meta-->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript">
      $( function() {
        $( "#sortable" ).sortable();
        $( "#sortable" ).disableSelection();
      } );
     </script>
    <style type="text/css">
          #sortable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
          #sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
      </style>
</head>
<body>
    <form id="frmDonor" runat="server">
    .....
    <asp:ContentPlaceHolder ID="MainContent" runat="server" />
   </form>
 </body>
</html>

Answer 3

母版页中几乎没有CSS文件和JS文件。我将在明天删除它们并试图让它工作。如果这适合你，它应该适合我。我在这个问题上苦苦挣扎了几天，明天我可以提供更新。非常感谢你的回应。

aspx中的JQuery无法通过链接母版页来工作

3 个答案:

更新示例