خانه \\ MVC 5 & 6 \\ بررسی چگونگی ارسال مقادیر بیش از یک Model از سمت View به Controller از طریق Ajax

  • بررسی چگونگی ارسال مقادیر بیش از یک Model از سمت View به Controller از طریق Ajax
بررسی چگونگی ارسال مقادیر بیش از یک Model از سمت View به Controller از طریق Ajax
1395/09/05 - 19:56:42 // MVC 5 & 6 // 0 نظر // 3696 بازدید

در مواردی لازم است بیش از یک بسته Data با شکل و بدنه متفاوت را از View به Controller ارسال کنیم. در این مقاله به صورت قدم به قدم به بررسی عملی چگونگی این روند خواهیم پرداخت.

بسمه تعالی

بررسی چگونگی ارسال مقادیر بیش از یک Model از سمت View به Controller از طریق Ajax

در مواردی لازم است بیش از یک بسته Data با شکل و بدنه متفاوت را از View به Controller ارسال کنیم. در این مقاله به صورت قدم به قدم به بررسی عملی چگونگی این روند خواهیم پرداخت.

در قدم اول : یک پروژه MVC 5 به نام iliasoft.ir_PassingMultipleModel ایجاد خواهیم کرد.

پس از ایجاد پروژه یکراست به سراغ ایجاد Model رفته و یک کلاس به نام Common ایجاد نمایید. من در اینجا هر سه کلاس مورد نیازم که نقش Model را بازی می نمایند را درون همین کلاس Common ایجاد میکنم.

  1. namespace iliasoft.ir_PassingMultipleModel.Models  
  2. {  
  3. public class Customer  
  4. {  
  5. public int CustomerId { set; get; }  
  6. public string CustomerName { set; get; }  
  7. public string Address { set; get; }  
  8. }  
  9. public class Employee  
  10. {  
  11. public int EmployeeId { set; get; }  
  12. public string EmployeeName { set; get; }  
  13. public string Address { set; get; }  
  14. }  
  15. public class Common  
  16. {  
  17. public Customer customer { set; get; }  
  18. public Employee employee { set; get; }  
  19. }  
  20. }  
 

کلاس Common در اصل یک ViewModel است که در بر گیرنده بدنه هر دو کلاس خواهد بود.حال وقت ایجاد یک Controller ساده و Action Method مورد نظر است .

در فولدر Contoller یک Controller جدید به نام DemoController ایجاد نمایید و بدنه آنرا به شکل زیر ایجاد نمایید.

 
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using iliasoft.ir_PassingMultipleModel.Models;  
  7. namespace PassingMultipleModel.Controllers  
  8. {  
  9. public class DemoController : Controller  
  10. {  
  11. // GET: Demo  
  12. public ActionResult Index()  
  13. {  
  14. return View();  
  15. }  
  16. public JsonResult Process(Common model)  
  17. {  
  18. // Write your code based on your Process or your Concept  
  19. return Json(JsonRequestBehavior.AllowGet);  
  20. }  
  21. }  
  22. }  

درون View یک فولدر به نام Demo ایجاد و یک View جدید به نام Index ایجاد کنید.
بدنه View از لحاظ Html به شکل زیر است .
  1. @model iliasoft.ir_PassingMultipleModel.Models.Common  
  2. @{  
  3. ViewBag.Title = "Index";  
  4. }  
  5. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>  
  6. <h2>Customer</h2>  
  7. <table>  
  8. <tr><td>Customer Id</td><td>@Html.TextBoxFor(m => m.customer.CustomerId)</td></tr>  
  9. <tr><td>Customer Name</td><td>@Html.TextBoxFor(m => m.customer.CustomerName)</td></tr>  
  10. <tr><td>Address</td><td>@Html.TextBoxFor(m => m.customer.Address)</td></tr>  
  11. </table>  
  12. <h2>Employee</h2>  
  13. <table>  
  14. <tr><td>Employee Id</td><td>@Html.TextBoxFor(m => m.employee.EmployeeId)</td></tr>  
  15. <tr><td>Employee Name</td><td>@Html.TextBoxFor(m => m.employee.EmployeeName)</td></tr>  
  16. <tr><td>Address</td><td>@Html.TextBoxFor(m => m.employee.Address)</td></tr>  
  17. </table>  
  18. <input type="button" id="btnClick" value="Submit"/>  

از لحاظ JS و Script هم به شکل زیر عمل کنید.

 
  1. <script>  
  2. $("#btnClick").click(function () {  
  3. var customer = {  
  4. CustomerId: $('#@Html.IdFor(m=>m.customer.CustomerId)').val(),  
  5. CustomerName: $('#@Html.IdFor(m=>m.customer.CustomerName)').val(),  
  6. Address: $('#@Html.IdFor(m=>m.customer.Address)').val()  
  7. }  
  8. var employee = {  
  9. EmployeeId: $('#@Html.IdFor(m=>m.employee.EmployeeId)').val(),  
  10. EmployeeName: $('#@Html.IdFor(m=>m.employee.EmployeeName)').val(),  
  11. Address: $('#@Html.IdFor(m=>m.employee.Address)').val()  
  12. }  
  13. var model = {  
  14. "customer": customer,  
  15. "employee": employee  
  16. }  
  17. $.ajax({  
  18. type: "post",  
  19. url: "/Demo/Process",  
  20. data: model,  
  21. datatype: "json",  
  22. cache: false,  
  23. success: function (data) {  
  24. alert("You Multiple Data Passed Successfully");  
  25. },  
  26. error: function (xhr) {  
  27. alert('No Valid Data');  
  28. }  
  29. });  
  30. });  
  31. </script>  

تنها نکته موجود Html.IdFor@ است که بر اساس ID مقدار را به مقادیر JS ارسال میکند.

خوب چون سورس پروژه را هم در اختیار دارید، می توان گفت کار تمام است.

دانلود سورس پروژه

علی کلاهدوزان
معرفی نویسنده : علی کلاهدوزان

سلام بر دوستان ،
شاید رایج است به عنوان پروفایل کاربر ، چند خطی راجع به خودم بنویسم ، ولی وضعیت کاری و سوابق من با یک جستجوی ساده در گوگل مشخص خواهد شد ، لذا سرتان را با مطالب بی مورد به درد نیاورم بهتر است . اگر نکته خاصی لازم بود بدانید در قسمت "ایلیا سافت در یک نگاه" به احتمال زیاد یافت خواهد شد . جزئیات بیشتر را سوال کنید ، آدرس ایمیل Ali@Kolahdoozan.com همیشه جوابگوی شماست .امیدوارم از مطالب سایت استفاده کرده باشید . شاد و پیروز باشید .

امتیاز به مطلب
           
مطالب مرتبط
نظرات کاربران
ارسال نظر