ثبت اطلاعات در پایگاه داده در asp.net mvc

اولین و ضروری ترین عملیات در یک وبسایت داینامیک، ثبت اطلاعات می باشد و پس از ثبت اطلاعات می توان سایر عملیات مانند نمایش اطلاعات به روش های مختلف به کاربر، ویرایش، حذف و گزارش گیری را پیاده سازی نمود. در ASP.NET MVC برای انجام هر عملیات می بایست در Controller مربوطه یک Action ایجاد نمود.

طراحی فرم Create

بهتر است پیاده سازی عملیات CRUD از جدولی شروع شود که وابسته به جدول دیگری نیست. در پروژه تعریف شده در مرحله قبل دو جدول Category و Product وجود دارد که رابطه آنها یک به n بوده و جدول Product وابسته به جدول Category می باشد اما جدول Category به هیچ جدول دیگری وابستگی ندارد بنابراین بهتر است پیاده سازی عملیات مربوط به Category در اولویت باشد. برای انجام عملیات مربوط به هر جدول پایگاه داده می بایست یک Controller ایجاد نمود بنابراین روی پوشه Controllers کلیک راست کرده و از منوی Add گزینه Controller را انتخاب نمایید.

ساخت فرم ثبت - مرحله 1

در پنجره فوق گزینه MVC5 Controller – Empty را انتخاب نموده و روی دکمه Add کلیک کنید.

ساخت فرم ثبت - مرحله 2

نام کنترلر را CategoriesController تعیین کرده و روی دکمه Add کلیک کنید.

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

private StoreEntities db = new StoreEntities();
// GET: Categories
public ActionResult Index()
{
    return View();
}

برای ساخت اکشن مربوط به Create کدهای زیر را به کنترلر اضافه کنید.

public ActionResult Create()
{
    return View();
}

بدین ترتیب حالت GET این اکشن ایجاد می گردد. برای ساخت View مربوط به آن کافی است رو نام اکشن کلیک راست کرده و گزینه Add View را انتخاب نمایید.

ساخت فرم ثبت - مرحله 3

در پنجره باز شده بدون ثبت تغییرات روی دکمه Add کلیک کنید تا View مربوط به آن ایجاد گردد. در اولین قدم می بایست نوع اطلاعاتی (Model) که قصد دارید View مورد نظر در عملیات POST به اکشن مربوط ارسال نماید را تعیین نمایید. از آنجا که هدف از طراحی این فرم، جمع آوری اطلاعات مربوط به Category و ثبت آن در پایگاه داده می باشد بنابراین Model مورد نیاز در این View یک نمونه از کلاس Category می باشد. این کد را به ابتدای صفحه  اضافه نمایید.

@model Store.Models.Category

در ادامه عنوان صفحه را به "ایجاد گروه جدید" تغییر دهید.

@model Store.Models.Category
@{
    ViewBag.Title = "ایجاد گروه جدید";
}

و متن درون تگ h3 را به شکل زیر اصلاح نمایید.

<h3>ایجاد گروه جدید</h3>

برای طراحی فرم ها ابتدا باید کد زیر را به View اضافه نمایید.

@using (Html.BeginForm())
{

}

استفاده از BeginForm همانند تعریف فرم در صفحات Html توسط تگ <form> می باشد. پس از تعریف فرم باید دستور زیر را جهت امنیت اطلاعات ارسالی، اضافه نمایید.

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

}

جهت ایجاد نظم می توان از تنظیمات مربوط به طراحی فرم در Bootstrap استفاده نمود. بنابراین کد زیر را به فرم خود اضافه کنید.

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    <div class="form-horizontal">

    </div>
}

جدول Category حاوی فیلدهای CategoryId و CategoryName می باشد که CategoryId بصورت اتوماتیک تولید شده و در فرم فوق تنها نیاز به دریافت CategoryName می باشد بنابراین می بایست یک label و یک input به فرم اضافه کنیم. @Html.EditorFor معادل تگ input در html می باشد که از آن می توان برای دریافت اطلاعات استفاده نمود. استفاده از label و input در فرم های MVC به شکل زیر می باشد.

@Html.LabelFor(model => model.CategoryName)
@Html.EditorFor(model => model.CategoryName)

در صورتیکه قصد داشته باشید تنظیمات css را به آنها اضافه نمایید می بایست پارامتر دیگری به helper ها به شکل زیر اضافه نمایید.

@Html.LabelFor(model => model.CategoryName, htmlAttributes: new { @class = "control-label col-md-2" })
@Html.EditorFor(model => model.CategoryName, new { htmlAttributes = new { @class = "form-control" } })

کلاس های ذکر شده در کد فوق، کلاس های Bootstrap می باشند که بصورت پیش فرض در پروژه های ASP.NET MVC قابل استفاده می باشند.

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

@Html.ValidationMessageFor(model => model.CategoryName, "", new { @class = "text-danger" })

بنابراین کد کامل مربوط به دریافت CategoryName به شکل زیر خواهد بود.

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    <div class="form-horizontal">
        <div class="form-group">
            @Html.LabelFor(model => model.CategoryName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.CategoryName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.CategoryName, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>
}

برای ثبت اطلاعات نیز نیاز به یک submit می باشد که به شکل زیر می توانید به فرم اضافه نمایید.

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    <div class="form-horizontal">
        <div class="form-group">
            @Html.LabelFor(model => model.CategoryName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.CategoryName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.CategoryName, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

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

@Html.ValidationSummary(true, "", new { @class = "text-danger" })

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

@model Store.Models.Category
@{
    ViewBag.Title = "ایجاد گروه جدید";
}
<h3>ایجاد گروه جدید</h3>
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    <div class="form-horizontal">
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.CategoryName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.CategoryName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.CategoryName, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

پس از طراحی فرم مربوط به دریافت اطلاعات می بایست به کنترلر Categories برگشته و دستورات مربوط به POST آن را که وظیفه دارد اطلاعات را از فرم دریافت کرده و در پایگاه داده ذخیر نماید، اضافه کنید.

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(Category category)
{
    return View();
}

دقت کنید برای استفاده از کلاس Category حتما باید namespace زیر به پروژه اضافه شده باشد.

using Store.Models;

همانطور که مشاهده می کنید حالت POST اکشن مربوط به Create یک نمونه از کلاس Category را از View دریافت می کند بنابراین ابتدا باید صحت اطلاعات دریافتی بررسی گردد که این امر توسط دستور زیر امکان پذیر است.

if (ModelState.IsValid)
{

}

در صورت درست بودن اطلاعات می بایست آنها را در جدول Category ذخیره نماییم.

if (ModelState.IsValid)
{
    db.Categories.Add(category);
    db.SaveChanges();
}

پس از ثبت اطلاعات نیز باید به اکشن Index منتقل شویم  که در ادامه آن را طراحی خواهیم نمود.

if (ModelState.IsValid)
{
    db.Categories.Add(category);
    db.SaveChanges();
    return RedirectToAction("Index");
}

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

return View(category);

کد کامل این Action به شکل زیر خواهد بود.

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(Category category)
{
    if (ModelState.IsValid)
    {
        db.Categories.Add(category);
        db.SaveChanges();
        return RedirectToAction("Index");
    }
    return View(category);
}

پس ذخیره سازی تغییرات برنامه را اجرا نموده و در نوار آدرس به اکشن Create مربوط به کنترلر Categories منتقل شوید.

فرم ثبت - مرحله 4

عبارت "موبایل" را به عنوان نام گروه وارد کرده و روی دکمه Create کلیک کنید. در صورتیکه که همه موارد صحیح باشد با خطای زیر مواجه می شوید که علت آن عدم وجود View مربوط به اکشن Index می باشد که در مقاله بعدی آن را ایجاد خواهیم نمود.

فرم ثبت - مرحله 5