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