عرض النص التحميل أثناء القيام WebRequest

StackOverflow https://stackoverflow.com/questions/185239

  •  06-07-2019
  •  | 
  •  

سؤال

لدي زر على نموذج ويب.النقر على هذا الزر سوف تفعل HttpWebRequest خلال الحدث onclick معالج.بعد طلب نسخ رد الطلب في HttpContext.الحالي.رد وإرسال ذلك إلى العميل.

هذا طلب ويب يمكن أن يستغرق بعض الوقت (تصل إلى 5 ثوان ، منذ إنشاء تقرير).خلال هذا الوقت المستخدم لديه أي دليل على أن أي شيء يحدث ، باستثناء المتصفح شريط التقدم و الغزل أي رمز (إذا كنت تستخدم IE).لذلك أنا بحاجة إلى مؤشر التحميل في حين أن هذا يحدث.

لقد حاولت استخدام جافا سكريبت أن الحرائق خلال الزر حدث onclick (باستخدام OnClientClick) ، في حين أن يعمل ، أنا لا أعرف كيفية معرفة عندما طلب ويب انتهى.وبما أننا فقط إرسال الاستجابة إلى العميل كامل إعادة النشر لا يحدث.

لقد حاولت الالتفاف على زر في UpdatePanel واستخدام UpdateProgress ، ولكن عندما نرسل الرد على HttpContext.الحالي.استجابة استجابة الدعوة.النهاية () ، نحصل على خطأ في جافا سكريبت ، لأن الرد ليس على ما يرام شكلت (نحن بإرسال ورقة excel المستخدم إلى تحميل).

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

أي الأفكار هنا ؟

هل كانت مفيدة؟

المحلول

كبديل المهنية AJAX.NET مكتبة مسج له طريقة لطيفة حقا من فعل هذا.

نلقي نظرة على هذا المثال من استخدام .صافي PageMethod (إذا كان ذلك ممكنا في السيناريو الخاص بك).

يمكنك تحديد صفحة استدعاء الأسلوب في مسج, يمكنك تك على التحميل الخاص بك...رسالة في خفية div.

أقول ما رد كنت ترغب في العودة على النجاح (أي عند الثانية 5 يتم إعداد تقرير) ثم إخفاء التحميل والتعامل مع البيانات.

نلقي نظرة على جافا سكريبت على صفحة الاتصال على سبيل المثال (عرض المصدر).

  1. لدي زر على الصفحة ، إضافة مسج onClick.
  2. عند النقر عليها يظهر مخفي تحميل شعبة ، يجعل اياكس الاتصال إلى صفحة الأسلوب الذي يأخذ معالم النموذج.
  3. الصفحة الأسلوب البريد الإلكتروني وما إلى ذلك ثم يعود إلى النموذج في onSuccess جافا سكريبت طريقة لدي هناك.
  4. على onSuccess يخفي تحميل div.

نصائح أخرى

وخدعة بسيطة ولقد استخدمت في الماضي هو إعادة توجيه إلى صفحة متوسطة مع شريط التقدم الرسوم المتحركة (GIF) ومن ثم يكون تلك الصفحة لا وظيفة حقيقية من البيانات. (أو حتى المنبثقة طبقة مع الرسوم المتحركة على ذلك، ورسالة مهذبة يطلب من المستخدم الانتظار لمدة دقيقة أو اثنين)

وردود الفعل بسيط من الرسوم المتحركة gif يخلق الوهم للمستخدم النهائي أن التطبيق لا توقف وأنها سوف تكون أكثر صبرا.

وثمة نهج آخر هو لتسليم بيانات باتجاه آخر إلى ترابط والعودة فورا مع رسالة تفيد بأن التقرير سوف تكون عبر البريد الالكتروني أو إتاحتها في قسم "تقارير" للموقع عندما يكون جاهزا. هذا النهج يفتقر إلى الاستفادة من الإخطار الفوري عند اكتمال التقرير بالرغم من ذلك.

هنا الحل :

  1. تحميل وفحص عينات مجانية المهنية AJAX.NET المكتبة.
  2. كتابة AjaxMethod أن يخلق الملف وإرجاع موقع الملف كمعلمة.
  3. كتابة من جانب العميل وظيفة استدعاء الأسلوب في الخطوة 2.عندما يكون هذا الأسلوب يسمى إظهار مؤشر.
  4. كتابة من جانب العميل طريقة الاستدعاء إلى إخفاء مؤشر عرض/تحميل ملف المستخدم طلب.
  5. إضافة العميل المكالمات وظيفة يو الخاص بك زر عنصر.

عندما الأسلوب الخاص في جانب الخادم ينتهي بك رد وسوف يطلق.

ويساعد هذا الأمل !

والحل أنا عرض هنا يهدف لإظهار طريقة للسماح مربع "تحميل ..." لتظهر بينما كنت معالجة من جانب الخادم وتختفي عند معالجة من جانب الخادم كاملة.

وسأفعل هذا مع الآلات AJAX الأساسية جدا (اختبار على FF، ولكن IE يجب أن تكون على ما يرام سواء)، أي ليست باستخدام إطار مثل نموذج أو مسج أو دوجو، كما لم يتم تحديد علمك عنهم.

لتمكنك من فهم أفضل للخدعة، وفيما يلي مجرد مثال صغير ولا أدعي أن يكون حلا خارج مربع. أنا لا تميل إلى أن تكون سطحية، ولكن أعتقد مثال أكثر وضوحا يمكن أن يفسر أفضل من العديد من الكلمات. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>First Example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            .hidden {
                display: none;
            }
            .loadingInProgress {
                color: #FFFFFF;
                width: 75px;
                background-color: #FF0000;
            }
        </style>
    <script type="text/javascript">
        var httpRequest;
        if (window.XMLHttpRequest) { // Mozilla, Safari, ...
            httpRequest = new XMLHttpRequest();
            httpRequest.overrideMimeType('text/xml');
        } else if (window.ActiveXObject) { // IE
            try {
                httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e) {
                try {
                    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e) {}
            }
        }

        if (!httpRequest) {
            alert('Giving up :( Cannot create an XMLHTTP instance');
        }

        httpRequest.onreadystatechange = function(){
            switch (httpRequest.readyState) {
            case 1: // Loading
                document.getElementById('loading').className = "loadingInProgress";
                break;
            case 4: // Complete
                document.getElementById('loading').className = "hidden";
                if (httpRequest.status == 200) {
                    // perfect!
                } else {
                    // there was a problem with the request,
                    // for example the response may be a 404 (Not Found)
                    // or 500 (Internal Server Error) response codes
                }
                break;
            }
        };

        function go() {
            httpRequest.open('GET', document.getElementById('form1').action, true);
            httpRequest.send('');
        }
    </script>

  </head>
  <body>
      <div id="loading" class="hidden">Loading...</div>
      <form id="form1" name="form1" action="doSomething.php">
          <input type="button" value="Click to submit:" onclick="go()" />
      </form>
  </body>
</html>

وكما ترون، هناك <div> التي تتولى "تحميل ..." رسالة.

والمبدأ هو لإظهار / إخفاء <div> اعتمادا على XMLHttpRequest الكائن readyState ل.

ولقد استعملت معالج onreadystatechange من XMLHttpRequest لتحريك التغيير readyState.

ووفب النصي الخلفية يمكنني استخدام (أعلن وaction النموذج) لا مجرد النوم (5)، للسماح لل"تحميل ..." رسالة تظهر لمدة 5 ثوان. 

<?php
sleep(5);
header('Cache-Control: no-cache');
echo "OK";
?>

ورأس Cache-control: no-cache ضروري، لأن عادة إذا لم تقم بتعيين سيكون المتصفح مؤقتا الاستجابة وتجنب إعادة تقديم الطلب إذا كان يجب عليك في حاجة إليها.

ومصدر جيد ل "الشروع في العمل" وثائق AJAX هو موزيلا MDC .

والشيء كله يمكن أن يتم التعامل معها أكثر من ذلك بكثير بلطف بواسطة إطار جافا سكريبت مثل النموذج، والاستفادة من نهج متصفح آمن لها، مما يوفر لك ساعات من التصحيح.

تحرير:

ولقد اخترت فب 'السبب أنا لا أعرف ASP.NET ولا ASP، آسف لذلك.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top