معرفی کتابخانه BootBox JavaScript در MVC
سه شنبه 13 تیر 1396دراین مقاله میخواهیم یک فریم ورک کاربردی به نام Bootbox را به شما معرفی کنیم و نحوه استفاده از آن را با استفاده ازطرح چندین مثال کاربردی در Asp.Net Mvc به شما آموزش بدهیم.
مقدمه
Bootbox در asp.net mvc چیست؟
Bootbox.js یک کتابخانه جاوا اسکریپتی کوچک است که به شما اجازه می دهد تا کادرهای محاوره ای برنامه نویسی را با استفاده از Modal Bootstrap هر المنت مورد نیاز Dom یا JS event handlers را ایجاد، مدیریت، حذف کنید.
Bootbox.js برای استفاده اسانتر از modal هابا bootstrap ایحاد شده اند.
توضیحات
مرجع اسکریپت ها را یادداشت کنید.
از آنجا که Bootbox یک بسته بندی برای Modal Bootstrap است، شما باید کتابخانه های زیر را به ترتیب رفرنس دهید:
jQuery
Bootstrap
Bootbox
مراحل زیر را به ترتیب دنبال کنید:
مرحله 1
یک برنامه Mvc 5 به نام "SatyaGoogleMapBootstrapMVC" ایجاد کنید.
مرحله 2
یک فایل کلاس کنترلر با نام "HomeController.cs" ایجاد کنید.
کد رفرنس ها:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace SatyaGoogleMapBootstrapMVC.Controllers { public class HomeController : Controller { public ActionResult BootBox() { return View(); } } }
در اینجا ما یک action method در داخل کنترلر به نام "BootBox ()" ایجاد کردیم.
public ActionResult BootBox() { return View(); }
مرحله 3
کتابخانه Bootbox Javascript ورژن 4.0.0 که نام آن bootbox.min.js است را اضافه کنید.
این فایلی که ما ان را اضافه کردیم برای نشان دادن pop up هشدار به جای جعبه هشدار معمولی javascript است.
همچنین بوت استرپ و چند پلت فرمی پشتیبانی میکند.
مرحله 4
یک ویو به نام "BootBox.cshtml" ایجاد کنید.
کد های رفرنس زیر را اضافه کنید:
<title>@ViewBag.Title</title> <h2 style="background-color: Yellow;color: Blue; text-align: center; font-style: oblique">Satyaprakash's BootBox Intro Using MVC and BOOTSTRAP</h2> <link href="~/Content/bootstrap.css" rel="stylesheet" /> <script src="~/Scripts/bootstrap.min.js"></script> <script src="~/Scripts/jquery-1.10.2.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"> </script> <script> bootbox.prompt({ title: "prompt به همراه یک textarea!", inputType: 'textarea', callback: function (result) { bootbox.alert(result); } }); </script> <footer> <p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">© @DateTime.Now.ToLocalTime()</p> @*Add Date Time*@ </footer>
توضیحات کد
برای پشتیبانی از بوت استرپ لینک های زیر را اضافه کنید:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
برای نمایش پنجره هشدار BootBox این مسیر فایل را همانطور که قبلا شرح داده شد اضافه کنید.
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"> </script>
یا
<script src="bootbox.min.js"></script>
به جای آن ما میتوانیم که از CDN link Wrapper ها برای جاوا اسکریپت alert ها ، confirm و دیالوگ های انعطاف پذیر دیگر با استفاده از فریم ورک bootstrap استفاده کنیم.CDN برای کتابخانه های مربوط به وب سایت ها است و باعث افزایش سرعت در وب سایت شما میشود.
https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js
https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.js
ما اسکریپت مربوط به bootbox را در prompt اضافه کردیم.
ما اسکریپت های مربوط به bootbox را اضافه کردیم و به صورت یک مثال یک textarea و user در آن قرار دادیم تا بوسیله alert بوت باکس نمایش داده شود.
bootbox.prompt({ title: "prompt به همراه یک textarea!", inputType: 'textarea', callback: function (result) { bootbox.alert(result); } });
برای prompt
bootbox.prompt
برای alert
bootbox.alert
برای Text Area
title: "prompt به همراه یک textarea!", inputType: 'textarea',
ما از مقدار برگشتی (callback ) تابع برای دریافت نتایج از text area استفاده میکنیم.یک callback ، انتخاب کاربر را کنترل می کند.
مقدار برگشتی تابع یک مقدار درست(true) یا غلط (false) را بر اساس اینکه کاربر کدام دکمه را فشار داده است ، برمیگرداند.
هر کدی که مربوط به انتخاب کاربر میشود باید در قسمت مقدار بازگشتی تابع قرار بگیرد.
Prompt
یک دیالوگ prompt برای ورودی user نمایش داده می شود.
با فشار دادن کلید ESC یا کلیک کردن close، دیالوگ را رد می کند و فراخوانی تماس را به همان صورت که کاربر دکمه لغو را کلیک کرده است فراخوانی می کند.
دیالوگ های Prompt نیاز به یک تابع فراخوانی دارند.
با فشار دادن کلید ESC یا کلیک کردن close، دیالوگ را رد می کند و فراخوانی تماس را به همان صورت که کاربر دکمه لغو را کلیک کرده است فراخوانی می کند.
دیالوگ های Prompt نیاز به تابع callback دارند.
تمام مدال های بوت باکس ، برخلاف هشدار(alert ) های معمول(natve) یا Prompt ها رویدادهای غیر بلاکی (non-blocking) ایجاد میکنند.
این کار را در هنگامی که از دیالوگ Prompt استفاده میکنید انجام دهید، زیرا این یک جایگزین برای دیالوگ بومی prompt نیست.
هر کدی که به ورودی کاربر بستگی دارد باید در تابع callback قرار گیرد.Prompt به گزینه title option نیاز دارد و گزینه message را غیر فعال میکند.
گزینه های دیالوگ Prompt
دیالوگ Prompt دارای ورودی های تک خطی( single-line text) است.شما می توانید نوع prompt Bootbox را با استفاده از گزینه های prompt-only که در زیر هستند تغییر دهید:
Name - value ، توضحیات: شما می توانید مقدار اولیه prompt را با استفاده از گزینه value تنظیم کنید.
Name - inputType ، توضیحات:نوع ورودی تولید شده برای دیالوگ prompt را تغییر می دهد.مقادیر معتبر برای ورودی نوع عبارتند از: متن یا text (به طور پیش فرض)، textarea ، ایمیل، انتخاب یا select ، جعبه چک یا checkbox ، تاریخ یا date ، زمان یا time ، شماره یاnumber و رمز عبور یا password.
Name - inputOptions ، توضیحات : اگر select یا check box را به عنوان نوع ورودی مشخص کنید، شما همچنین باید یک آرایه از مقادیر معتبر در قالب {' ' :text: ' '، value: ' '، group} ارائه کنید.
group یک گزینه اختیاری برای <select> است ; اگر مشخص شود المنت <optgroup> برای هر مقدار گروهی که در ارائه inputOptions یافت شود تولید می شود.
مثال 1
bootbox.confirm({ message: "این یک تاییدیه به همراه دکمه سفارشی و رنگی است!آیا این را دوست دارید؟", buttons: { confirm: { label: 'Yes', className: 'btn-success' }, cancel: { label: 'No', className: 'btn-danger' } }, callback: function (result) { bootbox.alert('این در callback ثبت میشود: ' + result); } });
آدرس آن -> http://localhost:57237/Home/BootBox
خروجی اول
این به ما دکمه yes/No را نشان میدهد و بعد از کلیک بر روی آن به ما True / False را نشان می دهد.
Desktop View
ویو موبایل
مثال 2
bootbox.prompt({ title: "این یک prompt با ورودری از نوع password است!", inputType: 'password', callback: function (result) { bootbox.alert(result); } });
خروجی 2
این به شما textbox پسورد را نمایش خواهد داد.
مثال 3
var dialog = bootbox.dialog({ title: 'یک دیالوگ سفارشی به همراه init', message: '<p><i class="fa fa-spin fa-spinner"></i> در حال بارگذاری...</p>' }); dialog.init(function () { setTimeout(function () { dialog.find('.bootbox-body').html('من بعد از بارگذاری صفحه نمایش داده خواهم شد!'); }, 3); });
خروجی 3
این به شما دیالوگ با بارگیری را نشان می دهد و پس از گذشت مدت زمان مشخصی متن را به شما نشان خواهد داد.
مثال 4
bootbox.alert({ message: "alert با سایز کوجک", size: 'small' });
خروجی 4
این به شما یک alert box کوچک نشان میدهد.
مثال 5
bootbox.confirm({ title: "نابود کردن سیاره?", message: "آیا می خواهید ستاره مرگ را ، در حال حاضر فعال کنید?این قابل بازگشت نیست", buttons: { cancel: { label: '<i class="fa fa-times"></i> لغو' }, confirm: { label: '<i class="fa fa-check"></i> تایید' } }, callback: function (result) { bootbox.alert('این در callback ثبت می شود: ' + result); } });
خروجی 5
به شما یک input ارائه میدهد که فقط ورودی از نوع عدد میگیرد.بعد از وارد کردن عدد بر روی دکمه کلیک کنید که سپس عدد وارد شده توسط کاربر را ه شما نشان می دهد.
مثال 6
bootbox.prompt({ title: "یک prompt به همراه چک بکس!", inputType: 'checkbox', inputOptions: [ { text: 'انتخاب اول', value: '1', }, { text: 'انتخاب دوم', value: '2', }, { text: 'انتخاب سوم', value: '3', } ], callback: function (result) { bootbox.alert(result); } });
خروجی 6
مثال 7
bootbox.prompt({ title: "یک prompt به همراه ورودی از نوع عدد!", inputType: 'number', callback: function (result) { bootbox.alert(result); } });
خروجی 7
مثال 8
bootbox.alert({ size: "small", title: "سایت ما", message: "برنامه نویسان", callback: function (result) { bootbox.alert(result); } });
خروحی 8
مثال 9
bootbox.alert("نام کاربری : <b style='color:red'>bibak</b>")
خروجی 9
مثال 10
bootbox.dialog({ message: '<div class="text-center"><i class="fa fa-refresh fa-spin" style="color:green;"></i> بارگذاری...</div>' })
خروجی 10
آموزش asp.net mvc
- ASP.net MVC
- 1k بازدید
- 5 تشکر