AngularJs Post ส่งข้อมูลหลายๆข้อมูลไปที่ C# Controller

1.สร้างหน้ารับข้อมูลที่จะส่งไปให้ controller
<div ng-app="test-app">
    <h1>Angular</h1>
    <div ng-controller="test-controller">
        <input type="text" ng-model="startDate" />
        <input type="text" ng-model="endDate" />
        <button type="submit" ng-click="SendDataToController()">Sunmit</button>
        <div id="response">{{response}}</div>
    </div>
</div>

<script>
    var app = angular.module('test-app', []);
    app.controller('test-controller', function ($scope, $http) {

        $scope.SendDataToController = function () {
            var url = "./home/cal"
            $scope.DataRequest = { StartDate: $scope.startDate, EndDate: $scope.endDate }
            $http.post(url, $scope.DataRequest)
            .success(function (data, status) {
                $scope.response = data;
            })
        };
    })
</script>

2.สร้าง C#  Model
    public class RequestModel
    {
        public string StartDate { get; set; }

        public string EndDate { get; set; }
    }

3.สร้าง C# Controller รับข้อมูล
        public JsonResult Cal(RequestModel request)
        {
            return Json(request, JsonRequestBehavior.AllowGet);
        }

Jquery Ajax post ส่งข้อมูลหลายๆข้อมูล ถึง Controller ใน C#.Net

1.สร้าง view  รับข้อมูลจาก textbox เมื่อทำการกดปุ่ม Send ให้ส่งข้อมูลไปที่ controller

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<input type="text" name="name" id="startDate" value=" " />
<input type="text" name="name" id="endDate" value=" " />
<button id="submit">Send</button>
<div id="response"></div>
<script>
    $("#submit").click(function () {
        var startDate = $("#startDate").val();
        var endDate = $("#endDate").val();
        var objRequest = { StartDate: startDate, EndDate: endDate };
        $.ajax({
            type: "POST",
            url: "./home/cal",
            data: JSON.stringify(objRequest),
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                     $("#response").html(JSON.stringify(data)); },
            failure: function (errMsg) {
                alert(errMsg);
            }
        });
    });
</script>

2 สร้าง Model รับค่าใน C#

    public class RequestModel
    {
        public string StartDate { get; set; }

        public string EndDate { get; set; }
    }

3. สร้าง function ใน controller C# โดยเราจะทำการส่งข้อมูลที่ส่งมากลับไป

       public JsonResult Cal(RequestModel request)
        {
            return Json(request, JsonRequestBehavior.AllowGet);
        }

การติดตั้ง yii2

หลังจากที่ลง xampp แล้ว
ลง Composer ตามลิ้งนี้ 
จากนั้นทำการ cmd เข้าไปที่ cd  htdocs  แล้วพิม

composer global require "fxp/composer-asset-plugin:~1.0.0"

จากนั้นพิม composer create-project yiisoft/yii2-app-advanced ชื่อFolder

ถ้ามันถามหา Token ทำตามนี้ 

จากนั้นทำการ cmd ไปที่ project ที่เราสร้างไว้ แล้วพิมพ์ init เลือก 0 เลือก y

จบ

การแก้ปัญหา autocomplete:off ไม่ทำงาน

ปัญหา:
 autocomplete:off  ไม่ทำงาน ใน form ที่มี input type="Password"
 วิธีแก้:
ให้ใส่

 ใน <form>

 <input type="password" style="display:none"> 

Angular: ng-options การกำหนดข้อมูลlist2 โดยอ้างอิงข้อมูลที่เลือกจากlist1

http://jsfiddle.net/RK6P9/200/

 <select ng-model="item.ProcessId"
       
    ng-options="c.ProcessId as c.ProcessName  for c in columns"></select>
  
       {{item.ProcessId}}
        <select ng-model="item.refprocessId"

            ng-options="c.ProcessId as c.ProcessName  for c in columns | filter:{ProcessId: '!'+item.ProcessId }"></select>

 $scope.columns = [
       {"ProcessId":173,"ProcessName":"Paperwork","PlanTypeId":3},{"ProcessId":270,"ProcessName":"Test Update Process 14/8/2015","PlanTypeId":1},{"ProcessId":174,"ProcessName":"Floor","PlanTypeId":1},{"ProcessId":175,"ProcessName":"Wall","PlanTypeId":1},{"ProcessId":176,"ProcessName":"Roof","PlanTypeId":1},{"ProcessId":240,"ProcessName":"Prepare project","PlanTypeId":3},{"ProcessId":142,"ProcessName":"Base","PlanTypeId":1},{"ProcessId":143,"ProcessName":"Foundation","PlanTypeId":1},{"ProcessId":144,"ProcessName":"Floor","PlanTypeId":1}
    ];

ASP.NET การใช้งาน AutoMapper ในกรณีที่ ชื่อ property ใน Model ปลายทาง ไม่ตรงกับ Model ต้นทาง

ทำเหมือน AutoMapper ธรรมดาเลย แต่เพิ่ม code ส่วนนี้เข้าไป

            Mapper.CreateMap<Modelต้นทาง, Modelปลายทาง>()
               //config property ที่ชื่อต้นทางกับปลายทางไม่ตรงกัน 
              //เช่น ต้นทาง: Id , ปลายทาง: UserId
                .ForMember(
                    dst => dst.UserId ,
                    opt => opt.MapFrom(src => src.Id ))
              //ทำเหมือนข้างบนไปเรื่อยๆในอันที่ชื่อไม่ตรงกัน
                .ForMember(
                    dst => dst.EndDate,
                    opt => opt.MapFrom(src => src.EndDatePlan));

รวม code จะได้เป็น
        public static Modelปลายทาง Toชื่อที่มันสื่อว่ามันแมพไปModelปลายทางนะ(this Modelต้นทาง model)
        {
            Mapper.CreateMap<Modelต้นทาง, Modelปลายทาง>()
                .ForMember(
                    dst => dst.UserId ,
                    opt => opt.MapFrom(src => src.Id ))
                .ForMember(
                    dst => dst.ชื่อตัวแปรของ Property Model ปลายทาง,
                    opt => opt.MapFrom(src => src.ชื่อตัวแปรของ Property Model ต้นทาง));

            return Mapper.Map<Modelปลายทาง>(model) ?? new Modelปลายทาง();
        }

ASP.NET การใช้งาน AutoMapper

AutoMapper ช่วยเราในการ Map Model จาก Repository เข้ากับ Service
เราไม่ต้อง foreach เองในกรณีที่ส่งมาเป็น List<>

ขั้นตอนการทำงาน
1. ไปที่ folder Service แล้วสร้าง folderตามชื่อ Service จากนั้นสร้างไฟล์ ชื่อService+Mappper
2. ใส่ using AutoMapper;
3 ตัวอย่าง     public static class TestMapper
    {
//กรณี Model ที่เป็น List
        public static List<ชื่อ Model ใน Service> To+ชื่อ Model ใน Service(this List<ชื่อ model ที่ส่งมาจาก Repository> entities)
        {
            return Mapper.Map<List<ชื่อ Model ใน Service>>(entities) ?? new List<ScheduleMemberInGroupViewModel>();
        }
 ***** ?? new List<ScheduleMemberInGroupViewModel>(); แปลว่ากรณีที่ไม่มีข้อมูลใน Return Model List<ScheduleMemberInGroupViewModel> เปล่าๆกลับไป ****

//กรณี Model ที่ไม่ได้เป็น List
        public static ScheduleMemberInGroupViewModel  ToTestViewModel(this UserInCompanies entities)
        {
            return Mapper.Map<ScheduleMemberInGroupViewModel>(entities) ?? new  ScheduleMemberInGroupViewModel;
        }
    }
4. ไปที่ Project Web ->App_Start->AutoMapperConfig
    public partial class AutoMapperConfig
    {
        public static void RegisteredAutoMapper()
        {
            ControllerAutoMapperBootstrapper.Configure();

            Mapper.CreateMap<ชื่อ model ที่ส่งมาจาก Repository, ชื่อ Model ใน Service>();
        }
     }
5. สร้าง Model ใน Service ต้องตั้งชื่อตัวแปรให้ตรงกับ Model ที่ส่งมาจาก Repo ด้วยนะไม่งั้นมัน Map ไม่ได้จะเออเร่อ
6. การใช้งาน
    .Toชื่อMapper ที่เราจะ Map ระวังว่าต้อง type ตรงกับที่เราMapด้วยนะ
7. เปิดหน้าที่เราจะใช้ Mapper แล้วพิมพ์ using Pathที่เราเก็บ ชื่อMapper ไว้                                          ถ้าไม่พิมมันจะหาไม่เจอโง่ชิบหายเลย