javascript - 按下按钮时从javascript方法调用C＃asp.net函数(Calling C# asp.net function from javascript method when button pressed)

Question

I have this C# function in the project RealEstateAnalytics.Clients.API

(我在项目RealEstateAnalytics.Clients.API中有此C＃函数)

using javax.jws;
using Microsoft.AspNetCore.Mvc;
using RealEstateAnalytics.Managers;

namespace RealEstateAnalytics.Clients.API
{
    [Route("api/[controller]")]
    public class UploadController : Controller
    {
        [WebMethod]
        public string ReturnString()
        {
            var newString = LoginAuthenticationManager.ReturnString();
            Console.WriteLine(newString);
            return newString;
        }
}
}

I want to call the function RetrunString from my javascript code in the project RealEstateAnalytics.Clients.Home when a button is clicked.

(我想在单击按钮时从项目RealEstateAnalytics.Clients.Home中的javascript代码调用函数RetrunString。)

The thing is, I am really unfamiliar with axios/ajax calls and I haven't found a good tutorial on the internet specific enough to my scenario for me to follow.

(问题是，我真的不熟悉axios / ajax调用，而且我在互联网上找不到适合我的情况的足以指导我的很好的教程。)

Could someone help walk me through what an ajax call would look like for me to call the C# function from my javascript?

(有人可以帮助我逐步了解如何通过javascript从我的javascript调用C＃函数吗？)

Here is the javascript for reference:

(这是供参考的javascript：)

import React, { useState } from "react";
import {
  Button,
  Modal,
  ModalHeader,
  ModalBody,
  ModalFooter,
  Input
} from "reactstrap";
import "./Modals.css";

const Upload = props => {
  const { buttonLabel } = props;

  const [modal, setModal] = useState(false);

  const toggle = () => setModal(!modal);

  return (
    <>
      <Button color="danger" className="mt-5" light size="lg" onClick={toggle}>
        {buttonLabel}
      </Button>
      <Modal isOpen={modal} toggle={toggle}>
        <ModalHeader toggle={toggle} color="primary">
          Upload a File
        </ModalHeader>
        <img
          src="../.././upload.png"
          alt="Icon to signify uploading"
          width="100px"
          style={{ margin: "0 auto" }}
          className="mt-4"
        />
        <ModalBody className="text-center mb-3">
          Select file to upload...
          <Input type="file" name="file" id="exampleFile" />
        </ModalBody>
        <ModalFooter className="d-flex justify-content-center">
          <Button color="secondary" onClick={toggle}>
            Cancel
          </Button>{" "}
          <Button color="primary" onClick={toggle}>
            Upload
          </Button>{" "}
        </ModalFooter>
      </Modal>
    </>
  );
};

export default Upload;

  ask by Adrian translate from so

Answer 1

等待大神答复