使用 AngularJS 將復雜對象發布到 MVC 控制器

Question

因此，我正在嘗試構建一個基於旅行的站點，在該站點中我從 UI 中獲取一些值並嘗試將其綁定到一個對象，然后將 Http post 發送到控制器，然后控制器將處理工作。 問題是控制器將接收作為復雜對象的發布數據。 所以我現在的問題實際上是多方面的。

1. 如何在我的客戶端（AngularJS）代碼中構造一個實例並為這樣一個復雜對象分配值？
2. razor 有什么辦法可以通過獲取對象來幫助我們。
3. 完成后，如果我將 JSON 字符串化，控制器將能夠接受該版本。

我將給出一些代碼以供參考。

模型類：

public class SearchCriteria
    {
        public Routes Routes { get; set; }
        public int JType { get; set; }
        public PaxInfo PaxInfo { get; set; }
        public string SearchFingerPrintID { get; set; }
    }

在上面的類中 Routes 是一個需要解決的復雜類型。

用於導入模型對象的 Razor 代碼

@{
    var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
    var SampleReqObj = serializer.Serialize(Model.MyRequest);
 }

一些 Angularjs 代碼。

$scope.ButtonClick = function () {

    var ReqObjFinal = JSON.parse(SampleReqObj);

    var post = $http({
        method: "POST",
        url: "/Main/DemoFormDataSubmit",
        dataType: 'json',
        data: JSON.stringify(ReqObjFinal),
        headers: { "Content-Type": "application/json" }
    });

    post.success(function () {
        $window.alert("Successful Call");
    });

    post.error(function () {
        $window.alert("Not working bro");
    });
}

我想從我的 UI 中獲取的字段。

<input type="text" name="Departure" ng-click="DeptLoadList()"
       ng-model="Departure" id="Departure" ng-keydown="completeDept(Departure)"
       class="form-control" />

我是 angular-js 的初學者，所以提前感謝您的幫助！！！

Answer 1

您可以創建一個視圖模型。 並使用它您的視圖頁頭

@Model.YourViewModel

並使用頁面輸入名稱 ex ：

<form action="post" action="YourController/Save">
<input name="YourViewModel.PropName" type="text" value="@YourViewModel.PropName" />
</form>

你可以發布到控制器前：

 [HttpPost]
 function void Save(YourViewModel data){
    string value=data.YourProperty;
 }

您可以創建一個結構；

public class YourViewModel{ 
  ... 
   public string DataJson{get;set;}
}

和

var pageData=Json.parse(@Model.DataJson); 
pageData.YourProp="Your value";

$http({ method: "POST", url: "/YourController/Save", dataType: 'json', data: 
pageData, .. }) 

該對象進入您的控制器