Home Make text disappear when a button is pressed MVC/Razor
Reply: 2

Make text disappear when a button is pressed MVC/Razor

Civveon
1#
Civveon Published in 2017-11-09 15:06:39Z

My goal is, when you press a button, the text disappears and a textbox reappears, in which you can edit the text. I'm using Razor so I currently don't have any JS or Jquery in my project.

Here is what I have so far in my view:

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

I have an empty ActionResult in my controller.

What should I do? Can I even put anything in my controller, or should I do javascript in there anyway?

EDIT: So yea, I've come to the conclusion I'll add a bit of JS in the cshtml. Don't know how pretty it will be but I guess it'll be easier. It still doesn't quite work though:

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

This gives only the user description. There is no button, and when I click the text it disappears, leaving nothing. How do I fix this?

Numli
2#
Numli Reply to 2017-11-09 15:39:34Z

It's probably best to consider where you would like this action to happen. You basically have 2 options: Server or Client.

As this is very view based it would probably be best to do this client side. This means that your code needs to live in the .cshtml file. With this in mind it would be easiest to implement this using JavaScript. The JavaScript provided by Ismail is a perfect example of this utilising the JQuery library. The only difference I would make is to have all your html outside of the JavaScript and the job of the JavaScript would only be to set properties on the already existing HTML elements like so:

Change the HTML to something like this:

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

And then have your javascript like so:

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

Apologies if this isn't 100% syntactically correct, I'm not able to test it as I'm at work but hopefully it will set you on the right path!

Ismail Asghar
3#
Ismail Asghar Reply to 2017-11-09 15:23:14Z

You can use JavaScript or JQuery to play with DOM. Or you can use your Controller to show a new page with edit View(); I will prefer to use JQuery here, because no need to make server busy for this kind of simple works. Use this code after including JQuery in your project.

 $("#userdescr").click(function(){ 
       $("#userdescr").hide();
       $("[name= hidetext]").val( $("#userdescr").html());
       $("[name= hidetext]").show();
    });
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.342599 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO