Jquery Ajax 单击 <a> href 元素时调用

Question

这是我的 aspx 页面。当我点击 href 元素时，我需要使用 jquery ajax.

在代码隐藏中调用一个函数

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="kodeeswaranKBC.index" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>KFC</title>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body style="background-color: black">
<form id="form1" runat="server">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-4"></div>
            <div class="col-sm-4" style="text-align: center">
                <img src="img/logo.jpg" style="height: 185px; width: 185px" />
            </div>
            <div class="col-sm-4"></div>
        </div>
        <div class="row">
            <div class="col-lg-12" style="height: 30px"></div>
        </div>
        <div class="row">
            <div class="col-sm-12" style="height: 100px">

                <div style="background-image: url(img/question.png); height: 100%; background-repeat: no-repeat; background-size: contain;background-position: center;">
                    <asp:Label ID="question" runat="server" Text="Question" Font-Bold="true" Style="color:white;position: absolute; left: 200px; top: 27px"  ></asp:Label>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12" style="height: 30px"></div>
        </div>
        <div class="row">
            <div class="col-lg-6" style="height: 80px">
                <a href="#" id="op1">
                    <div style="background-image: url(img/answer_left.png); height: 100%; background-repeat: no-repeat; background-size: contain; background-position: center;">
                        <asp:Label ID="option1" runat="server" Text="Option1" Font-Bold="true" Style="position: absolute; left: 200px; top: 27px"></asp:Label>
                    </div>
                </a>

            </div>
            <div class="col-lg-6" style="height: 80px">
                <a href="#" id="op2">
                    <div style="background-image: url(img/answer_right.png); height: 100%; background-repeat: no-repeat; background-size: contain; background-position: center;">
                        <asp:Label ID="option2" runat="server" Text="Option2" Font-Bold="true" Style="position: absolute; left: 85px; top: 27px"></asp:Label>
                    </div>
                </a>
            </div>
            <div class="row">
                <div class="col-lg-12" style="height: 30px"></div>
            </div>

        </div>

        <div class="row">
            <div class="col-lg-6" style="height: 80px">
                <a href="#" id="op3">
                    <div style="background-image: url(img/answer_left.png); height: 100%; background-repeat: no-repeat; background-size: contain; background-position: center;">
                        <asp:Label ID="option3" runat="server" Text="Option3" Font-Bold="true" Style="position: absolute; left: 200px; top: 27px"></asp:Label>
                    </div>
                </a>

            </div>
            <div class="col-lg-6" style="height: 80px">
                <a href="#" id="op4">

                    <div style="background-image: url(img/answer_right.png); height: 100%; background-repeat: no-repeat; background-size: contain; background-position: center;">
                        <asp:Label ID="option4" runat="server" Text="Option4" Font-Bold="true" Style="position: absolute; left: 85px; top: 27px"></asp:Label>
                    </div>
                </a>
            </div>

        </div>
    </div>

</form>
</body>
</html>
<script>
$(document).ready(function () {
    alert("hai");
    $("#op1").click(function (e) {
        e.preventDefault();
        $.ajax({
            type: "GET",
            url: "index.aspx/mymethod",
    //contentType: "application/json; charset=utf-8",
    //dataType: "json",
    //success: OnSuccess,
    //failure: function (response) {
    //    alert(response.d);
    //}
         });
    });

    //$("#op1").click(function () {
    //    alert("ssssss");
    //});
});
</script>

并在 .aspx.cs 文件中

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;

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


        StartGame();

    }

    protected void StartGame()
    {
        question.Text = "Here comes your Question";
        option1.Text = "This is Option1";
        option2.Text = "This is option2";
        option3.Text = "This is option3";
        option4.Text = "This is option4";
    }

    [WebMethod]
    public static void mymethod()
    {

    }

}
}

如何调用mymethod？我是 ajax.Please 的新手，请检查我的代码并给我一个 reply.Also 如果我的问题不清楚，请告诉我

Answer 1

为了在代码隐藏的 aspx Web 表单中调用方法，您需要牢记一些事项。

The method needs to be static.

The method needs to be public.

The method needs to have marked with attribute [webmethod].

所以在你的情况下，方法看起来像：

[Webmethod]
public static void mymethod()
{

}

实施的其余部分在 jquery 中看起来不错，只需输入 e.preventDefault() 即可禁用锚标记的默认行为。

编辑：

$("#op1").click(function (e) {
    e.preventDefault();
    $.ajax({
        type: "GET",
        url: "index.aspx/mymethod",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
       success: function (response) {
          alert(response.d);
       },
       error: function (error) {
          alert();
      }
     });
});

Jquery Ajax 单击 <a> href 元素时调用

Jquery Ajax Call on click of <a> href element

asp.net

ajax

asp.net-ajax