如何在ASP.NET MVC和jQuery中添加額外的部分視圖，具體取決於下拉列表選擇？

我有一個表格，我想根據下拉列表的值添加額外的字段。他們會是一組字段，我想動態地改變div的內容與來自渲染部分的html，這將呈現一個PartialView與我想要的字段。如何在ASP.NET MVC和jQuery中添加額外的部分視圖，具體取決於下拉列表選擇？

眼下的下拉列表中的代碼如下

<p> 
     <label for="CatalogItem.Type"> Type: </label> 
     <%=Html.DropDownList("CatalogItem.Type",Model.Types, "Choose Type") %> 
    </p> 

    <div id = "ExtraInfo"> 

    </div>

我要把多餘的東西（領域的專門的類型）在ExtraInfo DIV。 jQuery代碼會爲此做什麼？

謝謝！

來源

2010-01-01 Francisco Noriega

很難選擇誰給出正確的答案，因爲你們都給了我一部分，但我決定把它給@Tony，因爲他發佈了有關jQuery腳本的大部分答案......但@DM你得到了ajax調用的+1，因爲那也是我想要的。 – 2010-01-02 19:30:37

首先CSS類選擇器添加到您的下拉列表中，讓稱它爲「mydropdown」現在

使用這樣的事情：

<script language=」javascript」 type=」text/javascript」 > 

     function addtoDiv() 
     { 
     $(document).ready(function() { 

     var myval=$(」#mydropdown」).val(); // get value of dropdown 


     if (myval == "somevalue") // check myval value 
     { 
      $("#ExtraInfo").html("add html code inside div here"); // add code based on   value 
     } 

     }} 
    </script>

來源

2010-01-02 00:24:20

@Tony有正確的方法，而是外放你的RenderPartial html右鍵入「.html（」在div裏面添加html代碼「）」你可能想要做一個ajax調用。這樣用戶不會下載他/她甚至可能看不到的一堆html。

像這樣：

if (myval == "someValue") 
{ 
    $("#ExtraInfo").load("/dynamic-stuff/1") 
} 
else if (myval == "someOtherValue") 
{ 
    $("#ExtraInfo").load("/dynamic-stuff/2") 
}

這也假定您已經設置了處理像「/動態的東西/ 2」的URL路徑並用正確的局部視圖響應。

來源

2010-01-02 00:35:55

您是否需要動態添加字段？您可以通過以下方式使用JQuery添加字段：

$（「」）。attr（「id」，「test」）。addClass（「FormLabel」）。appendTo（「＃parentElement」）; （「」）。attr（「id」，「testinput」）。attr（「type」，「text」）。appendTo（「＃parentElement」）;

通過這種方式，您可以通過編程創建字段。

作爲替代方案，您可以創建一個JQuery局部視圖。創建一個返回這個局部視圖的一個實例的操作方法，並調用使用

$.get("/<controller>/<actiontoreturnpartialview>", function(data) { 
    $("#ExtraInfo").html(data); 
});

它可以更容易，因爲你可以依靠服務器端邏輯來呈現用戶界面，操作方法，雖然我傾向於使用客戶端方法。

或者，您可以創建自己的HTML助手來完成這一切，但這將是很多工作。

HTH。

來源

2010-01-02 00:37:23

如何在ASP.NET MVC和jQuery中添加額外的部分視圖，具體取決於下拉列表選擇？

回答

相關問題