ورود / ثبت نام
0
0

ایجاد دکمه رد کردن عکس با استفاده از Ajax در MVC 5

268 بازدید
رد کردن عکس

رد کردن عکس

در این مقاله با هم به سراغ ایجاد دکمه ای برای رد کردن عکس به عقب و جلو با استفاده از Ajax در MVC 5 خواهیم رفت. امیدوارم از آن استفاده ببرید . توضیحات کامل به همراه تصاویر برایتان در ادامه ی مطلب قرار داده شده است. با من همراه باشید …

رد کردن عکس

قدم اول: مطمئن شوید که Microsoft jQuery Ajax محبوب را در پوشه script خود دارید.

 انواع روش های رد کردن عکس در MVC

در غیر این صورت اگر ندارید با استفاده از دستور زیر بسته را در nuget نصب کنید.

Install-PackageMicrosoft.jQuery.Unobtrusive.Ajax

قدم دوم: یک Controller، Model و View در اپلیکیشن خود ایجاد کنید.

قدم سوم: دو خط کد مهم زیر را در پروژه خود وارد کنید.

 استفاده از Ajax در MVC 5

قدم چهارم: viewmodel را ایجاد کنید، متد GetList را اضافه کنید.

public class ImageModel
{
    public ImageViewModel SelectedImage;
    public ImageModel()
  {
}

public List  ImageViewModel  GetList()
{
List  ImageViewModel  list = new List  ImageViewModel  ();
list.Add(new ImageViewModel
{
Id = 1, Path = ~/Content/Images/IMG_7785.jpg
});
list.Add(new ImageViewModel
{
Id = 2, Path = ~/Content/Images/IMG_7788.jpg
});
list.Add(new ImageViewModel
{
Id = 3, Path = ~/Content/Images/IMG_7790.jpg
});
list.Add(new ImageViewModel
{
Id = 4, Path = ~/Content/Images/IMG_7799.jpg
});
list.Add(new ImageViewModel
{
Id = 5, Path = ~/Content/Images/IMG_7847.jpg
});
list.Add(new ImageViewModel
{
Id = 6, Path = ~/Content/Images/IMG_7849.jpg
});
return list;
}

}

قدم پنجم: Partial view را از main view درخواست کنید.

دکمه رد کردن عکس با استفاده از Ajax

قدم ششم: Add Ajax.BeginForm

پارامتر های زیر را خواهد داشت:

  • Action Name
  • Controller Name
  • AjaxOption

هم چنین دو دکمه Prev (قبل) و next (بعد) Ajax.BegineForm را به صورت زیر اضافه کنید.

برای دکمه Prev و next دو مقادیر متفاوت داده می شود و نام رایج آن بسته به نوع دکمه انتخاب می شود.

 انواع روش های رد کردن عکس در MVC

اضافه کردن View پایانی به صورت زیر می باشد:

@model DropdownGrid.Models.ImageModel
@ {
ViewBag.Title = Albam;
}

h2  Index  /h2  script type = text/javascript
src = @Url.Content(~/Scripts/jquery - 1.10 .2.js )   /script  script type = text/javascript
src = @Url.Content(~/Scripts/jquery.unobtrusive - ajax.min.js )   /script

 br 
 br 
 br 
 br 

 fieldset 
 div id = dvCategoryResults 
@ {
Html.RenderPartial(_PartialImage, Model);
}  /div  /fieldset

 fieldset 
@using(Ajax.BeginForm(GetNextOrPrevImage, Image, new
{
SelectedId = Model.SelectedImage
},
new AjaxOptions
{
HttpMethod = Post, UpdateTargetId = dvCategoryResults
})) {

 input type = submit
value = 
id = btnPrev
name = ButtonType / 
 input type = submit
value = 
id = btnNext
name = ButtonType / 
}
 /fieldset

کد Controller

public class ImageController: Controller
{
    public ActionResult Index() {
        ImageModel _objuserloginmodel = new ImageModel();
        ViewBag.SelectedId = 0;
        TempData[SelectedId] = 0;
_objuserloginmodel.SelectedImage = _objuserloginmodel.GetList()[0];
return View(_objuserloginmodel);
}

[HttpPost]
public ActionResult GetNextOrPrevImage(ImageViewModel SelectedImage, string ButtonType)
{
ImageModel _objuserloginmodel = new ImageModel();
List lt; ImageViewModel  GetList = _objuserloginmodel.GetList();

int id = System.Convert.ToInt32(TempData[SelectedId]);

if (ButtonType.Trim() == )
_objuserloginmodel.SelectedImage = GetList[++id lt; GetList.Count ? id : --id];
else if (ButtonType.Trim() == lt;)
_objuserloginmodel.SelectedImage = GetList[--id  -1 ? id : ++id];

TempData[SelectedId] = id;
return PartialView(_PartialImage, _objuserloginmodel);
}
}

و در نهایت به صورت زیر خواهد شد.

رد کردن عکس

موفق باشید !


    
  • پسورد: www.mspsoft.com
آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=17355
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
داریوش فرخی
داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .
مطالب بیشتر
برچسب ها:

نظرات

0 نظر در مورد ایجاد دکمه رد کردن عکس با استفاده از Ajax در MVC 5

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

هیچ دیدگاهی نوشته نشده است.