توضیحات و دانلود

مثالی از Bootstrap TimePicker در ASP.Net MVC Razor
0 0
مثالی از Bootstrap TimePicker در ASP.Net MVC Razor

با سلام در این مقاله با یک مثال توضیح خواهیم داد که چگونه می توان Bootstrap TimePicker را در ASP.Net MVC Razor پیاده سازی کرد.
Bootstrap TimePicker با استفاده از کتابخانه MVC Bootstrap TimePicker در ASP.Net MVC Razor اجرا می شود.
دانلود و نصب کتابخانه MVC Bootstrap TimePicker
برای دانلود و نصب کتابخانه MVC Bootstrap TimePicker ، باید مراحل زیر را دنبال کنید :
1. کتابخانه MVC Bootstrap TimePicker را از آدرس زیر دریافت کنید: کتابخانه MVC Bootstrap TimePicker را دانلود کنید .
2- پس از دانلود ، تمام فایلهای Zip را در پوشه ای بنام TimePicker ایجاد شده در پوشه Project خود کپی کنید و سپس فایل های CSS و JS را مانند تصویر زیر به پروژه اضافه کنید.

3- سپس با استفاده از گزینه Add Reference و سپس انتخاب فایل از پوشه TimePicker موجود در پوشه Project ، می توانید MvcBootstrapTimepicker.dll را به پروژه خود اضافه کنید.

4- پس از افزودن مرجع ، شما نیاز به ساخت پروژه دارید.
 
MVC Bootstrap TimePicker Documentation
مستندات مربوط به کتابخانه MVC Bootstrap TimePicker در اینجا موجود است .
 
Controller
Controller از دو روش تشکیل شده است.
روش انجام عملیات GET
در داخل این روش Action ، به View برگشت داده می شود.
 
روش انجام عملیات POST
این روش هنگام ارسال فرم فراخوانی می شود. مقدار زمان انتخاب شده بارگیری شده و به یک شیء ViewBag تنظیم می شود.
مقدار شیء ViewBag برای نمایش زمان انتخاب شده در View با استفاده از جعبه پیام هشدار JavaScript استفاده خواهد شد.

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public ActionResult Index(string selectedTime)
    {
        ViewBag.Message = "Selected Time: " + selectedTime;
        return View();
    }
}

View
در خط اول ، به مرجع کتابخانه MVC Bootstrap TimePicker اضافه می شود تا بتوان از آن در View استفاده کرد.
در داخل View ، فایل jQuery JS ، فایل Bootstrap JS ، فایل Bootstrap CSS و کلیه فایلهای JS و CSS مورد نیاز کتابخانه MVC Bootstrap TimePicker استفاده میشوند .
Viewشامل یک فرم HTML است که با استفاده از روش Html.BeginForm با پارامترهای زیر ایجاد شده است.
ActionName - نام عمل در این حالت Index است.
ControllerName - نام Controller در این حالت Home است.
FormMethod - این روش فرم یعنی GET یا POST را مشخص می کند. در این حالت روی POST تنظیم می شود.
در داخل فرم ، یک کنترل MVC Bootstrap TimePicker و یک دکمه ارسال وجود دارد.
هنگامی که زمان انتخاب در کنترل MVC Bootstrap TimePicker انتخاب و دکمه Submit فشار داده شد ، فرم ارسال می شود و مقدار زمان انتخاب شده در یک شی ViewBag که با استفاده از جعبه پیام هشدار JavaScript نمایش داده می شود ، باز می گردد.

@using MvcBootstrapTimepicker;
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
    <style type="text/css">
        body {
            margin-left: 10pt;
            padding: 10pt;
        }
 
        .TimePickerWidth {
            width: 150px;
        }
    </style>
</head>
<body>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="~/TimePicker/bootstrap-timepicker.css" rel="stylesheet"/>
    <link href="~/TimePicker/MvcBootstrapTimepicker.css" rel="stylesheet"/>
    <script src ="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="~/TimePicker/bootstrap-timepicker.js" type="text/javascript"></script>
    < script src="~/TimePicker/MvcBootstrapTimepicker.js" type="text/javascript"></script>
 
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        @Html.BootstrapTimePicker("SelectedTime").ContainerClass("TimePickerWidth");
        <br/>
        <br/>
        <input type="submit" value="Submit"/>
    }
    @if (ViewBag.Message != null)
    {
        <script type="text/javascript">
            $(function () {
                alert("@ViewBag.Message");
            });
        </script>
    }
</body>
</html>

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :