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

پیاده سازی DatePicker jQuery با ReadOnly TextBox در ASP.Net MVC
0 0
پیاده سازی DatePicker jQuery با ReadOnly TextBox در ASP.Net MVC

با سلام در این مقاله با یک مثال توضیح خواهیم داد که چگونه می توان jQuery DatePicker را با ReadOnly TextBox در ASP.Net MVC Razor پیاده سازی کرد.
در این مقاله نحوه دریافت مقدار TextBox که دارای مقدار تاریخ انتخاب شده با استفاده از jQuery DatePicker در ASP.Net MVC Razor است توضیح داده خواهد شد.
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 selectedDate)
    {
        ViewBag.Message = "Selected Date: " + selectedDate;
        return View();
    }
}

View
View شامل یک فرم HTML است که با استفاده از روش Html.BeginForm با پارامترهای زیر ایجاد شده است.
ActionName - نام عمل در این حالت Index است.
ControllerName - نام Controllerدر این حالت Home است.
FormMethod - این روش فرم یعنی GET یا POST را مشخص می کند. در این حالت روی POST تنظیم می شود.
در داخل فرم ، یک TextBox و یک دکمه ارسال وجود دارد. TextBox ساخته شده ReadOnly است و با پلاگین jQuery DatePicker استفاده میشود .
با انتخاب تاریخ و فشار دادن دکمه ارسال ، فرم ارسال و مقدار تاریخ انتخاب شده در یک شی ViewBag باز می شود که با استفاده از جعبه پیام هشدار JavaScript نمایش داده می شود.

@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        @Html.TextBox("SelectedDate", "", new { @readonly = "readonly" })
        <br/>
        <br/>
        <input type="submit" value="Submit"/>
    }
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css"/>
    <script type="text/javascript">
        $(function () {
            $("#SelectedDate").datepicker({
                showOn: 'button',
                buttonImageOnly: true,
                buttonImage: '/images/calendar.gif'
            });
        });
    </script>
    @if (ViewBag.Message != null)
    {
        <script type="text/javascript">
            $(function () {
                alert("@ViewBag.Message");
            });
        </script>
    }
</body>
</html>

 


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

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