کار با table به صورت ajax

[morika]

سلام
اول بگم کارم چیه بعد سوالوم بپرسم
122733
یه صفحه دارم برای مدیریت استان ها، شهرها و مناطق
می خوام وقتی یه استان اظافه میشه خیلی به روش ajax به جدول زیر هم اظافه بشه. و زمانی که دکمه حذف زده میشه استان هم از دیتابیس حذف شه هم از جدول پایین. البته همه این کارها رو با partial view انجام دادم. یعنی اون جدول پایین را گذاشتم توی partial view اما اینجوری تعداد partial view ها خیلی زیاد شده تو پروژه و به نظرم اصولی که نیست مدیریتشون هم کم کم داره سخت میشه. اما مشکل من اینکه نمی دونم چجوری این کارهارو با jquery انجام بدم. الان با این کد استان اظافه شده رو به جدول اظافه می کنم
<script type="text/javascript"> function onInsertStateSuccess(request, status)
{
var model = request;
var newRow = "<tr><td class='center'></td><td>" + model.Name + "</td><td></td><td><a href='#' class='btn btn-sm2 btn-danger'><i class='fa fa-times btn-sm2i'></i>حذف</a></td></tr>";
$("#insertStateTBody").append(newRow);
}
</script>*@
اما اینم یه سری مشکلات داره چون من اون ردیف و تعداد شهرها رو توی razor محاسبه می کنیم و این کار که با جاوا دارم انجام میدم امکان محاسبه این تو ستون را ازم گرفته. من جدول رو موقع لود صفحه با این کد پر می کنم
@{int i = 1; foreach (var item in Model.States)
{
<tr>
<td class="center">
@i
@{ i++; }
</td>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@{
Database db = new Database();
int cities = db.Cities.Where(x => x.StateId == item.Id).Count();
@cities
}
</td>
<td>
<a href="@Url.Action("DeleteState", "Dashboard", new { id = item.Id })" class="btn btn-sm2 btn-danger"><i class="fa fa-times btn-sm2i"></i>حذف</a>
</td>
</tr>
}


}
به نظرم اکه بشه یه جوری این قسمت #C رو با jquery بازسازی کرد همه مشکلات من حل میشه
ممنون

[morika]

یعنی هیچ راهی نداره که اون قسمت کد #C رو با jquery دوباره اجرا کنیم؟

[hakim22]

1- دکمه ی Submit فرم باید اطلاعات رو به یک PartialViewResult در سرور ارسال کنه و مقدار برگشتی از این اکشن باید اطلاعات رو به یک ویو از نوع PartialView برگردونه و شما باید کدهای Html رو درون اون پارشیال ویو قرار بدید و نه درون OnInsertSuccess در جاوا اسکریپت

2-مسلما همه این کار رو میشه با جیکوئری هم انجام داد.

3-در روش 1 اگر خوب طراحی کنید و شماره ی ردیف رو هم در ویو مدل در نظر بگیرید و کمی زرنگی می توانید اطلاعات را بدون کدهای جا اسکریپت بروز کنید. سعی کنید بجای اینکه دیتای خام از سرور دریافت کنید PartialView بازگشتی را در صفحه Insert کنید.

4- با پیاده سازی مدل MVVM و استفاده از ابزاری مانند Knockout میشود کد خیلی مناسبی برای این قسمت نوشت که بالاتری بازدهی را داشته باشد.

[morika]

ممنون از جوابتون. اما...
من که خودم تو سوالم گفتم همه این کارهارو با partialview انجام دادم و خیلی هم خوب کار می کنه اما دیگه نمی خوام از partialview استفاده کنم به دلایلی که مطرح کردم
در مورد روش اول باید بگم من اصلا از سمت سرور کد HTML دریافت نمی کنم که بخوام تو partial یا هرجای دیگه بزارم. من همون رکوردی که توی بانک ذخیره میشه رو از سرور می گیریم و کدهای html رو تو خود view می سازم برای اینکه یه row جدید به table اضافه کنه.
در مورد روش سوم هم که خوب دوباره همین روش اول هست و من نمی خوام از partialview استفاده کنم
در مورد روس چهارم هم که اصلا چیزی نمی دونم و باید برم دنبالش ببینم که چی هست
اما جواب سوال من دقیقا همون مورد 2 میشه که خوب منم می دونم قطعا میشه این کارارو با jQuery انجام داد. ولی چجوری؟؟؟؟؟

[hakim22]

شما یک اشکال کوچکی در طراحی مکانیزم با PartialView دارید ، یکبار دیگه مکانیزم رو مرور کنید و ابزار رو بهتر بکار بگیرید. نکته ای که من به شما میتوانم یاد آوری کنم این است که در قسمت newRow نباید کدهای Html داشته باشید. برای این کار هم یک PartialView بسازید.

این مقاله رو بررسی کنید (http://barnamenevis.org/showthread.php?416558-%D8%A2%D8%B4%D9%86%D8%A7%DB%8C%DB%8C-%D8%A8%D8%A7-Ajax-%D8%AF%D8%B1-ASP-MVC-%D8%B3%DB%8C%D8%B3%D8%AA%D9%85-%D8%AB%D8%A8%D8%AA-%D9%86%D8%B8%D8%B1%D8%AF%D9%87%DB%8C)

اگر JQuery بلد باشید تکنیک خاصی نیاز ندارید که کدهای مربوطه رو بنویسید. تغییر مقادیر DOM اولین و پایه ای ترین قسمتهای jQuery است. البته این روش اصلا نیاز نیست و همان روش اول شما جواب بهتری است.