Ajax Helper Method

Ajax , sayfalar yenilenmeden komple sunucuya gidip baştan yönlendirilmeden sadece istenilen kısmın gönderilip yanıt almak için kullanılır. Kullanım amacı daha hızlı olması , performansı etkiler kullanım kolaylığı sağlar sadece ilgili parçanın kısmın değişmesi kullanıcı dostu olmasını sağlamaktadır.
Jquey Nuget tan yükleyelim (Microsoft.jQuery.Unobtrusive.Ajax)
 Bu işlemler ile sayfa yenilenmeden çok hızlı bir şekilde sayfanın belli bir kısmında işlem yapabiliriz.

ActionLink ajax jelper method örneği ;

    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }

        public PartialViewResult LoadData()
        {
            List<string> veriler = new List<string>() {"c#","java","ajax","phyton" };

            System.Threading.Thread.Sleep(3000);


            return PartialView("_VeriListesiPartialView",veriler);
        }


    }

_VeriListesiPartialView.cshtml

@model  List<string>

@foreach (string item in Model)
{
    <li class="list-group-item">
       @item
 
    </li>
}

Index.cshtml

@{
    ViewBag.Title = "Index";
}
<br />
<br />
<h2>Index</h2>

@Ajax.ActionLink("Verileri Yükle","LoadData",null,new AjaxOptions() { HttpMethod="GET",UpdateTargetId="list",InsertionMode=InsertionMode.Replace,LoadingElementId= "loading",LoadingElementDuration=300 },new {@class= "btn btn-success" })
<hr />
<div id="loading" class="alert alert-danger" style="display:none">
    Yükleniyor...
</div>

<ul id="list" class="list-group">

</ul>

_Layout.cshtml içinde 
    <script src="~/scripts/jquery.unobtrusive-ajax.min.js"></script>
eklememiz gerekmektedir. 



Ajax.BeginForm ajax jelper method örneği ;

TodoItem.cs

namespace AjaxHelperMethods.Models
{
    public class TodoItem
    {
        public Guid Id { get; set; }
        public string Text { get; set; }
    }
}

Controller

public ActionResult Index2()
        {

            return View(new TodoItem());
        }
        [HttpPost]
        public PartialViewResult Index2(TodoItem model)
        {
            List<TodoItem> list = null;
                       
            if (Session["todoList"] != null)
            {
                list = Session["todoList"] as List<TodoItem>;
            }
            else
            {
                list = new List<TodoItem>();
            }
            model.Id = Guid.NewGuid();
            list.Add(model);
            Session["todoList"] = list;

            return PartialView("_TodoItemPartialView",model);
        }

View
Index2

@model AjaxHelperMethods.Models.TodoItem
@{
    ViewBag.Title = "Index2";
}

<h2>Index2</h2>
@using (Ajax.BeginForm("Index2",new AjaxOptions {HttpMethod="POST",LoadingElementId= "loading",LoadingElementDuration=300,UpdateTargetId="sonuc" ,InsertionMode=InsertionMode.InsertAfter}))
{
    <div>
        @Html.TextBoxFor(x => x.Text, new { @class = "form-control" })
    </div>
    <div class="col-md-10">
        <button type="submit" class="btn btn-success">Gönder</button>
    </div>
}

<hr />
<ul id="sonuc" class="list-group">
    <li id="loading" class="list-group-item list-group-item-warning" style="display:none" >Yükleniyor</li>
</ul>

PartialView
_TodoItemPartialView.cshtml


@model AjaxHelperMethods.Models.TodoItem

<li id="id_@Model.Id" class="list-group-item">@Model.Text</li>







Hiç yorum yok:

Yorum Gönder