مثالی از ارسال اطلاعات به اكشن متد در دات نت كور توسط Vue و Axios:
در این مثال می خواهیم نام و نام خانوادگی را از كاربر دریافت كرده و به اكشن متد خاصی ارسال كنیم.
ابتدا كتابخانه های Vue و Axios را به صفحه اضافه میكنیم، همینطور فایل جی اس خودمان:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="/app/app.js"></script>
فرم مورد نظر هم به صورت زیر خواهد بود:
<div id="app">

<input name="firstName" v-model="firstName" placeholder="First Name"/>
<br/>
<input name="lastName" v-model="lastName" placeholder="Last Name"/>
<br/>
<button v-on:click="sendToServer">Submit</button>

</div>
فایل app.js كه كدهای مورد نیاز است را به صورت زیر می نویسیم:
new Vue({

el: "#app",
data: {
firstName: "",
lastName: ""
},
methods: {
sendToServer: function () {

axios({
method: 'post',
url: '/home/index',
data: {
"firstName": this.firstName,
"lastName": this.lastName
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

}
}

});

دقت كنید، یك متد داریم با نام sendToServer كه وظیفه ارسال اطلاعات به سرور و دریافت پاسخ را به عهده دارد.
حالا یك ویو مدل نیاز داریم كه به صورت زیر تعریف میكنیم:

namespace VueJsToNetCore.ViewModel
{
public class User
{
public string LastName { get; set; }
public string FirstName { get; set; }
}
}
و در آخر اكشن متد مورد نظر كه وظیفه دریافت اطلاعات ارسالی و اعمال عملیات خاص روی آن را دارد به صورت زیر می باشد:


[HttpPost]
public IActionResult Index([FromBody]User user)
{
return View();
}
این اكشن در مثال ما در كنترلری با نام Home قرار دارد.

#Vue_Js #ASP_Net_Core #axios

@WebDevelopmentReferences