MVC 4 display/hide a textbox based on a checkbox check
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.
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.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.
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" }
上一篇: 如何找出是否在jQuery中检查复选框