将值从React表单传递给Controller并显示结果

时间:2016-07-21 19:41:40

标签: c# reactjs

我有一个关于使用我在C#中设置的函数的反应的问题,该函数有一个控制器通过URL获取值。

这是控制器:

[HttpGet("{number}/{source}/{aux}/{destination}")]
    public string Get(int number, string source, string aux, string destination)
    {
        Hanoi h = new Hanoi();
        return h.MoveDisks(number, source, aux, destination);
    }

这是我到目前为止所尝试的:

<script type="text/babel">

   var Form = React.createClass({

    calculate: function () {
      var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
         if (xhttp.readyState == 4 && xhttp.status == 200) {
           document.getElementById("moves").innerHTML = xhttp.responseText;
    }
    };
     xhttp.open("GET", "api/values" + "/" + "number" + "/" + "src" + "/" + "aux" + "/" + "dest", true);
     xhttp.send();
    },

     render: function (){
        return (
    <div>
        Number of rings: <input type="number" id="number"/> <br /><br />
        Source: <input type="text" id="src"/><br /><br />
        Auxiliary: <input type="text" id="aux"/><br /><br />
        Destination: <input type="text" id="dest"/><br /><br />
        <button onClick={this.calculate}>Get Result!</button>
    </div>
        );

    }
    });

    ReactDOM.render(<Form />, document.getElementById('form'));

</script>
<div id="form"></div>
<div id="moves"></div>

我希望结果发布在“move”div中,但无法弄清楚如何。我是否试图以一种不应该工作的方式使用React?

我是初学者,所以感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

你需要纠正api路线

    [HttpGet]
    [Route("api/values/{number}/{source}/{aux}/{destination}")]
    public string Get(int number, string source, string aux, string destination)
    {
        Hanoi h = new Hanoi();
        return h.MoveDisks(number, source, aux, destination);
    }