ASP.NET MVC 2 والتحكم في Tablesort V2 JQuery

Question

نأمل أن يساعد شخص ما ، لقد كنت ألعب مع ASP.NET MVC 2 لمشروع التعلم. أردت مؤخرًا تقديم بعض التأثيرات الأكثر تقدماً ، واحدة منها طاولات قابلة للفرز. بالنظر إلى أن لدي عددًا من عناصر التحكم في jQuery الأخرى ، بدا أن استخدام التحكم في jQuery فكرة جيدة!

أنا اخترت TableSter V2 وشرع في إضافته إلى موقعي.

1. ضمنت طاولاتي التي أردت أن يكون التصميم لها أقسام thead/tbody.
2. أضاف ملف .js إلى بلدي Scripts الدليل.
3. أضاف هذا إلى أعلى وجهة نظري الجزئية <script src="<%= Url.Content("~/Scripts/jquery-ui-1.8.4.custom.min.js") %>" type="text/javascript"></script>
4. (للحصول على معلومات) حاول أيضًا مع هذا الإدخال في عرض "site.master".
5. وأضاف id="leagueTable" على طاولتي.
6. وأضاف <script type="text/javascript"> $(document).ready(function () { $("#leagueTable").tablesorter(); }); </script> إلى العرض الجزئي.

في هذه المرحلة ، قمت بتشغيل الموقع وعمل كل شيء كما هو متوقع - على سبيل المثال ، يمكنني فرز المحتوى ولكن لم يتغير شيء بصريًا. الآن لإضافة CSS ....

1. لقد قمت بتنزيل "blue.zip" ونسخت كل هذا إلى /Content الدليل.
2. أضاف ما يلي إلى أعلى الموقع. <link href="<%= Url.Content("~/Content/style.css") %>" type="text/css" rel="stylesheet" /> (nb. style.css هو اسم CSS المقدمة - في الأصل أنا أعيد تسمية هذا ولكن بعد المشكلات قمت بتخفيض التغييرات الخاصة بي للحفاظ عليها كما هو موفر).

في هذه المرحلة ، أتأكد من انتهاء صلاحية CTRL-F5 إلى أي تخزين مؤقت) وأعرب عن أمله في رؤية التصميم الهائل كما هو موضح في الأمثلة ... بدلاً من ذلك ، بينما لا يزال وظيفيًا ، لا شيء يبدو مختلفًا.

ركضت في Chrome (مع أدوات العناصر الافحص) وأكدت أنه يتم تنزيل CSS - يتم تطبيق jQuery لأن لديّ وظيفة فرز تعمل - ولكن لا يدعي أي شيء في CSS (باستخدام Audits - "النمط" .CSS: 100 ٪ (المقدرة) لا تستخدم من قبل الصفحة الحالية. ").

ما الذي أفعله خطأ على الأرض؟ لماذا لا أحصل على أنماط؟ [20 عامًا في حقل C ++ ، في الوقت الفعلي ، ولكنه جديد على تطوير الويب

Answer 1

حسنًا ، الحل ، بعد أن تحول الكثير من الصيد واتباع اتجاه @matt إلى أن يكون بسيطًا للغاية - لكنني قمت بفحص مزدوج توثيق Tablesorter ووجدت أنه لم يتم ذكره هناك!

عندما تضيف إما السمات "الأزرق" أو "الخضراء" المقدمة على الموقع ، فإن كلاهما يتطلب إعطاء الجدول اسم فئة tablesorter. لقد افترضت زوراً أن jQuery (التي نجحت) كانت ستغير بنية الجدول إضافة فئات أسلوبها الخاصة التي تتطابق مع تلك المحددة في الموضوع!

حتى تلخص:

<script type="text/javascript">
    $(document).ready(function () { 
        $("#leagueTable1").tablesorter();
        $("#leagueTable2").tablesorter();
    });
</script>

<table id="leagueTable1">
    <thead>
    ...  // THIS TABLE WILL NOT BE STYLED
</table>
<table id="leagueTable2" class="tablesorter">
    <thead>
    ...  // THIS TABLE _WILL_ BE STYLED
</table>

Answer 2

إن طريقتي الشخصية المفضلة للتحقق مما إذا كان المورد الثابت (مثل ملف CSS) يرتبط بشكل صحيح هو القيام "بمصدر عرض" في Firefox. عرض الارتباطات التشعبية هذه روابط CSS ، بحيث يمكنك النقر فوقه ورؤية ، مباشرة ، ما الذي يتم تنزيله أو لا يتم تنزيله.

ومع ذلك ، بما أنك ذكرت Chrome ، سأفعل هذا:

• انقر على زر "التحكم في الصفحة الحالية" (أعلى يمين) ، وحدد "مطور" -> "أدوات المطورين"

• بعد ذلك ، انتقل إلى رابط مصدر CSS في علامة رأسك ، وانقر على الرابط الخاص بملف CSS ، أو انقر فوق خيار قائمة "الموارد" في الجزء العلوي الذي سيدرج جميع الموارد على الصفحة ، وانتقل إلى ملف CSS

• قد يخبرك أنك بحاجة إلى تمكين "تتبع الموارد" في هذه المرحلة - إذا كان الأمر كذلك ، اسمح بذلك. تستطيع

• بمجرد الانتقال إلى ملف CSS على صفحة "الموارد" ، انقر فوقه. سوف يحمل المورد. إذا قام بتحميل CSS المتوقعة ، فعندئذ ، يتم تحميله بشكل صحيح.

الآن ، دعنا نفترض ذلك هو التحميل بشكل صحيح ، لكنك لا تزال تواجه مشاكل. سأحاول إضافة نمط CSS المخصص الخاص بك إلى ورقة الأنماط ، ومعرفة ما إذا كانت تقوم بتحديث الصفحة كما كنت تتوقع. يمكن أن يكون شيئًا بسيطًا ، مثل

table td{ font-weight: bold; }

إذا كان هذا النمط يؤثر ، فأنت تعلم أن ورقة الأنماط يتم تطبيقها.

إذا كنت لا تزال تواجه مشاكل ، فهل يمكنك توجيهنا إلى الصفحة (إذا كانت متاحة للجمهور) ، أو بدلاً من ذلك ، قم بإعداد مثال على ما لا يعمل على موقع مثل http://jsbin.com/

انشر مرة أخرى مع تحديث ، وسأحاول أن أعمل لك من خلال المشكلة. لقد استخدمت TableSter بنفسي ، لذلك أنا على دراية بالمكون الإضافي.