通過cshtml填充selectList

我試圖更新select列表，這取決於另一個select中的值。在調用服務器時。有沒有辦法做到這一點沒有JSON。我不介意在網站上做一個完整的Postback，但更喜歡另一種解決方案。通過cshtml填充selectList

我使用csHTML和jQuery。

代碼：

<form action="" method="post"> 
    <select name="SelectProductGroup" id="SelectProductGroup"> 
     <option value="0" disabled selected> 
      select group 
     </option> 

     @{ 
      foreach (ProductGroup vg in productGroupList) 
      { 
       <option value="@vg.id"> 
        @vg.name 
       </option> 
      } 
     } 
    </select> 

    <select name="UpdateProduct" id="UpdateProduct"> 
     <option value="0" disabled selected> 
      select product 
     </option> 
    </select> 

    <input type="submit" name="btn" value="updateProduct" /> 
</form> 


<script> 
    $().ready(function() { 
     $('#SelectProductGroup').on('change', function() { 
      var options = { 
       @{ 
        int temp_ID = 0; 
        if(Request["SelectProductGroup"] != null) 
        { 
         temp_ID = int.Parse(Request["SelectProductGroup"]); 
        } 
        int counter = 0; 
        List<Product> productList = Product.getListBy_ProductGroup(temp_ID, connection); 
        string result = ""; 

        foreach(Product v in productList) 
        { 
         result += "val" + v.id + " : " + v.name; 

         if(counter < productList.Count()) 
         { 
          result += ","; 
         } 
        } 

        <text> 
         @result 
        </text> 
       } 
      }; 

      $.each(options, function (val, text) { 
       $('UpdateProduct').append(
         $('<option></option>').val(val).html(text) 
        ); 
      }); 
     }); 
    }); 
</script>

JSON是對子級很好的解決方案。只是似乎無法讓我的頭靠近它。因此，即時通訊正在尋找JSON解決方案的替代方案^^

來源

2013-04-04 Michael Tot Korsgaard

jQuery有一個.load方法，它允許您創建一個AJAX請求並將響應添加到包含元素中。

如：

$('#UpdateProduct').load('http://myserver.com/getProductsAsHtml?id=XXX');

只要確保網頁沒有返回值，但內容應該去<select>元素中，如：

<option>Product 1</option> 
<option>Product 2</option>

您將使用此爲改變事件處理中SelectProductGroup元素：

$('#SelectProductGroup').on('change', function() { 
    var id=$(this).val(); 
    $('#UpdateProduct').load('http://myserver.com/getProductsAsHtml?id=' + id); 
});

來源

2013-04-08 20:37:25 Richard

getProductAsHTML的外觀如何？ – 2013-04-10 14:30:19

.load（）將正好插入頁面返回到第二個選擇內容的內容，所以它應該是一個.cshtml，它圍繞一個或類似的東西。否或，只是列表

JSON只是一種序列化數據的方式，用於（通常）Web服務器和Web瀏覽器之間的傳輸。爲了讓您能夠充分利用它在大多數網站做的方式，你就必須做到以下幾點：

有一個服務器網頁，實現您的getListBy_ProductGroup（）函數返回一個AJAX方法您的列表結果的JSON編碼。看到你使用的是MVC，你可以使用WebAPI來實現這個功能，或許可以將它實現爲http://myserver.com/api/products?id=XXX（這裏有一個叫REST的學校，專門用來組織你的web api）。
在Web瀏覽器中，您將連接JavaScript事件處理程序，以便在第一個下拉列表值更改時，向WebAPI頁面發出AJAX請求，並將所選下拉值作爲參數傳入。
當收到對AJAX請求的響應時，您將擁有更多的JavaScript，它會用一組新的HTML元素替換第二個下拉列表的內容。

有許多庫，幫助你實現（2）和（3），我會建議jQuery的。

對不起，這不是更詳細，但它是一個相當大的問題！

來源

2013-04-04 13:03:10 Richard

我有點尋找一種解決方案沒有實現JSON。但感謝偉大的演練^^有關如何更新第二個選擇列表的任何其他建議，也許通過做一個完整的頁面加載？ – 2013-04-08 07:21:56

對不起，我掛斷了「JSON將是一個很好的解決方案」位！我發佈了另一個答案。 – Richard 2013-04-08 20:30:27

通過cshtml填充selectList

回答

相關問題