يشرح لك هذا القسم نموذج ASP.NET WebPages HTML.
النموذج هو جزء من مستند HTML حيث يتم وضع عناصر التحكم في الإدخال (مربعات النص، وخانات الاختيار، وأزرار الاختيار، والقوائم المنسدلة).
مثيل الحلاقة
<html> <body> @{if (IsPost) { string اسم الشركة = Request["companyname"]; <p>لقد أدخلت: <br /> اسم الشركة: @companyname <br /> اسم جهة الاتصال: @contactname </p>}آخر{ <formmethod="post" action=""> اسم الشركة:<br /> <input type="text" name="CompanyName" value="" /><br /> اسم جهة الاتصال:<br /> <input type="text" name="ContactName" value="" /><br /><br /> <input type="submit" value="Submit" /> </form> } } </body> </html>
لنفترض أن لديك 3 صور في مجلد الصور الخاص بك وتريد عرض الصور ديناميكيًا بناءً على اختيار المستخدم.
يمكن تحقيق ذلك باستخدام قطعة بسيطة من كود Razor.
إذا كانت لديك صورة باسم "Photo1.jpg" في مجلد الصور بموقعك على الويب، فيمكنك استخدام عنصر HTML <img> لعرض الصورة، كما هو موضح أدناه:
<img src="images/Photo1.jpg" />
يوضح المثال التالي كيفية عرض الصورة التي حددها المستخدم من القائمة التالية:
@{var imagePath=""; if (Request["Choice"] != null){imagePath="images/" + Request["Choice"];} } <!DOCTYPE html> <html> <body> <h1>عرض الصور</h1> <formmethod="post" action=""> أريد أن أرى: <select name="Choice"> <option value=" Photo1.jpg">الصورة 1</option> <option value="Photo2.jpg">الصورة 2</option> <option value="Photo3.jpg">الصورة 3</option> </select> <input اكتب = "إرسال" value = "إرسال" /> @if (imagePath != ""){ <p> <img src="@imagePath " /> </p>} </form> </body> </html>يقوم الخادم بإنشاء متغير يسمى imagePath .
تحتوي صفحة HTML على قائمة منسدلة (عنصر <select>) باسم Choice . فهو يسمح للمستخدم باختيار اسم وفقًا لرغباته الخاصة (مثل Photo 1 )، وعندما يتم إرسال الصفحة إلى خادم الويب، يتم تمرير اسم ملف (مثل Photo1.jpg ).
يقرأ الكود الحلاقة قيمة الاختيار من خلال Request["Choice"] . إذا كان مسار الصورة (images/Photo1.jpg) الذي تم إنشاؤه من خلال التعليمات البرمجية صالحًا، فقم بتعيين مسار الصورة إلى المتغير imagePath .
في صفحات HTML، يتم استخدام العنصر <img> لعرض الصور. عند عرض الصفحة، يتم استخدام السمة src لتعيين قيمة متغير imagePath.
العنصر <img> موجود داخل كتلة if، وذلك لمنع عرض الصورة بدون اسم، كما هو الحال عند تحميل الصفحة لأول مرة.