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.

SherryA
  • 81
  • 1
  • 1
  • 7
  • I'd do the show/hide functionality with JS resp. jquery, but handle the form data in the controller. – EluciusFTW Jul 14 '15 at 15:40
  • Use jquery to handle the checkbox toggling: http://stackoverflow.com/questions/3442322/jquery-checkbox-event-handling. And then use jquery to hide the text box: http://api.jquery.com/hide/ – Thomas Stringer Jul 14 '15 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 Jul 14 '15 at 15:43

2 Answers2

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.

Win
  • 61,100
  • 13
  • 102
  • 181
  • 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 ? – Shaiju T Nov 10 '15 at 16:14
  • 1
    I would suggest [Pro ASP.NET MVC 5](http://www.amazon.com/Pro-ASP-NET-Experts-Voice-ASP-Net/dp/1430265299/ref=sr_1_2?ie=UTF8&qid=1447172408&sr=8-2&keywords=asp.net+mvc+5) by Adam Freeman for step-by-step learning, and [Professional ASP.NET MVC 5](http://www.amazon.com/Professional-ASP-NET-MVC-Jon-Galloway/dp/1118794753/ref=sr_1_1?s=books&ie=UTF8&qid=1447172546&sr=1-1&keywords=asp.net+mvc+5) for reference. – Win Nov 10 '15 at 16:23
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" }

Community
  • 1
  • 1
Abdul Ahmad
  • 9,673
  • 16
  • 64
  • 127
  • 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 – SherryA Jul 14 '15 at 16:01
  • do you have an id set on these? see my updated answer – Abdul Ahmad Jul 14 '15 at 16:03
  • 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 – SherryA Jul 14 '15 at 16:19