Jquery event in ASP MVC 3 Web Application

Question

I am developing an ASP.Net MVC 3 application using C# and SQL Server 2005.

I would like to create a Jquery event on a button. It's like an accordian animation.

I have already in the template which I used an example and I want to remake it in an another button.

This is a video describing the event.

Sorry, I didn't post any code because I don't find really where is the script of this event.

But, I will edit my post for any demand.

Thanks for understanding :)

this is The view Gestion which I would like to show when I click on the button :

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcApplication2.Models.FlowViewModel>" %>


<asp:Content ID="loginTitle" ContentPlaceHolderID="TitleContent" runat="server">
    Gestion
</asp:Content>

<asp:Content ID="loginContent" ContentPlaceHolderID="MainContent" runat="server">
    <h2>Gérer</h2>
    </asp:Content>

This is a class GestionHelper which I created following the example of the other button :

namespace Helpers
{
    public static class GestionHelper
    {
        public static string GestionLinkHelper(this HtmlHelper helper){
            string currentControllerName = (string)helper.ViewContext.RouteData.Values["controller"];
            string currentActionName = (string)helper.ViewContext.RouteData.Values["action"];

            var sb = new StringBuilder();

            sb.Append("<div id=\"gestionlink\">");

            sb.Append(helper.ActionLink("aaaaa", "Gestion", "Anouar"));
            sb.Append("</div>");
            return sb.ToString();
        }
    }
}

I creat a new Controller named AnouarController :

namespace MvcApplication2.Controllers
{
     [HandleError]
    public class AnouarController : Controller
    {   
    //
    // GET: /Anouar/

     public ActionResult Gestion()
     {
         return View();
     }
   }
}

and finally,,,this is what I add in the View of the link (which allow the action):

<%= Html.GestionLinkHelper() %>

you have to post some code. as minimum, create a view and button. even better if you take a stab at finding where you place your script tags. the more you give the better help you will get — Dave Alperovich
– Dave Alperovich, Commented May 12, 2013 at 18:45
ok Just keep on with me, I will post some code that I try to do it — anouar
– anouar, Commented May 12, 2013 at 18:50
Ok, so your helper creates an actionlink. but i dont see a button in your View. — Dave Alperovich
– Dave Alperovich, Commented May 12, 2013 at 19:37
sorry for the late of an answer,,,Infact,,I want to do that with a button but I didn't how to make a listener so I used an action link — anouar
– anouar, Commented May 12, 2013 at 20:47

Dave Alperovich · Accepted Answer · 2013-05-12 21:28:42Z

2

If I understand you, add a button and your target div

<input type="button" value="Show Gestion" id="btnShowGestion" />
<input type="button" value="Hide Gestion" id="btnHideGestion" />
<div id="divGestion"></div>

Add your JQuery On Ready

<script type="text/javascript">

  $(document).ready(function() {

    $('#divGestion').load('/Anouar/Gestion');

    $('#btnShowGestion').click(function() {   $('#divGestion').show()  });
    $('#btnHideGestion').click(function() {   $('#divGestion').hide()  });

  });

</script>

Not knowing what Ajax action you wanted to perform, I assumed you wanted to load a partial view into a div.

edited May 12, 2013 at 21:28

answered May 12, 2013 at 20:57

Dave Alperovich

32.6k8 gold badges82 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

anouar Over a year ago

Nice,,thank you it's working,,,,,but the animation is not like in the video (a fieldest that extend or enlarge,,,,it's just an appear :( and also when I click in the button again,,,it's stay. PS : your code contain 2 errors : script must be in lowercases and input needs a '/' to close

Dave Alperovich Over a year ago

@anouar, yes I was sloppy with the markup. I just wanted to demonstrate the point. I can understand how you're not getting the right affect -- I still don't know what affect you need. I gave you a create affect, not an animate affect. I you explain better how your animate should be caused, I can help further...

Dave Alperovich Over a year ago

@anouar I saw the affect, but no code. Are you saying you want that kind of affect? The div being expanded animation and removed?

Dave Alperovich Over a year ago

@anouar, see my latest example. This way the div will appear and disappear for you without the animation.

anouar Over a year ago

Good ! it's working perfectly ,,,it's impossible to make it with the animation ?

|

Collectives™ on Stack Overflow

Jquery event in ASP MVC 3 Web Application

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related