Javascript Windows.Location傳遞復雜的JSON對象

Question

我將以下對象傳遞給MVC控制器：

this.JsonData = {
    "__RequestVerificationToken": $('input[name=__RequestVerificationToken]').val(),
    "searchMode": {
        "mode": Number(mode.val()),
        "pageSize": Number(pagesize.val()) || 5,                                       "pageNumber": Number(pagenumber.val()) || 1,                
        "sortField": sortfield.val() || "Ref",
        "sortDirection": sortdirection.val() || "desc"
    },
    "searchData": {
        "Compare": Number(StdComparison.val()),
        "SearchTextFrom": searchText.val(),
        "SearchTextTo": searchTextTo.val()
    }

這工作正常，但我最近的要求已經出現，我希望編碼這個對象與javascript函數Window.location一起使用

我用過的建議：

如何對傳遞復JSON-對象在-URL-使用JavaScript的

window.location + "?SearchCriteria=" + JSON.Stringify(this.JsonData);

創建以下請求：

Controller/Action?SearchCriteria={
    "__RequestVerificationToken": "tokenvalue",
    "searchMode": {
        "mode": 2,
        "pageSize": 5,
        "pageNumber": 1,
        "sortField": "Ref",
        "sortDirection": "desc"
    },
    "searchData": {
        "Compare": 1,
        "SearchTextFrom": "From A",
        "SearchTextTo": "To Z"
    }
}

而

window.location + "?SearchCriteria=" + this.JsonData;

產生以下內容：

Controller/Action?SearchCriteria=[object%20Object]

上面兩個頁面都找不到頁面錯誤。

更新：

我已經向前邁進了尋求答案的過程。

好的，根據幫助者的請求，我已經包含了更多的源代碼。

我有三個課程。

public class MainSearch
{
    public MainSearch()
    {
        SearchData searchData = new SearchData();
        SearchMode searchMode = new SearchMode();
    }
    public SearchData searchData { get; set; }
    public SearchMode searchMode { get; set; }
    public int? page { get; set; }
    public object ToPagedListParameters(int pagenumber)
    {
        searchMode.pageNumber = pagenumber;
        return page;
    }
    public IList<string> ValidationErrorMessages { get; set; }
}
public class SearchData
{
    // Fields used for the ticket number search
    public int? ticketNumberCompare { get; set; }
    public string ticketSearchTextFrom { get; set; }
    public string ticketSearchTextTo { get; set; }

}
public class SearchMode
{
    public int? mode { get; set; }
    public int? pageNumber { get; set; }
    public int? pageSize { get; set; }
    public string sortDirection { get; set; }
    public string sortField { get; set; }
    public string userURN { get; set; }
    public string __RequestVerificationToken { get; set; }
}

這些類包含用於搜索的標准（SearchData已被截斷）

以下是我的控制器代碼：

[HttpGet]
public ActionResult DownloadFileCSV(MainSearch search)
{
    string fileName = Server.MapPath("~/Content/Pdf/") + "somefile.pdf";
    byte[] fileContents = System.IO.File.ReadAllBytes(fileName);
    return File(fileContents, "application/pdf", "result.pdf");
}

最后，從cshtml文件中調用Ajax調用。

$("#DownloadAttachmentCSV").click(function () {
    $.ajax(
        {
            url: '@Url.Action("DownloadFileCSV", "Home")',
            contentType: 'application/json; charset=utf-8',
            datatype: 'json',
            data: JsonData,  
            type: "GET",
            success: function () {
                window.location = '@Url.Action("DownloadFileCSV", "Home")' + '?' + JsonData;                      
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                alert(thrownError);
            }
        });
    });

奇怪的是，上面的代碼實際上工作，文件下載，但這是問題。 JSON數據未填充MainSearch變量。

到目前為止，我可以獲取JSON數據來填充c＃類的唯一方法是將方法更改為POST。

一定是這樣嗎？

Answer 1

您不能將復雜的javascript對象傳遞給這樣的GET方法。 GET沒有body並且綁定到模型，您的查詢字符串名稱/值對必須與綁定對象的屬性匹配。 例如綁定到mode的物業SearchMode的屬性MainSearch ，您查詢字符串將需要包括

....&SearchMode.mode=2....

更改您使用的代碼以生成javascript對象

var data = {
    'searchMode.mode': mode.val(),
    'searchMode.pageSize': pagesize.val() || 5,
    'searchMode.pageNumber': pagenumber.val() || 1,
    'searchMode.sortField': sortfield.val() || "Ref",
    'searchMode.sortDirection':  sortdirection.val() || "desc",
    'searchData.SearchTextFrom': StdComparison.val(),
    'searchData.Compare': searchText.val(),
    'searchData.SearchTextTo': searchTextTo.val(),
}

和ajax代碼

 $.ajax(
    {
        url: '@Url.Action("DownloadFileCSV", "Home")' + '?' + $.param(data),
        type: "GET",
        success: function () {

另請注意以下內容

1. 沒有必要使用Number(..)將值轉換為數字 - 它們都作為文本通過線路發送
2. GET沒有主體，因此設置ajax contentType選項毫無意義
3. 你的方法不返回json所以datatype: 'json'沒有意義。
4. 不需要將防偽令牌傳遞給GET方法

話雖如此，它還不清楚你想在這做什么。 MainSearch search()方法中的代碼從不使用模型的任何值。 並且它返回一個無法使用ajax調用的FileResult （但它可以與window.location ，在這種情況下，成功回調中的代碼需要是

var baseUrl = '@Url.Action("DownloadFileCSV", "Home")';
var queryString = $.param(data);
window.location = baseUrl + '?' + queryString;

但后來不清楚你為什么要對方法進行2次調用 - ajax調用，然后是重定向（ajax調用什么都不做）。

Answer 2

您用作查詢參數的任何內容都應該進行正確的URI編碼，尤其是JSON之類的內容：

window.location + "?SearchCriteria=" + encodeURIComponent(JSON.stringify(this.JsonData));

我不確定模型綁定器是否被設計為將GET請求中的JSON轉換為類實例，但是您在上面進行的嘗試絕對不是可行的方法。