آموزش ساخت یك سایت كوچك TODO با استفاده از Vue.js و ASP.NET Core:
در این آموزش با استفاده از تكنولوژی های ذكر شده یك وب سایت ساده برای ثبت، نمایش، حذف و ویرایش آیتم های TODO ساخته خواهد شد.
لینك مقاله :
https://scotch.io/tutorials/build-a-secure-to-do-app-with-vuejs-aspnet-core-and-okta

#Vue_Js #ASP_Net_Core #Okta

@WebDevelopmentReferences

شروع كار با VueJs:

https://www.sitepoint.com/getting-started-with-vue-js/

#Vue_Js #Getting_Started

@WebDevelopmentReferences

ارسال فرم به كنترلر اكشن در دات نت كور توسط Vue:
برای ارسال اطلاعات فرم به اكشن متد در دات نت كور توسط Vue باید از كتابخانه Axios استفاده كنیم.
اگر با جی كوئری كار كرده باشید احتمالا از ایجكس استفاده كرده اید.
یك نكته را به خاطر داشته باشید (در استفاده از axios) در پارامتر ورودی اكشن متد باید حتما از خاصیت FormBody استفاده كنید یعنی:
public IActionResult GetData([FormBody] User user)
{
return View();
}
اگر خاصیت فرم بادی قرار داره نشود اطلاعات دریافت نمی شوند!
در مطلب بعدی یك مثال ساده برای ارسال نام و نام خانوادگی به اكشن متد را توضیح خواهم داد.

#axios #DotNetCore #Vue_Js

@WebDevelopmentReferences

مثالی از ارسال اطلاعات به اكشن متد در دات نت كور توسط 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