2014-10-19 86 views
0

我正在將數據從JavaScript應用程序發送到MVC5控制器,但是當數據提交到Submit controller操作時,它永遠不會被調用。我有創建以下JSON對象一些很簡單的製圖員:未從JSON AJAX調用MVC5控制器操作Post

function mapContactDto(vm) 
{ 
    var contactDto = {}; 
    contactDto.firstName = vm.firstName(); 
    contactDto.lastName = vm.lastName(); 
    contactDto.companyName = vm.companyName(); 
    contactDto.emailAddress = vm.emailAddress(); 
    contactDto.phonePrimary = vm.phonePrimary(); 
    contactDto.phoneSecondary = vm.phoneSecondary(); 
    contactDto.address1 = vm.address1(); 
    contactDto.address2 = vm.address2(); 
    contactDto.city = vm.city(); 
    contactDto.postalCode = vm.postalCode(); 
    contactDto.country = vm.country(); 
    return contactDto; 
} 

function mapCartItems(vm) 
{ 
    var cartItemsDto = new Array(); 
    $.each(vm.selectedOptions(), function (index, step, array) { 
     var sku = step.selection().sku; 
     if (sku !== "0") { 
      cartItemsDto.push(sku); 
     } 
    }); 
    return cartItemsDto; 
} 

/* if i dump the object that is sent to the server with `console.log(JSON.stringify(item))` I get: 

{ 
"skus": ["1001","8GB","201"], 
"contact": { 
    "firstName":"Jon", 
    "lastName":"Doe", 
    "companyName":"Yup my company", 
    "emailAddress":"[email protected]", 
    "phonePrimary":"012111 231", 
    "phoneSecondary":"", 
    "address1":"1 Billing Way", 
    "address2":"Navigation House", 
    "city":"London", 
    "postalCode":"112211", 
    "country":"GB" 
    } 
} 
*/ 

然後我用下面的代碼發送數據:

var contactDto = mapContactDto(self.billingVm()); 
var cartItemsDto = mapCartItems(self.configurationVm()); 

var req = new XMLHttpRequest(); 
req.open('HEAD', document.location, false); 
req.send(null); 

var item = { 
    skus: mapCartItems(cartItemsVm()), 
    contact: mapContactDto(billingVm()) 
}; 

var url = '/Knockout/Submit'; 

$.ajax({ 
    cache: false, 
    url: url, 
    contentType: 'application/json; charset=utf-8', 
    dataType: 'json', 
    data: item, 
    type: 'POST', 
    success: function (data, textStatus, jqXHR) {   
    }, 
    error: function (data, textStatus, jqXHR) { 
    } 
}); 

我的控制器代碼如下:

public JsonResult Submit(string[] Skus, ContactDto Contact) 
{ 
    return Json(new { success = true, message = "Some message" }); 
} 

/* and MVC models are: */ 

public class ContactDto 
{ 
    public string FirstName { get; set; } 
    public string LastName { get; set; } 
    public string CompanyName { get; set; } 
    public string EmailAddress { get; set; } 
    public string PhonePrimary { get; set; } 
    public string PhoneSecondary { get; set; } 
    public string Address1 { get; set; } 
    public string Address2 { get; set; } 
    public string City { get; set; } 
    public string PostalCode { get; set; } 
    public string Country { get; set; } 
} 

我有以下問題請:

  • 但是,如果我將控制器參數註釋掉,它就會變成Submit()然後調用它,爲什麼?

  • 從上面,似乎控制器框架無法匹配的參數 - 任何想法我做錯了請嗎?

  • 如何在MVC控制器上啓用調試,以便我可以看到發生了什麼?

回答

1

你將不得不做出兩處修改: 字符串化您的JSON如下:

$.ajax({ 
    cache: false, 
    url: url, 
    contentType: 'application/json; charset=utf-8', 
    dataType: 'json', 
    data: JSON.stringify(item), 
    type: 'POST', 
    success: function (data, textStatus, jqXHR) {   
    }, 
    error: function (data, textStatus, jqXHR) { 
    } 
}); 

其次,只是標註您的方法與[HttpPost]如下:

[HttpPost] 
public JsonResult Submit(string[] Skus, ContactDto Contact) 
{ 
    return Json(new { success = true, message = "Some message" }); 
} 
2

四件事情你必須使用ajax調用進行檢查,
1.如果使用JavaScript對象,則必須在傳遞之前將對象串聯起來。
2.動作方法的動作動詞應與您的ajax調用的類型相同,如果POST則動作方法應由動作動詞[HttpPost]裝飾。
3.始終在@ url.Action(「action」,「controller」)中使用ajax中url的相對路徑。
4.您的操作方法方法的輸入參數應與json對象參數匹配(嚴格來說,區分大小寫)。

爲了進行調試,您可以在瀏覽器中使用firebug插件,以便您可以查看通過網絡發送的內容,或者在該檢查網絡選項卡中按F12以查找調試工具。