在mvc中使用級聯下拉列表和文本框2

我想使用dropdownlist來隱藏和取消隱藏文本框，因此，例如，從下拉列表中選擇0時，視圖上不應出現文本框，但如果從下拉列表中選擇1 ，一個文本框應該類似於所選值2出現，它應該顯示兩個框，然後我想將所選值和文本框文本傳遞給控制器動作中的http [post]以執行一些計算。我可以在webforms中完成所有這些，但是我不知道如何在mvc 2中實現這一點，我可以使用Form集合將值從視圖傳遞給控制器，但是我將如何傳遞下拉列表值。任何例子或建議將不勝感激。在mvc中使用級聯下拉列表和文本框2

來源

2011-06-29 Mr A

有很多方法可以實現此讓我們使用JavaScript來管理舉一個例子輸入字段基於下拉列表的選定值。

作爲總是以一個視圖模型開始：

public class MyViewModel 
{ 
    public string[] Values { get; set; } 
    public int SelectedItem { get; set; } 
    public IEnumerable<SelectListItem> Items 
    { 
     get 
     { 
      return Enumerable.Range(0, 4).Select(x => new SelectListItem 
      { 
       Value = x.ToString(), 
       Text = x + " Item(s)" 
      }); 
     } 
    } 
}

然後控制器：

public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     var model = new MyViewModel 
     { 
      SelectedItem = 2, 
      Values = new[] { "", "" } 
     }; 
     return View(model); 
    } 

    [HttpPost] 
    public ActionResult Index(MyViewModel model) 
    { 
     // Here you will get the model properly initialized 
     return View(model); 
    } 
}

最後視圖：

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<AppName.Models.MyViewModel>" %> 

<!DOCTYPE html> 

<html> 
<head runat="server"> 
    <title>Index</title> 
    <script type="text/javascript" src="<%: Url.Content("~/scripts/jquery-1.5.1.js") %>"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $('#SelectedItem').change(function() { 
       var count = parseInt($(this).val(), 10); 
       if (count == 0) { 
        $('#values').html(''); 
        return; 
       } 

       for (var i = 0; i < count; i++) { 
        var item = $(':text[name="Values[' + i + ']"]'); 
        if (item.length < 1) { 
         $('#values').append(
          $('<div/>').html(
           $('<input/>', { 
            type: 'text', 
            'data-index': i, 
            name: 'Values[' + i + ']', 
            value: '' 
           }) 
          ) 
         ); 
        } 
       } 

       $('#values :text').each(function (index, element) { 
        if (index >= count) { 
         $(element).parent('div').remove(); 
        } 
       }); 

      }); 
     }); 
    </script> 
</head> 
<body> 
    <div> 
     <% using (Html.BeginForm()) { %> 
      <%= Html.DropDownListFor(
       x => x.SelectedItem, 
       new SelectList(Model.Items, "Value", "Text") 
      ) %> 

      <div id="values"> 
       <% for (int i = 0; i < Model.Values.Length; i++) { %> 
        <div> 
         <%= Html.EditorFor(x => x.Values[i]) %> 
        </div> 
       <% } %> 
      </div> 

      <input type="submit" value="OK" /> 
     <% } %> 
    </div> 
</body> 
</html>

來源

2011-06-29 12:02:18

你需要寫上下拉的單擊事件和傳遞導致數組你可以從一些初步設想一些JavaScript here

來源

2011-06-29 11:33:56 Tassadaque

在mvc中使用級聯下拉列表和文本框2

回答

相關問題