JavaScript函数成功，但未调用后面的代码

Question

I have a problem with Code-Behind and JavaScript working together in my ASP site.

I got an overview of activities in my company and when you click a "Detail" button it's supposed to go to a database and collect all the available data about that specific activity and then show it in a Bootstrap Modal window.

The only problem is that currently the only thing that happens is that the modal window is shown but nothing else. The Code-Behind is not even called.

Here is my JavaScript:

function GetFullActivityDescription(id) {
    var onSuccess = function () {
        $('#full-activity-description-modal').modal('show');
    }
    var onFailed = function () { }
    var UserContext = this;
    PageMethods.GetFullActivityDescription(id, onSuccess, onFailed, UserContext);
}

And here is the C#:

[WebMethod]
public static void GetFullActivityDescription(Int32 id)
{
    mHeader.InnerHtml = "<h1>Test</h1>";
    mBody.InnerHtml = id + "";
}

I had to go into the Partial Class where global elements are run and change it's default declaration to a static one so that I could manipulate the elements from C#:

/// <summary>
/// modal_header control.
/// </summary>
/// <remarks>
/// Auto-generated field.
/// To modify move field declaration from designer file to code-behind file.
/// </remarks>
public static System.Web.UI.HtmlControls.HtmlGenericControl modal_header;

/// <summary>
/// modal_body control.
/// </summary>
/// <remarks>
/// Auto-generated field.
/// To modify move field declaration from designer file to code-behind file.
/// </remarks>
public static System.Web.UI.HtmlControls.HtmlGenericControl modal_body;

Here is the HTML:

<div id="full-activity-description-modal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header" runat="server" id="modal_header"></div>
            <div class="modal-body" runat="server" id="modal_body"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

I need to do it kind of convoluted because I need ASP to NOT submit the form it's in. Otherwise it's kind of pointless as the Modal Window will be reset then.

Now the last piece of the "puzzle" is the way the Description buttons are generated:

html.Append("<td>");
html.Append("<a onclick=\"GetFullActivityDescription(" + id + ");\" class=\"btn\" style=\"background-color: #F3F3F3; color: #000000; font-size: 18px;\">");
html.Append("<span class=\"ion ion-clipboard\"></span>");
html.Append("</a>");
html.Append("</td>");
html.Append("</tr>");

This is added to every entry in the activity table so that the right id is passed to the JavaScript function. You end up with this:

So just to state the question: How come my JavaScript function is called but my C# code-behind is not?

EDIT 1

Here is the ScriptManager added via the Site.Master which this page inherits from.

<asp:ScriptManager runat="server" EnablePageMethods="true" EnablePartialRendering="true">
    <Scripts>
        <%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
        <%--Framework Scripts--%>
        <asp:ScriptReference Name="MsAjaxBundle" />
        <asp:ScriptReference Name="bootstrap" />
        <asp:ScriptReference Name="respond" />
        <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
        <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
        <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
        <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
        <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
        <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
        <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
        <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
        <asp:ScriptReference Name="WebFormsBundle" />
        <%--Site Scripts--%>
    </Scripts>
</asp:ScriptManager>

Answer 1

In your C# code, try ScriptManager.RegisterStartupScript(yourcontrol,this.getType(),"theNameOfYourJSFunction", "theNameOfYourJSFunction( + valueToPass + )", True) . You also need to put your C# code into some kind of event that is bound to a control, so that the C# code is called. As it stands, there is nothing on the server side that is calling the C# code you've written. For example, call GetFullActivityDescription in the Page_Load function.

Answer 2

I think you only need to change your Javascript and Code-behind. From your code, I can see you're using JQuery, I have use JQuery too to handle the Modal.

JavaScript

function GetFullActivityDescription(id) {
    $.get("PageName.aspx/MethodName",{ id: id }, function(data) {

        $('#full-activity-description-modal').modal('show');

    });
}

C#

[WebMethod]
public static void GetFullActivityDescription(Int32 id)
{
    mHeader.InnerHtml = "<h1>Test</h1>";
    mBody.InnerHtml = id + "";
}