4

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.

Improve this question
3
  • I'd do the show/hide functionality with JS resp. jquery, but handle the form data in the controller. Commented Jul 14, 2015 at 15:40
  • Use jquery to handle the checkbox toggling: stackoverflow.com/questions/3442322/…. And then use jquery to hide the text box: api.jquery.com/hide 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) Commented Jul 14, 2015 at 15:43

2 Answers 2

Reset to default
6

I like using jQuery if I want to manipulate DOM.

Here the example -

enter image description here

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.com/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.

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

2 Comments

that's true, msdn tutorial are also good place to start but which two books do you recommend , i mean the books names which helped you to learn ?
I would suggest Pro ASP.NET MVC 5 by Adam Freeman for step-by-step learning, and Professional ASP.NET MVC 5 for reference.
0

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

Improve this answer

3 Comments

I will check these links to see if it answers this, but I currently have a javascript that I run onclick of my checkbox that looks like this: function test() { document.getElementById("OtherProvider").style.display = 'in-line'; document.getElementById("Test").value = 'changed'; alert('help'); } but the document.getElementById does not find the elements in my html.beginform
do you have an id set on these? see my updated answer
I'm doing @Html.TextBox("OtherProvider", "---fill in---", new { style = "display: in-line"}). I don't see a method on TextBox that has an id in it, but I'm not using TextBoxFor because the "OtherProvider is not in my model...it is a field they will fill out and I'll copy to another field in my model, which is associated to a dropdown that only has a set of values

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.