باند کردن اطلاعات در یک جدول با استفاده از ajax

[ramin149]

با سلام به دوستان
من یک JsonResult نوشتم به صورت زیر که لیست اطلاعات را برای من بر میگرداند .

[HttpPost]
public JsonResult QuotaSelectByVehicle(int id)
{
PardisEntities db = new PardisEntities();
List<Tbl_City> a = db.Tbl_City.Where(x => x.ProvinceID == 1).ToList();
return Json(a);
}

و تابع جی گویری من به صورت زیر می باشد .

$(document).ready(function () {
$("#dt2 tbody tr #Quota").click(function () {
id = $(this).closest("tr").find("#Id").val();
$.ajax({
url: "/Quota/QuotaSelectByVehicle",
data: { id: id },
type: 'POST',
success: function (response) {
alert('ok');
},
error: function (response) {
alert('error');
}
});
});
});


اولین مشکل من اینه که موقع دریافت اطلاعات همش پیغام error را در صفحه نمایش میدهد .
دومین مشکل این که نمی دونم چه شکلی اطلاعاتی را که دریافت می کنم را در یک جدولی که در صفحه قرار دارد Bind کنم . لطفا به این مشکل من جواب دهید . با تشکر .

[p.parsaee]

برای حل مشکل اول اطلاعات باید در یک view model کپی شوند و بعد به مرورگر کاربر فرستاده شوند، مثلا بدین صورت:


PardisEntities db = new PardisEntities();
List<City> cities = db.Cities.Where(x => x.ProvinceID == 1).ToList();
return Json(cities.Select(x => new
{
Id = x.Id,
CityName = x.CityName
}));

[p.parsaee]

برای حل مشکل دوم، بدین صورت می توانید عمل نمائید:

$.ajax({
url: "/Quota/QuotaSelectByVehicle",
data: { id: id },
type: 'POST',
success: function (response) {
$('#tblData tbody').find('tr').remove();
$.each(response, function () {
$('#tblData').append($('<tr></tr>').html('<td>' + this.CityName + '</td>'));
});
},
error: function (response) {
alert('error');
}
});

اطلاعات در جدول با html markup زیر قرار می گیرند:

<table id="tblData">
<thead>
<tr><th>نام شهر</th></tr>
</thead>
<tbody>

</tbody>
</table>

[rahimi.mohamad24]

دوست عزیز
ظاهرا کد فسمت اولت درسته ولی بهتره این خط کد را هم اضافه کنی چون داری دیتا میفرستی:

contentType: "application/json; charset=utf-8",
این کد را در تابع ajax قبل از data بذار.

[ramin149]

دوست عزیز کارهایی را که گفتید را انجام دادم (و به درستی جواب داد ) اما حالا به یک مشکل دیگر برخورد کردم . من در آخر هر ردیف یک لینک قرار دادم با Id="Delete" که وقتی کاربر روی آن کلیک کنه آن ردیف حذف شود (این کار را هم می خواهم با ajax انجام بدم ) . اما موقع کلید تابع jquery مورد نظر کار نمی کنه. برای حل این مشکل باید چه کاری انجام داد ؟؟؟

کد بایند اطلاعات (که دوستان در سایت گذاشتن همراه با اضافه شدن تک a)

$(document).ready(function () {
$("#dt2 tbody tr #Quota").click(function () {
id = $(this).closest("tr").find("#Id").val();
$.ajax({
url: "/Quota/QuotaSelectByVehicle",
data: { id: id },
type: 'POST',
//contentType: "application/json; charset=utf-8",
success: function (response) {
$('#myModal .dt2 tbody').find('tr').remove();
$.each(response, function () {
$('#myModal .dt2 tbody').append($("<tr></tr>").html("<td class='center'>" + this.CityName + "</td>" + "<td class='center'><a href='#' id='delete' title='حذف' ><div class='fugue-24 cross mg1'></div></a></td>"));
});
},
error: function (response) {
alert('error');
}
});
});
});

کد حذف ردیف مورد نظر که کار نمی کنه

$(document).ready(function () {
$("#myModal #delete").click(function () {
tr = $(this).closest("tr");
id = 1;
if (confirm("آیا مطمین به حدف این مورد هستید ؟")) {
$.ajax({
url: "/Quota/QuotaDelete",
data: { id: id },
type: 'POST',
success: function (response) {
if (response == 2) {
tr.css("background-color", "#f8cccc");
tr.fadeOut(1000, function () { tr.remove(); });
$("#myModal #messages").html("<p>تبریک . عملیات با موفقیت انجام شد .</p>");
$("#myModal #messages").addClass("ad-notif-success mb1");
}
else {
alert("false");
$("#myModal #messages").html("<p>خطا ! دوباره تلاش نمایید .</p>");
$("#myModal #messages").addClass("ad-notif-error mb1");
}
}
});
}

});
});

[ramin149]

راه حل پیشنهادی من برای مشکلی که در پست قبلی مطرح گرده بودم .

تابع حذف جی گویری

function DeleteQuota(a) {
tr = a.closest("tr");
id = 1;
if (confirm("آیا مطمین به حدف این مورد هستید ؟")) {
$.ajax({
url: "/Quota/QuotaDelete",
data: { id: id },
type: 'POST',
success: function (response) {
if (response == 2) {
tr.css("background-color", "#f8cccc");
tr.fadeOut(1000, function () { tr.remove(); });
$("#myModal #messages").html("<p>تبریک . عملیات با موفقیت انجام شد .</p>");
$("#myModal #messages").addClass("ad-notif-success mb1");
}
else {
alert("false");
$("#myModal #messages").html("<p>خطا ! دوباره تلاش نمایید .</p>");
$("#myModal #messages").addClass("ad-notif-error mb1");
}
}
});
}
}

تک a برای حذف رکورد را صورت زیر بنویسید .


<a onclick="DeleteQuota($(this));">test</a>

[p.parsaee]

کار بر روی حذف آن مقداری زمان می برد، چون id رکوردی که شما می خواهید حذف کنید همیشه 1 نیست و متغیر است. اما می توانید موقع بایند کردن اطلاعات به جدول به صورت زیر عمل نمائید:


$('#tblData').append($('<tr></tr>').html('<td>' + this.Caption + '</td>' + "<td class='center'><a href='/Delete/" + this.Id + "' class='delete' title='حذف'><span>حذف</span></a></td>"));


این یک راه کار برای حذف است اما نه به صورت ajax . بدین صورت که به اکشن متد Delete هدایت می شوید و id را هم پاس می دهید. بعد انجام عمل حذف در اکشن متد Delete ، صفحه رفرش کنید تا تغییرات نشان داده شوند.

[ramin149]

Id رو هم به صورت پارامتر به تابع ارسال میکنیم . روشی که من گفتم به صورت ajax . و از روش شما قبلا استفاده گردم (خیلی ممنون).