Home/ Questions/Q 6099127
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T13:14:15+00:00

I am trying to hide and unhide the textbox using dropdownlist , so for

  • 0

I am trying to hide and unhide the textbox using dropdownlist , so for instance when 0 is selected from drop down, no textbox should appear on the view , but if 1 is selected from dropdownlist , one textbox should appear similarly for selected value 2 , it should show two box , and then I want to pass the selected value and textbox text to http[post] in controller action to carry out some calculation. I can do all this in webforms but I dont know how to acheive this in mvc 2, I can pass the value from view to controller using Form collection but how will I pass the dropdownlist value. Any examples or suggestions will be appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There are many ways to implement this so let’s take one example using javascript to manage the input fields based on the selected value of the dropdown list.

    As always start with a view model:

    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)"
            });
        }
    }
}

    then a controller:

    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);
    }
}

    and finally the view:

    <%@ 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>
    • 0