ASP.NET MVC: استفاده از چند آبجکت مدل به عنوان پارامتر ورودی در اکشن متد

پاس دادن چند مدل آبجكت در mvc
شناسه پست: 1448
بازدید: 1884

چکیده: پاس دادن چند آبجکت به اکشن متد که چند آبجکت مدل را به عنوان ورودی دریافت میکند.

در ASP.NET MVC، کنترلر و اکشن متدهای موجود در آن، نقش مهمی را در اپلیکیشن ایفا میکنند. اکشن متد در کنترلر، داده های ارسال شده از View را دریافت کرده و آن را بر روی Model سوار میکند و بالعکس. به طور کلی، زمانیکه ما یک اکشن متد مینویسیم، یک مدل آبجکت را به صورت تکی به عنوان یک پارامتر ورودی در نظر میگیریم. با این حال، بعضی اوقات، نیاز است که چند مدل آبجکت را به عنوان پارامتر ورودی در اکشت متد در نظر بگیریم. در این حالت، ما باید مقداری تغییرات در کد سمت کلاینت انجام دهیم. یک واقعیت این است که در MVC زمانیکه ما view را scaffold میکنیم، ما فقط یک مدل آبجکت را میتوانیم برای تولید View در نظر بگیریم. نمیتوانیم بیشتر از یک مدل آبجکت را در یک زمان برای View در نظر بگیریم.

در این مقاله، ما میخواهیم در مورد نحوه ارسال چند آبجکت مدل به عنوان پارامتر ورودی به اکشن متد در کنترلر صحبت کنیم.

این اپلیکیشن با Visual Studio 2015 پیاده سازی شده است.

مرحله 1: ویژوال استودیو را باز نمایید و یک  ASP.NET Web application جدید با نام Multi_model_action به صورت زیر ایجاد نمایید:

ایجاد وب اپلیکیشن با mvc

روی ok کلیک کنید. Empty Template را مانند کادر زیر انتخاب نمایید:

اپلیکیشن MVC

در نتیجه، یک اپلیکیشن MVC ساخته میشود.

مرحله 2: در این پروژه، یک Sql Server Database جدید به نام ApplicationDB.mdf در پوشه App_Data ایجاد نمایید.

مرحله 3: ما از ADO.NET Entity Framework با رویکرد Code-First برای ایجاد جداول استفاده مینماییم. در پوشه Models، یک ADO.NET Entity Data Model جدید به نام ApplicationEntities ایجاد نمایید. در ویزارد نمایش داده شده،Code-First from Database را مانند شکل زیر انتخاب نمایید:

رویکرد code first

ApplicationDB.mdf را از ویزارد انتخاب نمایید. زمانیکه ویزارد تکمیل شد، کلاس ApplicationEntities.cs در پوشه Model اضافه خواهد شد.

مرحله 4: در پوشه Models، یک کلاس جدید به نام ModelClassses.cs اضافه نمایید. در این فایل، کلاسهای زیر را اضافه نمایید:

using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
 
namespace Multi_model_action.Models
{
    public class Order
    {
        [Key]
        public int OrderId { get; set; }
        public string CustomerName { get; set; }
        public ICollection<OrderItemDetails> OrderDetails { get; set; }
    }
 
    public class OrderItemDetails
    {
        [Key]
        public int ItemId { get; set; }
        public string ItemName { get; set; }
        public int Quantity { get; set; }
        public int OrderId { get; set; }
        public Order Order { get; set; }
    }
}

 

کلاسهای بالا شامل جدول Order و OrderItemDetails میباشد. کلاس Order شامل مجموعه ای از OrderItemDetail ها میباشد.

مرحله 5: در کلاس ApplicationEntities، خصوصیات زیر را وارد نمایید:

public DbSet<Order> Orders { get; set; }
public DbSet<OrderItemDetails> OrderItemDetails { get; set; }

 

خصوصیات بالا جهت مپ کردن کلاسهای مدل در مرحله 4 با جداول دیتابیس میگردد.

مرحله 6: در پوشه Controllers، یک کنترل جدید به نام OrderManagerController اضافه نمایید. اکشن متدهای زیر را در آن وارد نمایید:

using System.Web.Mvc;
using Multi_model_action.Models;
 
namespace Multi_model_action.Controllers
{
    public class OrderManagerController : Controller
    {
        ApplicationEntities ctx;
 
        public OrderManagerController()
        {
            ctx = new ApplicationEntities();
        }
 
        // GET: OrderManager
        public ActionResult Index()
        {
            return View();
        }
 
        public ActionResult Create()   
        {
            return View();
        }
 
        public JsonResult SaveOrder(Order order, OrderItemDetails [] orditemdetails)
        {
            ctx.Orders.Add(order);
            foreach (var item in orditemdetails)
            {
                item.OrderId = order.OrderId;
                ctx.OrderItemDetails.Add(item);
            }
            ctx.SaveChanges();
            return Json(true,JsonRequestBehavior.AllowGet);
        }
    }
}


کنترلر بالا، یک نمونه از ApplicationEntities را برای انجام عملیات در دیتابیس تعریف میکند. متد()SaveOrder، آبجکتهای Order  و آرایه ای از OrderItemDetails  را به عنوان پارامتر ورودی دریافت میکند. این متد شامل منطق برای ثبت Order و OrderItemDetail ها در جداول مورد نظر میباشد.

مرحله 7: در این پروژه، reference های jQuery  را با استفاده از NuGet Package Manager نصب نمایید.

مرحله 8: یک view خالی از اکشن متد Create را Scaffold  نمایید. در این view، اسکریپت زیر را اضافه نمایید:

@{
    ViewBag.Title = "Create";
}
 
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" />
<a href="http://~/scripts/jquery-2.2.0.min.js" rel="nofollow" target="_blank">http://~/scripts/jquery-2.2.0.min.js</a>
<a href="http://~/scripts/bootstrap.min.js" rel="nofollow" target="_blank">http://~/scripts/bootstrap.min.js</a>
 
    $(document).ready(function () {
        $("#btnSave").on('click', function () {
            var url = '@Url.Action("SaveOrder", "OrderManager")';
            var data = [];
 
            data.push(
                 {
                     ItemName: 'Laptop',
                     Quantity: 1000,
                 },
                 {
                     ItemName: 'Desktop',
                     Quantity: 900,
                 }
                );
            $.ajax({
                url:url,
                type:"POST",
                data:{
                    order:{
                      CustomerName:'MS'
                    },
                    orditemdetails:data
                },
                datatype:'json',
                ContentType:'application/json;utf-8'
            }).done(function(resp){
                alert('Success ' +resp);
            }).error(function(err){
                alert("Error " + err.status);
            });
 
        });
 
    });
 
 
<body>
    <input type="button" value="Save" id="btnSave" class="btn btn-success"/>
</body>

 

اسکریپت بالا، آرایه JavaScript به نام data را تعریف میکند. این شامل 2 رکورد است. این اسکریپت شامل فراخوانی ()ajax. میباشد که برای پاس دادن داده ها به اکشن متد در کنترلر استفاده میشود. داده ها با استفاده از سینتکس زیر ارسال میشوند:

data:{
    order:{
      CustomerName:'MS'
    },
    orditemdetails:data
},

 

این data، آبجکت json را با کلیدهایی چون order  و orderitemdetails دریافت میکند. request ارسال شده اکشن متدSaveOrder را اجرا خواهد کرد.

یک breakpoint  داخل اکشن متد SaveOrder اعمال کنید.برنامه را اجرا نمایید. view مورد نظر دکمه Save  را نشان خواهد داد. روی این دکمه کلیک کنید. نقطه اجرا بر روی متد breakpoint می ایستد و پارامترهای ورودی پاس داده شده به اکشن متد، مانند شکل زیر نمایش داده خواهد شد:

ثبت سفارش در mvc
جزییات سفارش در mvc

تصاویر بالا، داده های ارسال شده را نشان میدهد. F10 رابرای تکمیل شدن debug بزنید. ابا ایجاد جداول در دیتابیس، داده ها در آنها ذخیره میگردد.

نتیجه گیری: استفاده از jQuery  (یا دیگر کتابخانه های سمت کلاینت) یکی از بهترین گزینه ها هستند که ما میتوانیم چند آبجکت مدل را به اکشن ها پاس دهیم که آنها نیز چند مدل آبجکت را به عنوان پارامتر ورودی میپذیرند.

برای دانلود سورس برنامه اینجا کلیک نمایید.

نویسنده

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