從jQuery中檢索JSON數組在Ajax中調用asp.net網頁

我想通過jQuery的ajax調用發送一些數據。我的問題是：如何在我的Insert.cshtml文件中獲得此JSON數組？我試過Request["rows"],Request[0][rows]等，但沒有任何成功。從jQuery中檢索JSON數組在Ajax中調用asp.net網頁

在這裏，我要發送的數據是這個（表格多行數據）：

[ 
    { 
     "sl": "1", 
     "tname": "Gardening", 
     "ttype": "4", 
     "tduration": "12" 
    }, 
    { 
     "sl": "2", 
     "tname": "Nursing", 
     "ttype": "4", 
     "tduration": "45" 
    } 
]

jQuery代碼：

$.ajax({ 
    type: "POST", 
    url: "/Insert", 
    data: rows, 
    contentType: "application/json", 
    success: function (data, status) { 
     alert(status); 
    }, 
    error: function (xhr, textStatus, error) { 
     var errorMessage = error || xhr.statusText; 
     alert(errorMessage); 
    } 
});

更新：在的jsfiddle的部分演示 - http://jsfiddle.net/rafi867/gprQs/8/

來源

2012-12-17 lazylionking

也許'data [0] ['tname']'？ – qwerty

@qwerty我試圖訪問引用頁面（在這種情況下爲Insert.cshtml）中的值，而不是在當前頁面中。無論如何，我想你的建議會帶來像「名稱數據」在當前上下文中不存在的錯誤。 – lazylionking

你不會碰巧有一個鏈接到您的網站，是嗎？還是一個jsfiddle？ – qwerty

我已經把示例代碼用於顯示如何顯示數組ite通過使用jQuery和CSS在網頁上的ms。通過使用此嘗試來理解概念，然後將其應用於您的方案。

HTML

<div class="dialog" id="unpaid-dialog" data-width="550" data-title="Checkout"> 
     <ul> 
      <li id="serviceAndRetailDetails" style="text-align: left;"></li> 
     </ul> 
    </div>

jQuery的

<script type="text/javascript"> 


    var toBePaidItems = new Array();//create a array 
    var make = ""; 

    $.ajax({ 
     type: "GET", 
     url: "/Portal/GetServiceAndRetailSalesDetails", 
     dataType: 'json', 
     contentType: "application/json; charset=UTF-8", 
     data: { invoiceOrSaleId: invoiceOrSaleId, providerKey: providerKey }, 
     success: function (response) { 
      make = "<table id='tblPayment'>"; 
      toBePaidItems = []; 

      $.each(response, function (index, sr) { 

       make += "<tr id=" + sr.AllocationOrInvoiceOrSaleId + " class=" + sr.Class + ">" + "<td style='padding-right:100px'>" + sr.Name + "</td><td class='colTotal' style='padding-right:45px'>" + '$ ' + sr.Price.toFixed(2) + "</td><td></tr>"; 

       //insert into array 
       toBePaidItems.push(sr.AllocationOrInvoiceOrSaleId); 
      }); 

      make += "</table>"; 
      $("#serviceAndRetailDetails").html(make); 
     } 
    }); 

</script>

控制器的操作方法

[HttpGet] 
public JsonResult GetServiceAndRetailSalesDetails(Guid invoiceOrSaleId, string providerKey) 
     { 

      var items = new List<CheckOutServiceAndRetailItem>(); 

      var serviceDetails = Repository.GetAllPayableItems(invoiceOrSaleId).ToList(); 

      foreach (var s in serviceDetails) 
      { 
       var item = new CheckOutServiceAndRetailItem 
       { 
        AllocationOrInvoiceOrSaleId = s.Allocation.AllocationId, 
        Name = s.Allocation.Service.Name, 
        Price = s.LatestTotal, 
        Class = s.Allocation.Service.IsAnExtra, 
       }; 
       items.Add(item); 
      } 

      return Json(items, JsonRequestBehavior.AllowGet); 
     }

陣列輸出將

enter image description here

如何操作數組Here

希望這將幫助你。

來源

2012-12-17 16:12:51 Sampath

謝謝，但這並不能真正幫助我。我想在MVC中你可以使用一個函數來接收數據;我的問題是如何爲asp.net網頁做類似的事情。 – lazylionking

@lazylionking從您發送數據的地方，是從Insert.cshtml還是從另一個網頁？你能稍微解釋一下這個場景嗎？ – Sampath

我有一個頁面（假設，Default.cshtml）與一個窗體，其中用戶可以添加新的行，如果需要，最後，如果他們按提交，我希望所有的數據（由多行組成）插入到數據庫。由於我無法使用純html訪問動態添加的行，因此我使用jQuery將所有行打包到json對象中，並將其傳遞給Insert.cshtml文件，該文件應該處理數據庫任務。但是我無法訪問Insert.cshtml文件中的json對象，這是我的問題。對於部分概述，看看這個小提琴：http://jsfiddle.net/rafi867/gprQs/8/ – lazylionking

數據參數是指名稱映射值對查詢字符串參數，你可以通過docs告訴：

數據

數據被髮送到服務器。如果不是字符串，它將被轉換爲查詢字符串。它附加到GET請求的url。請參閱 processData選項以防止此自動處理。 對象必須是是鍵/值對。如果value是一個數組，jQuery將基於傳統設置（下面描述）的值使用相同密鑰對多個值進行序列化。

如果你再繼續讀了.param()方法的文檔，這將幫助你理解這是怎麼回事你的要求，以及如何jQuery的發送你的對象到服務器。

您可能只需將對象/數組命名爲data對象，以便您可以在Request.Forms對象中引用它們。

來源

2012-12-17 17:36:34

我試圖模仿你的問題在App_Code文件創建Sample.cs類：

public class Sample 
{ 
    public string sl { get; set; } 
    public string tname { get; set; } 
    public string ttype { get; set; } 
    public string tduration { get; set; } 
}

現在你Insert.cshtml文件應該是這樣的：

@{ 
    var sample = new Sample[]{ 
    new Sample{ sl = "1", tname = "Gardening", ttype = "4", tduration = "12" }, 
    new Sample{ sl = "2", tname = "Nursing", ttype = "4", tduration = "45" } 
    }; 
    Json.Write(sample, Response.Output); 
}

和文件（ReadSample ？.cshtml），它保存你的採樣對象應該是：

<!DOCTYPE html> 

<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title></title> 
     <script src="~/Scripts/jquery-1.4.2.min.js" type="text/javascript"></script> 
     <script type="text/javascript"> 
      $.getJSON('/Insert', function (sample) 
      { 
       var custList = ""; 
       $.each(sample, function (index, obj) { 
         custList += "<li>" + obj.sl + " - " + obj.tname + 
           " - " + obj.ttype + " - " + obj.tduration + "</li>"; 
       }) 
       $("#list").html("<ul>" + custList + "</ul>") 
      }) 
     </script> 
    </head> 
    <body> 
     <div id="list"></div> 
    </body> 
</html>

在我的例子我有REA DED對象數組

$.getJSON('/Insert', function (sample)

並創建了一個無序列表以顯示其內容

$.each(sample, function (index, obj) { 
     custList += "<li>" + obj.sl + " - " + obj.tname + 
       " - " + obj.ttype + " - " + obj.tduration + "</li>"; 
}) 
$("#list").html("<ul>" + custList + "</ul>")

我希望這可以幫助。

來源

2012-12-18 13:39:54 GmG

從jQuery中檢索JSON數組在Ajax中調用asp.net網頁

回答

相關問題