2013-03-17 60 views
1

我是MVC和淘汰賽的新手。請參考下面的代碼MVC:如何綁定使用挖空將控制器返回到控制器的下拉對象

控制器代碼:

public string getJSON() 
    { 
     Product _objProduct = new Product(); 
     DataTable _objDT = _objProduct.getProduct(); 
     JavaScriptSerializer serializer = new JavaScriptSerializer(); 
     List<Dictionary<string, object>> rows = 
     new List<Dictionary<string, object>>(); 
     Dictionary<string, object> row = null; 

     foreach (DataRow dr in _objDT.Rows) 
     { 
      row = new Dictionary<string, object>(); 
      foreach (DataColumn col in _objDT.Columns) 
      { 
       row.Add(col.ColumnName, dr[col]); 
      } 
      rows.Add(row); 
     } 
     return serializer.Serialize(rows); 
    } 

查看代碼

<script> 
$(document).ready(function() { 
    $('#divheader').append("<h2>Please place an order</h2>"); 
    $.ajax({ 
     type: "Post", 
     url: "/Order/getJSON", 
     data: {}, 
     success: function (data) { 

      function ReservationsViewModel() { 
       var self = this; 
       self.product = data; 

       self.addOrder = function() { 
        alert('in'); 
        self.order.push(new orderReservation()); 
       } 
      } 
      ko.applyBindings(new ReservationsViewModel()); 
     } 
    }); 
}); 

<table> 
<thead> 
    <tr> 
     <th>Product Name</th> 
     <th>Quantity/Unit</th> 
     <th>Unit Price</th> 
     <th>Quanitity</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td> 
      <select id="ddlProduct"></select> 
     </td> 
     <td><label></label></td> 
     <td><label></label></td> 
    </tr> 
</tbody> 

我嘗試以下操作: <select id="ddlProduct" data-bind="options: ProductName"></select> 和我的數據包含以下格式

[{"ProductID":1,"ProductName":Monitor},......] 

它提供了錯誤:Microsoft JScript運行時錯誤:無法解析綁定。消息:[object Error];綁定值:選項:產品名稱

任何想法,我在哪裏出錯?

任何人都可以告訴我如何將ajax調用返回的數據綁定到ddlProduct使用淘汰賽。

在此先感謝

回答

0

假設你的服務器端腳本返回形式的有效JSON:

<select id="ddlProduct" data-bind="options: products, optionsValue: 'ProductID', optionsText: 'ProductName'"></select> 

然後:

[{"ProductID":1,"ProductName":Monitor},......] 

,你可以在你的下拉菜單中使用options binding

<script type="text/javascript"> 
    $(function() { 
     $.ajax({ 
      type: 'POST', 
      url: '@Url.Action("GetJSON", "Order")', 
      success: function (data) { 
       ko.applyBindings({ products: data }); 
      } 
     }); 
    }); 
</script> 

你的控制器動作似乎是一團糟。我會嘗試改善它一點:

public ActionResult GetJSON() 
{ 
    var products = new Product() 
     .getProduct() 
     .AsEnumerable() 
     .Select(row => new 
     { 
      ProductId = row.Field<int>("ProductId"), 
      ProductName = row.Field<string>("ProductName") 
     }) 
     .ToList(); 
    return Json(products); 
} 
+0

哎謝謝你的幫助親愛的。但我知道我的控制器代碼中出了什麼問題?爲什麼我們需要使用Json()? – Prashant 2013-03-20 15:59:36

0

你結合ReservationsViewModel,不具有ProductName。它有product,這似乎實際上是一個產品陣列。這似乎是你想要將你的選項綁定到(一個數組)。

看看the documentation中的例子3。你綁定到一個對象列表,所以你需要使用options和optionsText的組合來表示name屬性是ProductName。

所以這樣的事情:data-bind="options: product, optionsText: 'ProductName'"

相關問題