Komuniti Visual Studio 2015: Menambah fungsi e -dagang

Artikel ini menunjukkan membina halaman checkout e-dagang yang mudah menggunakan Visual Studio Community 2015, Bootstrap, dan AngularJS. Proses ini mengintegrasikan API Web ASP.NET untuk pemprosesan pembayaran, mempamerkan komponen e-dagang teras.

Ciri -ciri Utama:

• Integrasi Lancar: Visual Studio 2015 memudahkan integrasi mudah fungsi e-dagang.
• antara muka mesra pengguna: bootstrap dan angularjs membuat pengalaman checkout yang lancar dan responsif.
• Pemprosesan Pembayaran Mock: API Web ASP.NET yang disimulasikan mengendalikan data pembayaran JSON, memberikan maklum balas mengenai kejayaan atau kegagalan urus niaga.
• Kemas kini masa nyata: AngularJS membolehkan pengiraan harga dinamik dan memaparkan mesej berdasarkan hasil urus niaga.
• aliran kerja yang dipermudahkan: keseluruhan proses checkout diselaraskan dalam satu bentuk.

Tutorial ini dibina pada artikel sebelumnya dalam siri ini (pautan yang disediakan di bawah) dan memberi tumpuan kepada menambahkan keupayaan e-dagang. Pemeriksaan satu halaman mengendalikan keranjang belanja, maklumat pembayaran, dan memaparkan mesej kejayaan/kegagalan. Butiran pembayaran dikemukakan kepada API Web ASP.NET yang bertindak sebagai pemproses kad kredit, menerima data JSON melalui permintaan pos dan mengembalikan kod status HTTP. Angularjs mengendalikan kemas kini masa nyata, mengira jumlah dan memaparkan mesej.

Reka bentuk halaman checkout memanfaatkan bootstrap untuk gaya. AngularJS menguruskan paparan dinamik jumlah produk. Proses lengkap, dari pemilihan produk hingga pembayaran, terkandung dalam satu bentuk.

(imej: tangkapan skrin halaman checkout yang telah siap) []

Butiran pelaksanaan:

Proses ini melibatkan membuat paparan MVC baru (checkout.cshtml) dan beberapa kelas model (produk.cs, form.cs, checkout.cs). Gaya bootstrap digunakan, dan AngularJS digunakan untuk fungsi dinamik. Pengawal AngularJS (Controller.js) memulakan pembolehubah untuk kuantiti produk. Kod sisi pelayan (homeController.cs) mengendalikan penyerahan borang, memproses data, dan berinteraksi dengan API Web Mock. API Web (ValueController.cs) mensimulasikan pemprosesan pembayaran dan mengembalikan kod status HTTP yang menunjukkan kejayaan atau kegagalan.

(imej: Menambah halaman paparan MVC baru)

[] 3

kelas myForm dalam homecontroller mengikat untuk membentuk medan, memudahkan akses data. Kelas ProductManager mengira jumlah harga. Kelas Checkout menguruskan mesej kejayaan/kegagalan dan kod muat turun. API Web menggunakan JsonConvert (pakej newtonsoft.json nuget) untuk siri siri/deserialization JSON.

(Imej: Menambah pakej Newtonsoft.Json Nuget) []

Artikel ini disimpulkan dengan ringkasan dan pratonton artikel seterusnya, yang akan memberi tumpuan kepada membuat aplikasi pemberitahuan mudah alih menggunakan Cordova.

(pautan ke artikel sebelumnya dalam siri ini):

Komuniti Visual Studio 2015: Menyediakan tapak
Komuniti Visual Studio 2015: Menambah Halaman E -mel dan Hubungi

(artikel ini ditaja oleh Microsoft.)

Atas ialah kandungan terperinci Komuniti Visual Studio 2015: Menambah fungsi e -dagang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!