ارسال داده به MVC Action

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

ارسال داده به MVC Action با استفاده از KnockoutJS

در این مقاله به شما یاد خواهم داد چطور داده ها را با استفاده از KnockoutJS به MVC Action ارسال کنید.

در برنامه ای که در این مقاله خواهیم ساخت، یک فرم ساده ایجاد می کنیم تا اطلاعات محصول را جمع آوری کند. اطلاعاتی نظیر نام، کد و قیمت محصول. در آخر هم با Submit شدن فرم، اطلاعات به MVC Action ارسال می شود.

در این مثال از Visual Studio 2012 Ultimate edition استفاده کرده ام.

1.    یک پروژه MVC 4 web application ایجاد کنید. از بین قالب ها Basic را انتخاب کنید.

2.    یک کنترلر به نام HomeController و یک View به نام Index ایجاد کنید.

3.    تغییرات زیر را در App_Start ->BundleConfig.cs و Views->Shared->_layout.chtml ایجاد کنید.

BundleConfig.cs

_Layout.chtml

4.    در این مرحله یک Product model و ProductViewModel ایجاد خواهیم کرد. در فولدر App ، یک فولدر به نام Scripts ایجاد کرده و یک فایل با نام product.js به آن اضافه می کنیم و کد های زیر را در آن قرار می دهیم. خاصیت currentProduct درProductViewModel را با یکسری داده های تست، مقدار دهی اولیه می کنیم.

ProductViewModel را با view مخصوص به خودش یعنی Index.chtml، bind میکنیم. تمام خواص مدل Product و ProductViewModel را observable در نظذ می کیریم تا هر زمان که تغییری در view بوجود آمد، به صورت خودکار ViewModel بروزرسانی می شود. این مورد از زیبایی های فریم ورک Knochout به شمار می رود و به همین دلیل از آن به عنوان کتابخانه متصل یاد (binding library) می کنیم.

5.    در فایل Index.html موراد زیر را دنبال کنید:

·        باید در View یک ارجاع به فایل Product.js اضافه کنیم.

·        سپس باید viewmodel را با استفاده از متد applyBindings به viewmodel متصل کنیم.

·        در مرحله بعد باید خاصیت currentProduct در view model را با بخش Product (

6.    هم اکنون آماده هستیم که برنامه را اجرا کنیم (با فشردن کلید F5) و پس از آن می توانیم اطلاعات محصول (Product) را مشاهده کنیم.

7.    2 راه برای POST کردن (ارسال) داده به MVC action وجود دارد:

·        استفاده از $.ajax (فراخوانی ajax برای ارسال داده ها): با این روش خواه عملیات با موفقیت انجام شود خواه با خطا، MVC action، JsonResult را به تابع فراخواننده بر می گرداند. اما نمی توانیم با استفاده از این روش، کنترل مورد نظر را به یک action دیگر منتقل کنیم.

·        استفاده از تابع داخلی Knockout (ko.postJSON). به این ترتیب می توانید پس از ذخیره، به یک صفحه دیگر منتقل شوید.

8.     کار بعدی این است که با کلیک بر روی دکمه ذخیره (Save)، تغییرات به MVC action ارسال (POST) شوند. در View model، یک متد به نام saveProduct ایجاد کرده و آن را به رخداد onClick مربوط به دکمه Save متصل (bind) می کنیم. به همین منظور کدهای زیر را در index.chtml و product.js اضافه می کنیم.

Product.js

Index.chtml

9.    حالا باید شی view model را به JSON تبدیل کنیم و آن را به MVC Action ارسال کنیم. برای انجام این مرحله از Plugin نگاشت در Knockout  به نام knockout.Mapping 2.4.0، استفاده خواهیم کرد. این plugin از طریق Nuget قابل نصب است.

به "TOOLS" ->"Library Package Manager" ->"Package Manager Console" بروید. مانند تصویر زیر knockout.mapping-latest.js را در پوشه Script نصب کنید.

knockout.mapping-latest.js را به بسته script ای که داریم اضافه میکنیم.

10.در پوشه Model یک کلاس به نام ProductModel ایجاد کنید. در این کلاس باید همان خصویات کلاس Product در product.js وجود داشته باشد.

یک Action با نام SaveProduct بسازید. این Action زمانی که بر روی دکمه Save کلیک شود، فراخوانی می شود. همچنین از  ProductModel به عنوان پارامتر ورودی آن استفاده می شود.

به product.js رفته و اول از همه knockout model را به JS تبدیل کنید و به MVC Action، SaveProduct ارسال کنید. Product.js به شکل زیر خواهد بود. برای ارسال JSON از product model به MVC action از تابع ko.utils.postJson استفاده خواهیم کرد.

حالا اگر برنامه را اجرا و بر روی دکمه Save کلیک کنید، باید داده ها را به عنوان پارمتر SaveProduct action، در Product model دریافت کنیم. اما این اتفاق رخ نداده و به جای آن NULL دریافت کرده ایم!

دلیل این امر آن است که model binding پیش فرض MVC نمی تواند Knockout model (به فرمت JSON) را به ProductModel، deserialize کند. برای deserialize کردن knockout model به MVC ProductModel یک خاصیت model binding سفارشی (custom) ایجاد می کنیم.

کد فوق با استفاده از JavaScriptSerializer، داده های JSON دریافتی را de-serialize می کند.

کافیست این خاصیت را بر روی پارامتر ورودی SaveProduct action اعمال کنیم و دوباره برنامه را اجرا کنیم.