ASP.NET MVC - how to enable textbox in controller according to dropdownlist

Question

I have been struggling with this all day today. I even dont want to use jquery or javascript to solve this problem. I only need to use controller to make it work. So I have a dropdownlist (List: ManagerName, EmployeeName).

When selecting "ManagerName" from the dropdownlist, the categorie value will pass to a parameter of ChangeTextBoxes Method in Controller (working for me) but I dont know how to disable textbox in Index.cshtml and enable them in controller. Like this bottom code.

If any of you strongly suggest me to use javascript or jquery, I need a very simple code (good example) from stratch to end so that I can understand better.

Index.cshtml

 @using (Ajax.BeginForm("ChangeTextBoxes", "Home", ajaxOptions: new AjaxOptions
 {
HttpMethod = "GET",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "searchResults"
}))
 {
@Html.DropDownList("categorie", new SelectList(new[]
                                                   {
                                                       "ManagerName", "EmployeeName"
                                                   }) as SelectList)

@Html.TextBox("txtManager") //how to disable or invisible?
@Html.TextBox("txtEmployee") //how to disable or invisible?
<input id="Submit" type="submit" value="submit"  />

}

HomeController.cs

    public PartialViewResult ChangeTextBoxes(string categorie)
    {
         switch (categorie) //get selectedvalue from dropdownlist which is working
        {
            case "ManagerName":
                //how to enable txtManager (textbox) ???
                break;
            case "EmployeeName":
               //how to enable txtEmployee (textbox)????
                break;


        }

     continue .......

    }

I really hope any of you can help me solve this problem. It would be something I learn and understand how it works. I have a very little knowledge of MVC but it is a challenge to learn it. Thanks so much for your time!!

Update

Inside Index.cshtml

@Html.DropDownList("categorie", new SelectList(new[]
                                               {
                                                   "ManagerName", "EmployeeName"
                                               }) as SelectList)

@Html.TextBox("txtManager") 
@Html.TextBox("txtEmployee") 

<script type="text/javascript">
$('#categorie').on('change', function () {
    if ($(this).val() == "condition to disable") {
        $('#txtManager').hide(); //invisible
        $('#txtManager').attr('disabled', 'disabled'); // disable
    } else {
        $('#txtManager').show(); //visible
        $('#txtManager').removeAttr('disabled'); // enable
    }
});

Why it is not working? Do I miss something or do wrong?

this is exactly what javascript/jquery should be used for. The only other way would be to post back and either set a variable in the model or a view bag variable and hide the text box on page load. use jquery :) — Matt Bodily
– Matt Bodily, Commented Feb 4, 2014 at 20:26
okay but i have tried javascript or jquery but it never worked. can you please give me a code sample that would help me understand. im very newbie to MVC. Im confused! Hope you dont mind :) — user235973457
– user235973457, Commented Feb 4, 2014 at 20:33

Dmitry Sikorsky · Accepted Answer · 2014-02-04 20:34:44Z

1

If I understand correctly your question here is the answer.

Add boolean flag like 'isTextBoxDisabled' to your viewmodel and if it is set to 'true' add 'disabled' attribute with same value while view generating (in other words, do it in your .cshtml file). Html.DropDownList helper has overloaded method with additional htmlParameters for that. Ask If you have any questions.

answered Feb 4, 2014 at 20:34

Dmitry Sikorsky

1,56116 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dmitry Sikorsky Over a year ago

Hm... Let's think that you have ChangeTextBoxes action and it returns PartialView that is displaying inside the form (it replaces the form content by ajax request when you submit you 'ajax' form). Right? That PartialView (.cshtml) contains DropDownList and 2 textboxes. So, if you already pass viewmodel when returning PartialView, add 2 bool field to it. Each field is flag for textbox — should it be disabled. If you don't have viewmodel object just add simple with this two fields. Than add html parameter 'disabled' IF flag is set to true to each of textfilds in you cshtml...

Dmitry Sikorsky Over a year ago

You should understand one simple thing about MVC. You build your views using only* data in viewmodel. So viewmodel contains all data you need to build the view (also it contains STATE of elements). So to disable something you have only two options: do it on server while view generating using viewmodel data or do it on client by javascript (maybe using viewmodel data too!).

Matt Bodily · Accepted Answer · 2014-02-04 20:37:02Z

1

put this in your script tag

$('#categorie').on('change', function(){
    if($(this).val() == "condition to disable"){
        $('#txtManager').hide(); //invisible
        $('#txtManager').attr('disabled', 'disabled'); // disable
    }else{
        $('#txtManager').show(); //visible
        $('#txtManager').removeAttr('disabled'); // enable
    }
});

answered Feb 4, 2014 at 20:37

Matt Bodily

6,4134 gold badges32 silver badges51 bronze badges

4 Comments

user235973457 Over a year ago

should i put this script tag in header tag from _layout.cshtml? or can i put it in Index.cshtml?

Matt Bodily Over a year ago

put it in index. Make sure the script tag is under your reference to jquery

user235973457 Over a year ago

let me update my post. my code seems not working.i may miss something

Matt Bodily Over a year ago

condition to disable is where you need to put the value from the drop down that you are looking for. if they select "A" then disable, whatever "A" is

Rajshekar Reddy · Accepted Answer · 2014-02-05 07:28:08Z

Put your script as shown

    <script type="text/javascript">
    $(function(){


    $('#categorie').on('change', function () {
        if ($(this).val() == "E") {
            $('#txtManager').hide(); //invisible
            $('#txtManager').attr('disabled', 'disabled'); // disable
            $('#txtEmployee ').show();
        } else {
            $('#txtManager').show(); //visible
            $('#txtManager').removeAttr('disabled'); // enable
            $('#txtEmployee ').show();
        }
    });


    });
    </script>

Here E means the value of the option selected. So when we choose E we disable/hide the Employee textbox.

Make sure you have jquery added in your project. ie. jquery.js

Also for the above script to work make sure your rendered textboxes have their Id'd as txtManager and txtEmployee respectively. And also the dropdown box has the id set to categorie. ANd the values for the dropdown is M for Manager Option and E for Employee option

Collectives™ on Stack Overflow

ASP.NET MVC - how to enable textbox in controller according to dropdownlist

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related