Question

我的目标是，当您按下按钮时，文本消失并再次出现文本框，您可以在其中编辑文本。我正在使用Razor，所以我目前在我的项目中没有任何JS或Jquery。

以下是我目前的观点：

@model ScribblyDump.Models.Gebruiker
@{
ViewBag.Title = "userPage";
}
@using (Html.BeginForm("Index", "Gebruiker"))
{
    if (Session["Username"] != null)
    {
        <div id="userdescr">
            <p>
                @Model.Description    
            </p>
        </div>    
    }
}

@using (Html.BeginForm("Description", "Gebruiker"))
{
    <div>
        <input type="submit" name="hidetext" value="Edit User Description"/>    
    </div>
}

我的控制器中有一个空的ActionResult。

我该怎么办？我甚至可以在控制器中放任何东西，或者我应该在那里使用javascript吗？

编辑：所以，是的，我得出结论，我将在cshtml中添加一些JS。不知道会有多漂亮，但我想这会更容易。它仍然不太有效：

@using (Html.BeginForm("Index", "Gebruiker"))
{
    if (Session["Username"] != null)
    {
        <div id="userdescr">
            <p id="userdescrLabel">
                @Model.Description    
            </p>
            <input id="userdescrTextBox" type="text" 
value="@Model.Description" style="visibility: hidden" />
        </div> 
    }

}

@section Scripts{
    <script>
      $("#userdescr").click(function(){
       $("#userdescrLabel").hide();
       $("userdescrTextBox").show();
    });
    </script>
}

这仅提供用户说明。没有按钮，当我点击文本时它会消失，什么都不留。我该如何解决这个问题？

Answer 1

您可以使用JavaScript或JQuery来玩DOM。或者您可以使用您的Controller显示带有编辑View（）的新页面; 我更喜欢在这里使用JQuery，因为不需要让服务器忙于这种简单的工作。在项目中包含JQuery后使用此代码。

 $("#userdescr").click(function(){ 
       $("#userdescr").hide();
       $("[name= hidetext]").val( $("#userdescr").html());
       $("[name= hidetext]").show();
    });

Answer 2

最好考虑一下您希望此操作发生的位置。您基本上有两个选项：服务器或客户端。

由于这是非常基于视图的，因此最好是做这个客户端。这意味着您的代码需要存在于.cshtml文件中。考虑到这一点，使用JavaScript实现它是最容易的。 Ismail提供的JavaScript是利用JQuery库的完美示例。我唯一的区别就是将所有的html都放在JavaScript之外，而JavaScript的工作只是在已经存在的HTML元素上设置属性，如下所示：

将HTML更改为以下内容：

@using (Html.BeginForm("Index", "Gebruiker"))
{
    if (Session["Username"] != null)
    {
        <div id="userdescr">
            <p id="userdescrLabel">
                @Model.Description    
            </p>
            <input id="userdescrTextBox" type="text" value="@Model.Description" style="display:hidden" />
        </div>    
    }
}

然后让你的javascript如此：

@section Scripts{
     <script>
      $("#userdescr").click(function(){ 
       $("#userdescrLabel").hide();           
       $("userdescrTextBox").show();
    });
   </script>
}

道歉，如果这不是100％语法正确，我无法测试它，因为我在工作，但希望它会让你走上正确的道路！

按下按钮MVC / Razor时，文本消失

2 个答案: