MVC 4基于复选框检查显示/隐藏文本框

Question

MVC 新手——从来都不是前端 Web 开发人员（主要是后端），所以我不太了解前端的良好设计。现在，我正在尝试在没有太多原始 WebForm 知识的情况下使用 MVC……话虽如此，请给我一些关于如何处理以下问题的指针/链接/好主意：

我有一个文本框字段，我想根据复选框显示/隐藏。我的视图中有这些字段@using (Html.BeginForm()...

我应该在 javascript 或控制器操作中更改文本框的属性吗？如果我使用 javascript，我很难获得 beginform 中的值，但如果我使用控制器操作，我不确定如何/在我的控制器操作中传递/传递什么。

Answer 1

如果我想操作 DOM，我喜欢使用 jQuery。

这里是例子 -

查看

@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>

控制器

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);
    }
}

型号

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

仅供参考： 我建议观看一些培训视频（ASP.NET MVC 5 Fundamentals 的免费课程）或在开始之前阅读一两本书。否则，你会感到沮丧。

Answer 2

您对视图所做的任何更改（前端 UI 操作）都应使用 Javascript 完成，除非您从/向数据库获取或设置一些数据。在这种情况下，它看起来不是数据操作，所以它是纯 javascript UI 操作

你想要做的是给你的文本框和你的输入一个类或 id，这样你就可以用 javascript 访问它们。然后使用它，您可以决定是否选中/取消选中复选框以隐藏/取消隐藏文本框

这里有一些有用的链接可以帮助您入门：

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

通常，您将访问您的服务器（控制器）主要是为了将视图中的数据保存到数据库中，或者从数据库中检索数据以显示在您的视图中。

在 Html 助手上设置 id。 @Html.TextBoxFor您需要以下内容：

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

如果你想要其他 html 属性：

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