younesdoost
چهارشنبه 30 بهمن 1392, 00:06 صبح
سلام.از نظر من انجام این کار به صورت عدم ارسال Request چه بصورت آژاکس و چه صورت دیگه بهتره و با سرعت بالاتری انجام میشه و کاربر پسندتره.
پیشنهادم رو با یه مثال ارائه می دم:
فرض کنید شما یه لیستی از ماشینایی که گفتید رو دارید که می تونید به تعدادشون اضافه کنید و تو دیتابیس ذخیره کنید.
خب مرحله ی اول خوندن ماشینای قبلی از دیتابیس و لیست کردن اوناست:
public ActionResult Index()
{
return View(FetchedModels)
}
این تو ویو چی به ما میده؟:
<table>
<tr>
<th>CarId</th>
<th>Name</th>
</tr>
foreach(var item in Model)
{
<tr>
<td>@Html.DisplayFor(model=>model.CarId)</td>
<td>@Html.DisplayFor(model=>model.Name)</td>
</tr>
}
</table>
تا اینجا درست.
حالا کد های بالا رو با قسمت وارد کردن اطلاعات جدید و فرم ارسال اونها و کمی تغییرات بازنویسی می کنم:
<input type="text" id="carName"></input>
<button type="button" id="addCar"></button>
@using (Html.BeginForm("SaveNewCars"))
{
<table id="cars">
<tr>
<th>CarId</th>
<th>Name</th>
</tr>
foreach(var item in Model)
{
<tr>
<td>@Html.DisplayFor(model=>model.CarId)</td>
<td>@Html.DisplayFor(model=>model.Name)</td>
</tr>
}
</table>
<button type="submit">Save</button>
}
حالا ادامه ی کار:
تو مرحله ی بعد باید ویو مدل زیر رو بسازی که دارای ویژگی زیره:
public string Name{get;set;}
فرض کن اسم این ویو مدل رو AddedCarViewModel گذاشتیم.
تو مرحله ی بعد اون اکشنی که تو فرم داخل جدول که بالا دیدی کدش رو،رو می سازیم:
[HttpPost]
public ActionResult SaveNewCars(List<AddedCarViewModel> newCars)
{
foreach(var car in newCars)
{
Save(car);
}
return RedirectToAction("Index")
}
حالا فقط گام آخر می مونه که یه تیکه کد جی کوئری هستش.می خوایم وقتی رو دکمه با آی دی addCar کلیک شد مقدار داخل تکست باکس با آی دی carName رو هم به جدول اضافه کنه هم یه آبجکت از جنس AddedCarViewModel براش بسازه که بهمراه فرم با زدن دکمه ی Save ارسال بشه.
اول ردیف جدول رو می سازیم:
$("#addCar").on("click",function()
{
var carId=parseInt($("#cars").children().last().children().first().html())+1;
var carName=$("#carName").val();
var element="<tr><td>"+carId+"</td><td>"+carName+"</td></tr>
$("#cars").append(element)
});
حالا کد بالا رو بازنویسی می کنم و کدهای ایجاد آبجکت رو بهش اضافه می کنم:
var i=0;
$("#addCar").on("click",function()
{
var carId=parseInt($("#cars").children().last().children().first().html())+1;
var carName=$("#carName").val();
var element="<tr><td>"+carId+"</td><td>"+carName+"<input type='hidden' name='newCars["+i+"].Name' value='"+carName+"'></input></td></tr>
$("#cars").append(element)
i++;
});
تموم شد.حالا وقتی دکمه ماشین جدید رو که می زنی یه ردیف به جدول اضافه می شه و همچنین داری یه لیستی از newCars رو هم می سازی که دارای پراپرتی های نام مختلف هستش و وقتی Save اصلی رو می زنی این لیست رو پاس میدی به اون اکشنی که منتظر یک لیستی از AddedCarViewModel با نام newCars هستش و اونجا هم تک تک اون لیست رو ذخیره می کنی.
از طولانی شدن جواب معذرت می خوام.
اگه سوالی داشتی در مورد پیاده سازیش خوشجال میشم جواب بدم.