.NET Tips: تشخيص نقايص تصاوير صفحات سايت با استفاده از jQuery Ajax

۱۳۸۸/۰۲/۱۳

تشخيص نقايص تصاوير صفحات سايت با استفاده از jQuery Ajax

اين مثال شبيه به مثال بررسي وجود نام كاربر با استفاده از jQuery Ajax است كه از ذكر توضيحات مشابه آن، در اينجا خودداري خواهد شد.


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestBrokenImages.aspx.cs"
   Inherits="testWebForms87.TestBrokenImages" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title>detecting broken images</title>

   <script src="jquery.min.js" type="text/javascript"></script>

   <script type="text/javascript">
       function errorReplace(arg) {
           //ارسال پيغام خطا
           $.ajax({
               type: "POST",
               url: "TestBrokenImages.aspx/GetErros",
               data: "{'image': '" + arg.src + "','page':'" + location.href + "'}",
               contentType: "application/json; charset=utf-8",
               dataType: "json"
           });
           //نمايش تصويري دلخواه بجاي نمونه مفقود
           $(arg).attr('src', 'missing.png');           
       }

       //بررسي وضعيت تك تك تصاوير پس از بارگذاري كامل صفحه
       $(document).ready(function() {
           $(window).bind('load', function() {
               $('img').each(function() {
                   if (!this.complete || (!$.browser.msie && (typeof this.naturalWidth == "undefined" || this.naturalWidth == 0))) {
                       errorReplace(this);
                   }
               });
           })
       });
   </script>

</head>
<body>
   <form id="form1" runat="server">
   <div>
       <img src="img1.png" />
       <img src="img2.png" />
   </div>
   </form>
</body>
</html>

using System;
using System.IO;
using System.Web.Services;

namespace testWebForms87
{
   public partial class TestBrokenImages : System.Web.UI.Page
   {
       protected void Page_Load(object sender, EventArgs e)
       {
       }

       [WebMethod]
       public static void GetErros(string image,string page)
       {
           //ارسال ايميل به مسؤول سايت و يا ذخيره خطاها در ديتابيس
       }
   }
}

در اين مثال زمانيكه صفحه كاملا بارگذاري شد، وضعيت تك تك تصاوير بررسي مي‌شود، اگر تصوير مفقودي وجود داشت (با اكثر مرورگرها سازگار است)، اطلاعات آن به تابع errorReplace ارسال خواهد شد.
در اين تابع با استفاده از jQuery Ajax ، اطلاعات تصوير مفقود و صفحه مربوطه به وب متد GetErros ما ارسال مي‌شود. سپس در اين متد مي‌توان يا آرگومان‌هاي دريافتي را به صورت يك ايميل به مسؤول سايت ارسال نمود و يا آن‌ها را جهت بررسي آتي در يك ديتابيس ذخيره كرد.
بديهي است بجاي قرار دادن وب متد فوق در صفحه جاري، مي‌توان يك وب سرويس را نيز ايجاد و متد را در آن قرار داد تا نيازي نباشد به ازاي هر صفحه سايت يكبار اين متد تكرار شود.

اگر موفق به اجراي اين مثال نشديد، براي مثال يك break point داخل متد GetErrors قرار دهيد و برنامه را در حالت ديباگ در ويژوال استوديو شروع كنيد، اگر اتفاق خاصي رخ نداد و به اين break point نرسيديد، احتمالا تنظيمات وب كانفيگ شما مناسب نيست. قسمت مربوط به system.web.extensions ، webServices و jsonSerialization بايد در وب كانفيگ موجود باشد كه VS 2008 اين موارد را به صورت خودكار اضافه مي‌كند.