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

Question

MVC的新手 - 从来都不是一个前端Web开发人员（主要是后端），因此我不太了解前端的优秀设计。现在，我试图使用没有太多原始WebForm知识的MVC ......如果说，请给我一些关于如何处理以下内容的指针/链接/好主意：

我有一个文本框字段，我想根据复选框显示/隐藏。我在View @using（Html.BeginForm（）...

中有这些字段

我应该在javascript或控制器操作中更改文本框中的属性吗？如果我使用javascript，我很难找到我的beginform中的值，但是如果我使用控制器操作，我不知道在我的控制器操作中如何/传递给/从。< / p>

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