Call controller method by jquery and return value-CodePudding

I want to update the counter of visited all video elements in my website without whole page refreshment. In fact only the counter number of the played video should be updated in the page. I have written the addcounter method in the controller. The next step is to write a jquery function to call the addcounter method in the controller and pass video’s id to it and then get the updated counter number in put it to the span tage in view page. I don’t know jquery. Can anyone help me?

This is my controller code

        public JsonResult OnGetAddVisitCount(long id)
        {
            var newnumber = _multimediaApplication.AddVisitCount(id);
          
            return new JsonResult(newnumber);
           
        }

function AddCount(id, elementid) {
    $.ajax({
        url: '?handler=AddVisitCount'   '&id='   id,
        type: "get",
        //data: formData,
        //newdata: document.getElementById(elementid),
        success: function (data) {
            //$('#'   dist).location.reload();
            //get("ReloadCounter", function (data) {
            //    $("ReloadCounter").html(data);
            //});
            //$('#'   elementid).load(location.href   "#"   elementid);
            //let url = "#counter["   this.attr(id)   "]";
            //$(url ).html("");
            //$(url).reload(location.href   url);
            //$("select #counter["   id   "]").html("");
            $("#counter['"   id   "']").append('<span style="color:white" id="counter['   id   ']"><span  aria-hidden="true"></span>'   data   '</span>');
        },
        failure: function (response) {
            alert(response.responseText);
        },
        error: function (response) {
            alert(response.responseText);
        }
    });
    }

This is the jquery function tha I have written but it is not working correctly. The main problem is that the video element id that is formulating counter record id( for example counter128) should be returned in a span tage to the html page. The view page

 <span style="color:white" id="counter[@item.Id]"><span  aria-hidden="true"></span> @item.VisitCount</span>

CodePudding user response：

There are many ways to update your span content. It depends on your HTML structure.

but if I were in your shoes, instead of using different Ids I would use a class and data- attribute to find video elements.

 <span style="color:white"  data-videoid="@item.Id"><span  aria-hidden="true"></span> @item.VisitCount</span>

so my code will be :

$.get("?handler=AddVisitCount&id="   id,function(result){
  $('.counter[data-videoid="'   id  '"]').html(result);
});