آموزش ساخت فرم ساز در ASP.NET Core قسمت اول

آموزش ساخت فرم ساز در ASP.NET Core قسمت اول

همانطور که از عنوان مقاله پیداست در این مطلب میخواهیم یک فرم ساز طراحی کنیم.
در این بحث تمرکز اصلی ما روی کدنویسی و Backend کار بوده و با ظاهر برنامه کاری نداریم، برای کدهای جاوا اسکریپتی که استفاده می شود توضیح کوتاهی داده خواهد شد.
برای شروع کار ابتدا باید منطق برنامه و نیازها مشخص شوند و سپس شروع به کدنویسی کنیم.
همانطور که میدانید یک فرم از سه قسمت اصلی تشکیل شده است.
1. تگ فرم
2. ورودی ها
3. دکمه ثبت فرم
از این سه بخش، تگ فرم و دکمه ثبت فرم ثابت هستند و برای تمام فرم ها به یک شکل خواهند بود ولی بخش ورودی ها برای هر فرم متغییر است پس مسئله ما بخش ورودی ها می باشد.
از آنجایی که قرار است یک فرم ساز ساده درست کنیم درباره انواع ورودی ها زیاد بحث نمیکنیم و این در حالی است که شما می توانید با تغییرات کوچکی در پروژه تمام انواع ورودی ها را پوشش بدهید.
برای این قسمت از پروژه منطق ما به این صورت است که تمام مواردی که به صورت متن می توان پاس داد را با هم و موارد دیگر مثل فایل را به صورت یک فیلد جدا به سرور ارسال کنیم.
اگر دقت کنید بیشتر فرم های معمول هم همین دو بخش را مدیریت میکنند، انواعی مثل متن، تاریخ، مقدار صحیح/غلط، عدد، تک انتخابی، چند انتخابی تماما قابلیت تبدیل به رشته (string) را دارند و تنها بخشی 
که باید به صورت جدا کار شود بخش ارسال فایل می باشد.
خوب تا اینجای کار مسئله ها را لیست کردیم، اجازه بدهید درباره کلیت کاری که قرار است انجام شود هم کمی صحبت کنیم:
روال کار ما بعد از انجام پروژه به این صورت خواهد بود:
1. فرم میسازیم
2. به فرم ساخته شده فیلدهای مورد نیاز را اضافه می کنیم.
3. فرم را در صفحه ای نمایش می دهیم
4. اطلاعات فرم را به سرور ارسال میکنیم و سمت سرور اطلاعات را پردازش می کنیم

پس با توجه به روال کار تا اینجا ما به جداول زیر نیاز داریم:
1. فرم ها
2. فیلدهای فرم ها
3. مقادیر ثبت شده برای هر فرم

در ساده ترین حالت مدل های ما به صورت زیر خواهند بود:

جدول فرم ها:

using System.Collections.Generic;

namespace Project.Models
{
    public class Form
    {
        public int Id { get; set; }

        public string Title { get; set; }

        public string Name { get; set; }

        public List<FormField> Fields { get; set; }
    }
}

جدول فیلد های فرم ها (به همراه یک enum برای تعیین نوع هر فیلد):

using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace Project.Models
{
    public class FormField
    {
        public int Id { get; set; }
        public string Title { get; set; }

        public FieldTypes Type { get; set; }

        public int FormId { get; set; }
        [ForeignKey("FormId")]
        public Form Form { get; set; }

    }
    public enum FieldTypes
    {
        [Display(Name = "ورودی متن")]
        text,
        [Display(Name = "فایل آپلود")]
        file

    }
}

جدول اطلاعات ثبت شده هر فرم:

using System.ComponentModel.DataAnnotations.Schema;

namespace Project.Models
{
    public class FormData
    {
        public int Id { get; set; }
        public string FormValues { get; set; }
        public int FormId { get; set; }
        [ForeignKey("FormId")]
        public Form Form { get; set; }

    }
}

تا اینجا مدلهای مورد نیاز ساخته شد، دقت کنید که این مدلها تنها نیازهای ابتدایی و اصلی ما را برآورده می کنند که شما می توانید با کمی خلاقیت بر اساس نیاز فیلدهای دیگری هم به این مدل ها اضافه کنید.
در ادامه اولین بحثی که می خواهیم به آن بپردازیم بحث مدیریت فرم ساز است که به دلیل مشخص بودن مدل ها کار سختی نیست و به همین دلیل مانور زیادی روی این قسمت نخواهیم داد تا به بخش های مشکل تر برسیم.
برای مدیریت نیاز به صفحات زیر داریم که می توانید به راحتی آنها را آماده کنید:
صفحه لیست فرم ها، افزودن فرم جدید، لیست فیلدهای هر فرم، افزودن فیلد جدید به فرم یک صفحه برای نمایش اطلاعات هر فرم.
مورد مهم در این قسمت صفحه نمایش اطلاعات ثبت شده هر فرم است که بررسی خواهیم کرد:
مسئله: صفحه ای نیاز داریم که اطلاعات ثبت شده هر فرم را به صورت جدول برای ما نمایش بدهد در حالی که نمیدانیم این فرم چه فیلد هایی دارد و در نتیجه نمتوانیم تعداد ستون های جدول نمایش را مشخص کنیم!
راه حل:
همانطور که بالاتر در مدل FormData دیدیم تمام اطلاعات یک فرم را به صورت رشته در فیلد FormValues ذخیره خواهیم کرد، رشته ای که در این فیلد قرار میگیرد در اصل یه JSON می باشد که به رشته تبدیل کرده ام برای ذخیره سازی راحت تر.
مشکل کمی راحت تر شد، با داشتن یک JSON می توانیم این رشته را پارس کنیم و با استفاده از جاوا اسکریپت در زمان لود جدول مورد نیاز را بسازیم و به صفحه اضافه کنیم.
در قسمت کد نویسی سی شارپ این صفحه فرم مربوطه را واکشی می کنیم، مقدار فیلد FormValues را به صورت یک رشته به ویو پاس می دهیم.
یک ویو با کدهای زیر می سازیم:

@model List<FormData>
@using Newtonsoft.Json;

@{
    var jsonData = JsonConvert.SerializeObject(Model);
}

<div id="myData"></div>

در این ویو یک لیست از اطلاعات فرم را دریافت میکنیم و توسط JsonConvert به جی سان تبدیل میکنیم همینطور در ویو کدهای جاوا اسکریپت زیر را داریم که وظیفه دریافت اطلاعات و ساخت جدول را به عهده دارد:

<script>
        $(document).ready(function(){

            var data = @Html.Raw(jsonData);
            var firstRowJson = JSON.parse(data[0].FormValues);

            //--main div
            var mainDiv = document.getElementById('myData');
            //--main div

            //--Table
            var table = document.createElement("TABLE");
            table.setAttribute("id", "dataTable");
            table.setAttribute("class","table table-bordered table-hover")
            //--Table

            //--thead
            var head = document.createElement('thead');
            var trHead = document.createElement('tr');
            for(var e in firstRowJson)
            {
                var td = document.createElement('td');
                td.innerText = e;
                trHead.appendChild(td);
            }
            //--thead
            //--append head to table
            head.appendChild(trHead);
            table.appendChild(head);
            //--append head to table

            //--tbody
            var tbody = document.createElement('tbody');
            //--tbody

            //--create rows
            $.each(data, function(i, item) {
                
                var bodyTr = document.createElement('tr');

                var row = JSON.parse(data[i].FormValues);
                var arr = new Array();
                for(var e in row)
                {
                    var bodyTd = document.createElement('td');
                    bodyTd.innerHTML = row[e];
                    bodyTr.appendChild(bodyTd);
                }
                tbody.appendChild(bodyTr);
            });
            //--create rows

            //--append body
            table.appendChild(tbody);
            //--append body

            mainDiv.appendChild(table);

        });
        
    </script>

در این کدها تنها نمیش اطلاعات را قرار داده ایم و با کمی تغییر می توانید دکمه ای برای حذف هم به این کدها اضافه کنید تا بتوانید اطلاعات ثبت شده را حذف کنید و یا اگر دقت کنید این صفحه برای فرم هایی که تعداد فیلدهای زیادتری داشته باشند کارآمد نخواهد بود
و عرض جدول بزرگ تاز حد معمول خواهد شد، میتوانید دو یا سه فیلد اول را نمایش داده و باقی اطلاعات هر ردیف را در صفحه ای جداگانه نمایش دهید.

تا اینجا قسمت مدیریت فرم ساز ما آماده شد (البته قسمت های ساده و معمول مثل افزودن فرم و فیلد و همینطور حذف آنها انجام نشده و به عهده شماست) در قسمت بعدی مقاله به بخش مهمتر که نمایش فرم و ثبت آن توسط کاربر می باشد می پردازیم.
موفق و پیروز باشید.

نظرات (0)

نظرسنجی
میزان رضایت شما از امکانات و مقالات سایت