ドロップダウンリストを使用してテキストボックスを非表示にして再表示しようとしています。たとえば、ドロップダウンリストから0を選択した場合、テキストボックスは表示されません。 1つのテキストボックスが選択された値2に対して同様に表示され、2つのボックスが表示されます。次に、コントローラーアクションでhttp [post]に選択した値とテキストボックスのテキストを渡して計算を実行します。私はwebformsでこれをすべて行うことができますが、私はMVC 2でこれを達成する方法を知らない、私はフォームコレクションを使用してビューからコントローラに値を渡すことができますが、どのように私はドロップダウンリストの値を渡します。すべての例や提案をいただければ幸いです。mvcでカスケードドロップダウンリストとテキストボックスを操作する2
からいくつかの初期のアイデアを得ることができた配列を渡すためにこれを実装する多くの方法があります。入力フィールドは、ドロップダウンリストの選択された値に基づいています。
いつものようにビューモデルを起動します。その後、
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>
それでは、管理するためにJavaScriptを使用して一つの例を見てみましょうあなたがドロップダウンのクリックイベントにいくつかのJavaScriptを記述する必要があるとあなたがhere