Arkadaşlar Merhabalar ,
Ajax ile web servis ve entity framework kullanarak , veritabanına kayıt ekleme ve listeleme ile alakalı basit bir örnek paylaşacağım. Amacım ajax ile bu işlem nasıl yapılacağını göstermek , bu yüzden server tarafında ki kodların üzerinden çok durmadım.
Örnek olması açısından , bir tabloya kayıt ekleme ve ekledikten sonra kayıtların listelenmesini göstereceğim. Hızlı olması açısından
Jquery datatable plug in i kullanıyorum. Çok kullanışlıdır.Bakmanızı tavsiye ederim.
Entity framework te tablo nasıl oluşturulur ,kayıt nasıl eklenir ve listelenir bunlara değinmek istemiyorum. Az çok bilginiz olduğunu farz ediyorum.Dediğim gibi amacım daha çok
AJAX ve
Web servis mantığını göstermek.
Daha öncesinde User.cs adında bir class oluşturdum.Bu classın kullanıcı adı , soyadı, yaş ve iş olmak üzeren 4 tane elemanı var.
Projemize bir tane web servis ekliyoruz. Ben adına UserWebService.asmx dedim. Web servis ekledikten sonra , ekleme ve listeleme için aşağıdaki iki web methodu yazdım.
UsersContext db = new UsersContext();
[WebMethod]
public void
AddNewUser(User usr)
{
//User class
tipinde parametre alıyor.
//ajax tarafından
buraya bir object göndereceğim için böyle tanımladım.
//ajax tarafında
göndereceğiniz veri tipine göre parametre tipide değişir.
var User = new User();
User.UserName = usr.UserName;
User.UserLastName =
usr.UserLastName;
User.UserAge = usr.UserAge;
User.UserPhoneNum = usr.UserPhoneNum;
db.Users.Add(User);
db.SaveChanges();
}
[WebMethod]
public void
getUsers()
{
IEnumerable<User>
AllUsers = db.Users;
List<User>
ListUser = new List<User>();
foreach (var user in AllUsers)
{
User usr = new User();
usr.UserName = user.UserName;
usr.UserLastName =
user.UserLastName;
usr.UserAge = user.UserAge;
usr.UserPhoneNum =
user.UserPhoneNum;
ListUser.Add(usr);
}
//veri tabanında
listelediğim verileri classa atıp
listeye ekliyorum.
//listeyi ,
ajax tarafında json formatında alabilmek için
//bu işlemden
geçiriyorum
JavaScriptSerializer js = new JavaScriptSerializer();
Context.Response.Write(js.Serialize(ListUser));
}
Şimdi de arayüz tarafına bakalım.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="jqueryDatatable._default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Jquery
Table</title>
<script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script type="text/javascript">
$(document).ready(function () {
$('#datatable').dataTable();
$('#addUser').click(function () {
// user object i web methoda gönderiyorum.
var user = {};
user.UserName = $('#usrName').val();
user.UserLastName = $('#usrLstName').val();
user.UserAge = $('#usrAge').val();
user.UserPhoneNum = $('#usrPhone').val();
$.ajax({
url: 'UserWebService.asmx/AddNewUser',
dataType:'json',
// json formatında veri göndereceğimi belirtiyorum
contentType: 'application/json;charset=utf-8',
data:'{usr:'+JSON.stringify(user)+'}',
// user i json nesnesi haline getiriyoruz.
method: 'post',
success: function () {
getAllUsers();
},
error: function (err) {
alert(err);
}
});
});
function getAllUsers() {
$.ajax({
url: 'UserWebService.asmx/getUsers',
dataType: "json",
method: 'post',
success: function (data) {
var userTable = $('#datatable tbody');
$(data).each(function (index, usr) {
userTable.append('<tr><td>' + usr.UserName
+ '</td><td>' +
usr.UserLastName + '</td><td>' + usr.UserAge + '</td><td>' + usr.UserPhoneNum + '</td></tr>')
});
},
error: function (err) {
alert(err);
}
});
}
});
</script>
</head>
<body style="font-family:Arial;padding:50px">
<form id="form1" runat="server">
<table id="datatable">
<thead>
<tr>
<th> User Name </th>
<th> User Last Name </th>
<th> User Age </th>
<th> User Phone </th>
<th> Process</th>
</tr>
</thead>
<tbody align="Center">
<tr>
<td><asp:TextBox ID="usrName" runat="server" CssClass="form-control" placeholder="Name"></asp:TextBox></td>
<td><asp:TextBox ID="usrLstName" runat="server" CssClass="form-control" placeholder="Last Name"></asp:TextBox></td>
<td><asp:TextBox ID="usrAge" runat="server" CssClass="form-control" placeholder="Age"></asp:TextBox></td>
<td><asp:TextBox ID="usrPhone" runat="server" CssClass="form-control" placeholder="Phone Num"></asp:TextBox></td>
<td class="text-center"><a id="addUser" class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-plus"></span> Add</a></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
Görüntü :
