TrilonIO / aspnetcore-Vue-starter

*NEW* Asp.net Core & Vue.js (ES6) SPA Starter kit - Vuex, webpack, Web API, Docker, and more! By @TrilonIO
https://www.trilon.io
MIT License
1.22k stars 266 forks source link

Post not working? #105

Open mtxxx opened 5 years ago

mtxxx commented 5 years ago

I have just a very simple form: ` <form id="paymentform" @submit.prevent="processForm3">

  <div class="field">
    <label class="label">Summ</label>
    <input type="number" class="input" name="ammount" v-model="ammount" v-validate="'required|decimal:2'">
    <i v-show="errors.has('ammount')" class="fa fa-warning"></i>
    <span v-show="errors.has('ammount')" class="help is-danger">{{ errors.first('ammount') }}</span>
  </div>

  <div class="field has-text-right">
    <button type="submit" class="button is-danger">Submit</button>
  </div>
</form>`

My send method looks like: processForm2() { var x = this.accnbr; var y = this.ammount; axios({ method: 'post', url: '/api/Payment/CreatePayment2', data: { accnbr: x, ammount: y } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); } OR processForm2() { this.$validator.validateAll().then((result) => { if (result) { this.$http.post('/api/Payment/CreatePayment2', { accnbr: this.accnbr, ammount: this.ammount }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); return; } });

And finally Controller [HttpPost("[action]")] public IActionResult CreatePayment2([FromForm] string accnbr, [FromForm] decimal ammount) { //create payment ... var request = this.Request; string refNumber = "2245689";

        return Ok(refNumber);
    }

Post hit the controller action, I can debug it. Problem is that params accnbr and ammount are empty.

I tried public IActionResult CreatePayment2([FromQuery(Name = "accnbr")] string accnbr, [FromQuery(Name = "ammount")] decimal ammount) and public IActionResult CreatePayment2([FromBody] string accnbr, [FromBody] decimal ammount) Non of this options works.

What am I doing wrong?

If I change javascript to let response = await this.$http.post(/api/Payment/CreatePayment2?accnbr=${this.accnbr}&ammount=${this.ammount}) parameters value are fine.

But why this.$http.post('/api/Payment/CreatePayment2', { accnbr: this.accnbr, ammount: this.ammount }) not pass parameters value?

Nordes commented 5 years ago

Hi, I haven't tried your code. But have you looked with Fiddler (or similar) in order to see what kind of request was being sent?

Note that using the syntax highlighting for code block makes it easier to read ;).

Also: https://www.red-gate.com/simple-talk/dotnet/asp-net/improved-model-binding-asp-net-core/

You are using [FromForm] and it might be one of the reason. Usually a post send using the body not the QueryString or FromBody.

Ref: https://github.com/axios/axios

  // `data` is the data to be sent as the request body
  // Only applicable for request methods 'PUT', 'POST', and 'PATCH'
  // When no `transformRequest` is set, must be of one of the following types:
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - Browser only: FormData, File, Blob
  // - Node only: Stream, Buffer

Also, don't forget about the context in javascript:

this.$validator.validateAll().then((result) => {
  if (result) {
    let that = this // <== see here we keep the context available
    this.$http.post('/api/Payment/CreatePayment2', {
      accnbr: that.accnbr, ammount: that.ammount // we can still use 'that' which point to this original context.
    }) // Usually with promises, you can pass the context with a "this" parameter at the end ( `}, this)` ) so that the this context is still available.
  }