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

نمایش بارگذاری تصویر GIF در ارسال فرم در ASP.Net MVC
0 0
نمایش بارگذاری تصویر GIF در ارسال فرم در ASP.Net MVC

با سلام  در این مقاله با یک مثال نحوه نمایش بارگیری (پیشرفت) تصویرGIF هنگام ارسال فرم با استفاده از روش افزودنی Ajax.BeginForm در ASP.Net MVC Razor توضیح خواهیم داد
از روش افزودنی Ajax.BeginForm برای برقراری ارتباط AJAX به روش Action Controller استفاده می شود و هنگامی که ارتباط AJAX در حال انجام است ، Loading تصویر GIF در ASP.Net MVC Razor نمایش داده می شود.

نصب و پیکربندی کتابخانه AJAX
شما نیاز به نصب Unobtrusive AJAX Library با استفاده از NuGet Package Manager مطابق شکل زیر دارید.

برای مدیریت رویداد OnSuccess از روش Ajax.BeginForm در جاوا اسکریپت ،Unobtrusive AJAX Library مورد نیاز است.
پس از نصب کتابخانه ، jquery.unobtrusive-ajax.min.js باید در View دریافت شود.
سپس باید کلید زیر را به بخش AppSettings فایل Web.Config اضافه کنید تا از فعال بودن کتابخانه AJAX Unobtrusive اطمینان حاصل شود.

<add key="UnobtrusiveJavaScriptEnabled" value="true"/>

توجه :

انجام مراحل فوق به منظور استفاده از رویداد OnSuccess از روش Ajax.BeginForm در JavaScript بسیار مهم است .
Model
در زیر یک کلاس Model به نام PersonModel با چهار ویژگی یعنی PersonId ، نام ، جنسیت و شهر وجود دارد.

public class PersonModel
{
    ///<summary>
    /// Gets or sets PersonId.
    ///</summary>
    public int PersonId { get; set; }
 
    ///<summary>
    /// Gets or sets Name.
    ///</summary>
    public string Name { get; set; }
 
    ///<summary>
    /// Gets or sets Gender.
    ///</summary>
    public string Gender { get; set; }
 
    ///<summary>
    /// Gets or sets City.
    ///</summary>
    public string City { get; set; }
}

Controller
 باید یک کلاس Controller را به پروژه خود اضافه کنید. دو روش وجود دارد ، یکی برای اجرای عملیات GET و دیگری برای انجام عملیات POST.
متد Action برای عملیات AJAX POST یک شیء از کلاس PersonModel را به عنوان پارامتر می پذیرد. مقادیر ارسال شده از فرم در داخل View از طریق این پارامتر دریافت می شود.
و سپس همان شیء کلاس PersonModel با عنوان JSON به عنوان View برگشت داده می شود.

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public JsonResult AjaxMethod(PersonModel person)
    {
        int personId = person.PersonId;
        string name = person.Name;
        string gender = person.Gender;
        string city = person.City;
        return Json(person);
    }
}

View
در داخل View ، اولین خط کلاس PersonModel به عنوان Model برای View اعلام می شود.
View شامل یک فرم HTML است که با استفاده از روش Ajax.BeginForm با پارامترهای زیر ساخته شده است.
ActionName - نام روش Action.
ControllerName - نام Controller در این حالت Home است.
AjaxOptions - این ویژگی های مختلفی را که برای ارتباط AJAX استفاده می شود را مشخص می کند. در زیر سه ویژگی مورد استفاده در این مثال وجود دارد.
1. OnSuccess - نام عملکرد JavaScript است که در صورت موفقیت آمیز بودن ارتباط AJAX پاسخی را دریافت می کند.
2. OnFailure - نام عملکرد JavaScript که در صورت عدم موفقیت ارتباط AJAX پاسخی را دریافت می کند.
3. LoadingElementId - شناسه عنصری که هنگام شروع ارتباط AJAX نمایش داده می شود.
سه قسمت TextBox وجود دارد که برای گرفتن مقادیر برای PersonId ، نام و شهر با استفاده از روش Html.TextBoxFor ایجاد شده است. در حالی که برای گرفتن مقدار Gender ، DropDownList با سه گزینه با استفاده از عملکرد Html.DropDownListFor ایجاد می شود.
در انتهای فرم یک دکمه ارسال وجود دارد و وقتی دکمه کلیک می شود ، ارتباط AJAX برقرار و سرانجام یک عنصر HTML DIV مخفی وجود دارد که هنگام انجام ارتباط AJAX نمایش داده می شود.

@model Ajax_Form_Post_MVC.Models.PersonModel
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
    <style type="text/css">
        body {
            font-family: Arial;
            font-size: 10pt;
            margin: 0;
            padding: 0;
        }
        table {
            border: 1pxsolid#ccc;
            border-collapse: collapse;
            background-color: #fff;
        }
        table th {
            background-color: #B8DBFD;
            color: #333;
            font-weight: bold;
        }
        table th, table td {
            padding: 5px;
            border: 1pxsolid#ccc;
        }
        table, table table td {
            border: 0pxsolid#ccc;
        }
        input[type=text], select {
            width: 150px;
        }
        .modal {
            position: fixed;
            z-index: 999;
            height: 100%;
            width: 100%;
            top: 0;
            background-color: Black;
            filter: alpha(opacity=60);
            opacity: 0.6;
            -moz-opacity: 0.8;
            display: none;
        }
        .center {
            z-index: 1000;
            margin: 50pxauto;
            padding: 10px;
            width: 130px;
            background-color: White;
            border-radius: 10px;
            filter: alpha(opacity=100);
            opacity: 1;
            -moz-opacity: 1;
        }
        .centerimg {
            height: 128px;
            width: 128px;
        }
    </style>
</head>
<body>
    @using (Ajax.BeginForm("AjaxMethod", "Home",
                    new AjaxOptions
                    {
                        OnSuccess = "OnSuccess",
                        OnFailure = "OnFailure",
                        LoadingElementId = "progress"
                    }))
    {
        <table id="tblPersons" cellpadding="0" cellspacing="0">
            <tr>
                <th colspan="2" align="center">Person Details</th>
            </tr>
            <tr>
                <td>PersonId: </td>
                <td>
                    @Html.TextBoxFor(m => m.PersonId)
                </td>
            </tr>
            <tr>
                <td>Name: </td>
                <td>
                    @Html.TextBoxFor(m => m.Name)
                </td>
            </tr>
            <tr>
                <td>Gender: </td>
                <td>
                    @Html.DropDownListFor(m => m.Gender, new List<SelectListItem>
                   { new SelectListItem{Text="Male", Value="M"},
                     new SelectListItem{Text="Female", Value="F"}}, "Please select")
                </td>
            </tr>
            <tr>
                <td>City: </td>
                <td>
                    @Html.TextBoxFor(m => m.City)
                </td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" value="Submit"/></td>
            </tr>
        </table>
    }
    <div id="progress" class="modal">
        <div class="center">
            <img src="~/images/loader4.gif"/>
        </div>
    </div>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
 
    <script type="text/javascript">
        function OnSuccess(response) {
            var message = "Person Id: " + response.PersonId;
            message += "\nName: " + response.Name;
            message += "\nGender: " + response.Gender;
            message += "\nCity: " + response.City;
            alert(message);
        }
        function OnFailure(response) {
            alert("Error occured.");
        }
    </script>
</body>
</html>

 


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

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