New to MVC--was never much of a front-end Web developer (mostly backend), so I'm not too privy to good design on the front-end. Now, I'm trying to use MVC without much original WebForm knowledge...that being said, please give me some pointers/links/good ideas on how to handle the following:

I have a textbox field that I want to show/hide based on a checkbox. I have these fields in my View @using (Html.BeginForm()...

Should I change the attribute on the text box in a javascript or controller action? If I use javascript, I'm having a hard time getting to the values in my beginform, but if I use controller action, I'm not sure how/what to pass to/from in my controller action.

New to MVC--was never much of a front-end Web developer (mostly backend), so I'm not too privy to good design on the front-end. Now, I'm trying to use MVC without much original WebForm knowledge...that being said, please give me some pointers/links/good ideas on how to handle the following:

I have a textbox field that I want to show/hide based on a checkbox. I have these fields in my View @using (Html.BeginForm()...

Should I change the attribute on the text box in a javascript or controller action? If I use javascript, I'm having a hard time getting to the values in my beginform, but if I use controller action, I'm not sure how/what to pass to/from in my controller action.

• javascript
• asp-mvc

• I'd do the show/hide functionality with JS resp. jquery, but handle the form data in the controller. – EluciusFTW Commented Jul 14, 2015 at 15:40
• Use jquery to handle the checkbox toggling: stackoverflow./questions/3442322/…. And then use jquery to hide the text box: api.jquery./hide – Thomas Stringer Commented Jul 14, 2015 at 15:40
• You can use javascript. And in Javascript you can play with checkbox and textbox.You can not set element attribute on server side(in your controller) – user786 Commented Jul 14, 2015 at 15:43

2 Answers 2

I like using jQuery if I want to manipulate DOM.

Here the example -

View

@using (Html.BeginForm())
{
    @Html.CheckBoxFor(model => model.MyBooleanValue)
    <br />
    @Html.TextBoxFor(model => model.MyTextValue)
    <br />
    <input type="submit" value="Submit" />
}

<script src="//ajax.googleapis./ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
    $(function () {
        $("#MyBooleanValue").click(function () {
            if ($(this).is(':checked')) {
                $("#MyTextValue").show();
            }
            else {
                $("#MyTextValue").hide();
            }
        });
    });
</script>

Controller

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new MyViewModel
        {
            MyBooleanValue = true
        };
        return View(model);
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        if (model.MyBooleanValue)
        {
            string text = model.MyTextValue;
        }

        return View(model);
    }
}

Model

public class MyViewModel
{
    public bool MyBooleanValue { get; set; }
    public string MyTextValue { get; set; }
}

FYI: I suggest watch few videos training (free course at ASP.NET MVC 5 Fundamentals) or read a book or two before starting it. Otherwise, you will get frustrated.

anything you change on the view (front-end UI manipulation) should be done with Javascript, unless if you're getting or setting some data from/to the database. In this case it looks like its not data manipulation, so its pure javascript UI manipulation

what you want to do is give your textbox and your input a class or id so that you can access them with javascript. And then using that, you can decide whether the checkbox is checked/unchecked to hide/unhide the textbox

here are some useful links to get your started:

check if checkbox is checked javascript

Check if checkbox is checked with jQuery

jquery - show textbox when checkbox checked

How to hide and show item if checkbox is checked

generally, you will access your server (controller) mainly to save data from your view to the database or to retrieve data from the database to show in your view.

to set ids on Html helpers ex. @Html.TextBoxFor you need the following:

@Html.TextBoxFor(x => x.property, new { @id = "someId" }

if you want other html attributes:

@Html.TextBoxFor(x => x.property, new { @id = "someId", @class="someClass" }