آموزش DataBase First در MVC – ویرایش

در پست های قبلی  DataBase First ، دیتابیسی ایجاد کردیم و برای آن مدل ساختیم همچنین جدولی به اسم Users ایجاد کردیم و لیست User ها را نمایش دادیم و فرم ایجاد یک کاربر جدید را آموزش دادیم حال لیست ما باید قابلیتی داشته باشد تا بتوانیم کاربران وارد شده را ویرایش کنیم. در این پست نحوه ایجاد صفحه ویرایش– Edit را آموزش میدهیم. با آموزش DataBase First در MVC – ویرایش همراه ما باشید.

ایجاد ACTION های مرتبط با ویرایش – Edit

جهت بروزرسانی و یا ویرایش اطلاعات به ۲ اکشن نیاز داریم یکی برای نمایش اطلاعات جهت ویرایش و دومی جهت ذخیره اطلاعات.

اکشن شماره یک : نمایش اطلاعات جهت ویرایش

یک ورودی از جنس int به نام آی دی که در حقیقت همان کلید جدول ماست دریافت میکند. در ادامه برسی ورود آی دی را برسی میکنیم. اگر آی دی وارد نشده باشد یک پیام خطا به کاربر نمایش میدهیم. یا کاربر را به یک صفحه دیگه هدایت میکنیم. و اگر کاربر آی دی وارد کرده بود برسی میکنیم آیا کاربری با این آی دی وجود دارد یا خیر اگر وجود نداشت که به کاربر یک پیام خطا نمایش میدهیم و یا کاربر را به یک صفحه دیگه هدایت میکنیم ولی اگر وجود داشت اطلاعات کاربر را به سمت ویو ارسال میکنیم.

اکشن Edit ورودی از جنس Int به نام آی دی دریافت کرده که دارای یک علامت ؟ است این علامت سوال برای این است که به سیستم بگیم که دریافت مقدار آی دی در این اکشن ضروری نیست، چون اگر به هر دلیلی کاربر ID را وارد نکند ما یک خطای غیر قابل کنترل داریم، برای همین آن را از حالت ضروری بودن با علامت ؟ خارج میکنیم و در کد های اکشن خود آن را مدیریت میکنیم.

public ActionResult Edit(int? id)
{
if (id == null)
{
return RedirectToAction("Index", "User");
}
var user= db.T_Users.Find(id);
if (user == null)
{
return RedirectToAction("Index", "User");
}
return View(user);
}

ساخت ویو جهت ویرایش اطلاعات

ویویی از نوع Edit همراه با مدل و کانتکست مانند تصویر زیر ایجاد کنید.

ساخت ویو جهت ویرایش اطلاعات

اکشن شماره دو : ذخیره اطلاعت ویرایش شده در دیتابیس

• گام اول : افزودن اتربیوت های لازم به اکشن که شامل [HttpPost] و [ValidateAntiForgeryToken] میباشد

اتربیوت HttpPost : اگر قرار باشد اطلاعات توسط روش Post به Action ما ارسال شود باید این اتربیوت را به اکشن خود اضافه کنیم.

اتربیوت ValidateAntiForgeryToken : برای اکشن هایی از جنس پست که قرار است از سمت ویو دیتا دریافت کنند، حتما باید اتربیوت ValidateAntiForgeryToken به بالای اکشن اضافه شود و در سمت ویو هم بعد از هلپر فرم باید هلپر @Html.AntiForgeryToken() اضافه شود. این کار از حملات SQL Injection جلوگیری کرده و ورود اطلاعات به سایت شما را محدود میکند. به زبان ساده کسی نمیتواند از خارج سایت شما اطلاعات فیک ارسال کند.

[HttpPost]
[ValidateAntiForgeryToken]

• گام دوم : ورودی های اکشن را وارد کنید، توجه داشته باشید همه فیلد ها باید وارد شود و اگر حتی فیلد هایی که قرار نیست کاربر آن را ویرایش کند. اگر فیلدی را نگیرید به صورت NULL ذخیره میشود. البته در ادامه کار نحوه آپدیت فیلد هایی که قرار نیست کاربر آن را ویرایش کند را هم بیان میکنیم.

دستور db.Entry(user).State=EntityState.Modified وضعیت مدل User را در حالت Modified قرار داده و توسط دستور db.SaveChanges() آن را در دیتابیس بروزرسانی میکند.

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit([Bind(Include = "UserId,Name,Family,Password,Email,MobileNumber,Address,ImageName,Maritel,IsActive,RegisterDate")] T_Users user )
{
if (ModelState.IsValid)
{
db.Entry(user).State=EntityState.Modified;
db.SaveChanges();
}
return View(user);
}

فیلد هایی که نباید کاربر آن را تغییر دهد

در بروزرسانی یک سطر از جدول ممکن است برخی فیلد ها را نخواهیم کاربر تغییر دهد مثلا زمان ثبت نام در سایت برای این کار کافی است که آن فیلد را از ویو پاک کنیم ولی حتما باید به جای آن یک هلپر از جنس Hidden قرار دهیم تا فیلد پاک شده به صورت Null ذخیره نشود. میتوانید نمونه کد هلپر Hidden را در باکس زیر مشاهده کنید.

@Html.HiddenFor(model => model.RegisterDate)

بروزرسانی تصاویر

یکی از مهمترین بخش های آپدیت یک فرم فیلد مربوط به تصاویر است برای آپدیت تصاویر مراحل زیر را دنبال کنید.

• گام ۱ : به هلپر فرم مربوط به اکشن Edit مقدار enctype را اضافه کنید.

@using (Html.BeginForm("Edit", "User", FormMethod.Post, new {enctype="multipart/form-data"}))

• گام ۲ : هلپر مربوط به فیلد تصویر را به تگ آپلود فایل تغییر دهید.

<input type="file" name="ImageUp" />

• گام ۳ : چون فیلد تصویر را پاک کردیم حتما یک هلپر از نوع Hidden برای آن ایجاد میکنیم.

@Html.HiddenFor(model => model.ImageName)

• گام ۴ : در اکشن Edit خود یک ورودی جدید از جنس HttpPostedFileBase با نام تگی که در گام ۲ مشخص کردیم به نام  ImageUp وارد میکنیم.

HttpPostedFileBase ImageUp

• گام ۵ : در اکشن Edit برسی میکنیم که آیا فایلی ارسال شده یا خیر، اگر Null باشد یعنی کاربر نخواسته تصویر را ویرایش کند ولی اگر Null نباشد یعنی کاربر تصویر جدیدی وارد کرده.

if(ImageUp != null){
}

• گام ۶ : باید برسی کنیم که آیا کاربر قبلا تصویری در سایت بارگزاری کرده است یا خیر، اگر بارگزاری کرده باشد باید تصویر قدیمی را حذف کنیم. عملیات حذف تصویر توسط کلاس TIT_File انجام میشود.

if (user.ImageName!=null)
{
up.Remove(user.ImageName);
}

• گام ۷ : حال تصویر خود را در سایت ذخیره میکنیم.

string[] format = { "jpg", "png" };
bool status= up.Upload(ImageUp, 2, format, "images/user");

• گام ۸ : اگر عملیات ذخیره فایل یا همان تصویر موفقیت آمیز بود فیلد ImageName را با آدرس جدید فایل مقدار دهی میکنیم.

user.ImageName = up.Address;

مشاهده کد های بروزرسانی تصویر به صورت یک جا

if(ImageUp != null)
{
TIT_File up = new TIT_File();
if (user.ImageName!=null)
{
up.Remove(user.ImageName);
}
string[] format = { "jpg", "png" };
bool status= up.Upload(ImageUp, 2, format, "images/user");
if (status)
{
user.ImageName = up.Address;
}
else
{
ModelState.AddModelError("ImageName", up.Message);
return View();
}
}

کدهای اکشن شماره یک : نمایش اطلاعات جهت ویرایش

public ActionResult Edit(int? id)
{
if (id == null)
{
return RedirectToAction("Index", "User");
}
var user= db.T_Users.Find(id);
if (user == null)
{
return RedirectToAction("Index", "User");
}
return View(user);
}

کدهای اکشن شماره دو : ذخیره اطلاعت ویرایش شده در دیتابیس

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit([Bind(Include = "UserId,Name,Family,Password,Email,MobileNumber,Address,ImageName,Maritel,IsActive,RegisterDate")] T_Users user,HttpPostedFileBase ImageUp)
{
if (ModelState.IsValid)
{
if(ImageUp != null)
{
TIT_File up = new TIT_File();
if (user.ImageName!=null)
{
up.Remove(user.ImageName);
}
string[] format = { "jpg", "png" };
bool status= up.Upload(ImageUp, 2, format, "images/user");
if (status)
{
user.ImageName = up.Address;
}
else
{
ModelState.AddModelError("ImageName", up.Message);
return View();
}
}
db.Entry(user).State=EntityState.Modified;
db.SaveChanges();
return RedirectToAction("Index", "User");
}
return View();
}