C# asp.net从静态方法添加html元素

C# asp.net从静态方法添加html元素,c#,jquery,asp.net,ajax,C#,Jquery,Asp.net,Ajax,我试图添加HTML或图像按钮,可以调用代码隐藏方法,从静态方法(Web方法)开始,我通过AJAX调用Web方法。我的代码是: AJAX Method function dispData() { var text_data = document.getElementById("TextBox1").value; var text_count = text_data.length; if (text_count >= 4)

我试图添加HTML或图像按钮,可以调用代码隐藏方法,从静态方法(Web方法)开始,我通过AJAX调用Web方法。我的代码是:

AJAX Method
function dispData()
    {

        var text_data = document.getElementById("TextBox1").value;
        var text_count = text_data.length;

        if (text_count >= 4)
        {
            alert("Text box val = " + text_data + " :Count = " + text_count);

            $.ajax({
                type: "POST",
                url: "WebForm2.aspx/ajaxData",
                data: JSON.stringify({ data: text_data }),
                contentType: 'application/json; charset=utf-8',
                dataType: "JSON",
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
                },
                success: function (result) {
                    //alert("We returned: " + result.d);
                    $('#disp_ajax_data').html(result.d);<-- displaying result in div
                }
            })
            return false;//end of ajax

        }//end of if text_count.

    }//end of dispData.

[WebMethod(TransactionOption = TransactionOption.Supported)]
    public static string ajaxData(string data)
    {
       for (int loopCount = 0; loopCount < myCount; loopCount++)
            {
                string ele = oCompInfoSet[loopCount].Name + "<a href='codeBehindMethod()'>Add</a>" + "<br>";
                returnVal += ele;

            }//end for loop.
    }
AJAX方法
函数dispData()
{
var text_data=document.getElementById(“TextBox1”).value;
var text\u count=text\u data.length;
如果(文本计数>=4)
{
警报(“文本框val=“+Text\u data+”:Count=“+Text\u Count”);
$.ajax({
类型:“POST”,
url:“WebForm2.aspx/ajaxData”,
data:JSON.stringify({data:text_data}),
contentType:'application/json;charset=utf-8',
数据类型:“JSON”,
错误:函数(XMLHttpRequest、textStatus、errorshown){
警报(“请求:+XMLHttpRequest.toString()+”\n\n状态:+textStatus+”\n\n错误:+ErrorSwink);
},
成功:功能(结果){
//警报(“我们返回:+result.d”);
$('#disp_ajax_data').html(result.d);尝试查看以下内容:

上面的文章使用了一个称为页面方法的概念。您必须在ScriptManager上启用它。下面是一个简单的示例,它与您正在做的事情基本一致:

Aspx页面:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApp.PageMethods.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Page Methods</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server"></asp:ScriptManager>
    <div> 
        <input type="button" onclick="GenerateLinks(5)" value="Add Links" />
        <div id="links"></div>
        <ul id="result">

        </ul>
    </div>
    </form>
    <script>
        /*
        *
        *   to generate guid
        *
        */
        function s4() {
            return Math.floor((1 + Math.random()) * 0x10000)
                       .toString(16)
                       .substring(1);
        };

        function guid() {
            return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
                   s4() + '-' + s4() + s4() + s4();
        }

        function GetTime() {
            var g = guid();
            log('sent request for ' + g);
            PageMethods.GetTime(g, GetTimeSuccess);
        }

        function GetTimeSuccess(result) {
            log('result:' + result);
        }

        function GenerateLinks(n) {
            log('Generating links');
            PageMethods.GenerateLinks(n, function (result) {

                document.getElementById('links').innerHTML = result;
                log('added links');
            });
        }

        function log(msg) {
            var dt = new Date();
            var format = function(number){
                return number < 10 ? '0' + number : number
            };
            var h = format(dt.getHours());
            var m = format(dt.getMinutes());
            var s = format(dt.getMinutes());

            var ul = document.getElementById('result');
            var li = document.createElement('li');
            li.innerHTML = h + ':' + m + ':' + s + ' - ' + msg;
            ul.appendChild(li);
        }


    </script>
</body>
</html>

页面方法
");
}
返回字符串。Join(“
”,a); } [网络方法] 公共静态字符串GetTime(字符串guid) { 返回guid+“/”+DateTime.Now.ToLongTimeString(); } } }
您确定要这样做(
)对吗?@deocwalk:Anchor正在出现,但它没有调用该方法。客户端js无法按原样调用服务器端方法?您可能会在web页面上遇到一些错误,因为您的js引擎无法识别
codeBehindMethod
!我只想在每个名称前面添加一个按钮,单击这些按钮后,它应该调用代码隐藏方法。我该怎么做,请帮忙
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApp.PageMethods.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Page Methods</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server"></asp:ScriptManager>
    <div> 
        <input type="button" onclick="GenerateLinks(5)" value="Add Links" />
        <div id="links"></div>
        <ul id="result">

        </ul>
    </div>
    </form>
    <script>
        /*
        *
        *   to generate guid
        *
        */
        function s4() {
            return Math.floor((1 + Math.random()) * 0x10000)
                       .toString(16)
                       .substring(1);
        };

        function guid() {
            return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
                   s4() + '-' + s4() + s4() + s4();
        }

        function GetTime() {
            var g = guid();
            log('sent request for ' + g);
            PageMethods.GetTime(g, GetTimeSuccess);
        }

        function GetTimeSuccess(result) {
            log('result:' + result);
        }

        function GenerateLinks(n) {
            log('Generating links');
            PageMethods.GenerateLinks(n, function (result) {

                document.getElementById('links').innerHTML = result;
                log('added links');
            });
        }

        function log(msg) {
            var dt = new Date();
            var format = function(number){
                return number < 10 ? '0' + number : number
            };
            var h = format(dt.getHours());
            var m = format(dt.getMinutes());
            var s = format(dt.getMinutes());

            var ul = document.getElementById('result');
            var li = document.createElement('li');
            li.innerHTML = h + ':' + m + ':' + s + ' - ' + msg;
            ul.appendChild(li);
        }


    </script>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Web.Services;

namespace WebApp.PageMethods
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        [WebMethod]
        public static string GenerateLinks(int number)
        {
            List<string> a = new List<string>();
            for (int i = 0; i < number; i++)
            {
                a.Add("<a href=\"javascript:GetTime()\">Get Time " + (i + 1) + "</a>");
            }

            return string.Join("<br/>", a);
        }

        [WebMethod]
        public static string GetTime(string guid)
        {
            return guid + " / " + DateTime.Now.ToLongTimeString();
        }
    }
}