Hi Jonathan,

I dont use any javascript, I think in that case i wouldn't be able to call the controller with normal button too.

I want to keep default behaviour of accordion (to show more details bellow) but also i want to save the count of clicks on that particual accordion with static method.

Do you have any other idea how to achieve this?

Silvija

Hi Silvija,

Where does the behaviour of the accordion come from? Is it only with CSS?

To achieve what you are trying to do you'll have to use ajax to call your controller action on click event. Otherwise your page will refresh everytime you click.

~Jonathan

I am using bootstrap 4 accordion. If i remove data-toggle="collapse" than Controller get hit and he redirect me to http://localhost:60493/umbraco/Surface/ClickCounter/Count?DocId=2076 which i dont want. I dont want anything to be returned, I just want to do some logic in that controller, stay on the same page and do normal accordion behaviour.

This is my controller:

 public void Count(int DocId)
        {
            using (var scope = Current.ScopeProvider.CreateScope(autoComplete: true))
            {
                var sql = "SELECT * FROM table WHERE DocId = @0";
                var record= scope.Database.Fetch<tableSchemas>(sql, DocId, DocType).FirstOrDefault();
                if (record != null)
                {
                    var count = record.Count + 1;
                    scope.Database.Update(new tableSchemas
                    {
                        Id = record.Id,
                        Count = count
                    }, new string[] { "Count" });
                }
                scope.Complete();
            }
        }

Also when i remove data-toggle="collapse" accordion is not working, but i can make some workaround with that.

I was thinking that Ajax could be my way to go but i never used it before.

BR

Silvija

Hi Silvija,

ajax should solve your problem.

Here is an example of how to achieve this:

$(document).ready(function ()
{
   $("a.triggerCount").on("click", function(event)
   {
      $.ajax(
      {
         url: "SomeUrl - You could get it from element by getting attr-value",
         data: { data you want to send },
         method: "POST"/"GET",
         success: function (data)
         {
            // successfully called the action
         },
         error: function (jqXHR, exception)
         {
            // error occured when calling the action
         }
      });
      // prevent a-tag to call the url which would cause page-refresh (consider to make the element a button (semantic))
      event.preventDefault();
   });
});

There are some more options you could use if needed. For more information, take a look at the docs: https://api.jquery.com/jquery.ajax/. https://api.jquery.com/event.preventDefault/

Hope this helps,

~ Jonathan