معرفی کتابخانه BootBox JavaScript در MVC

دراین مقاله میخواهیم یک فریم ورک کاربردی به نام Bootbox را به شما معرفی کنیم و نحوه استفاده از آن را با استفاده ازطرح چندین مثال کاربردی در Asp.Net Mvc به شما آموزش بدهیم.

معرفی کتابخانه BootBox JavaScript در 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

فایل های ضمیمه
دانلود نسخه ی PDF این مطلب