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

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

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

برای این کار یک کنترلر و اکشن متد می سازیم و کدهای زیر را در اکشن متد ساخته شده قرار میدهیم:


        {
            var form = await _db.Forms.Include("Fields").FirstOrDefaultAsync(x => x.Id == id);
            return View(form);
        }

همانطور که میبینید فرم مورد نظر را واکشی و به همراه فیلدهای آن به ویو ارسال کردیم.

حالا ویو مربوط به این اکشن متد را ساخته و کدهای زیر را در آن قرار می دهیم:

@model Form

<input id="formId" name="formId" type="hidden" value="@Model.Id"/>
<form id="@Model.Name" name="@Model.Name" action="/ManageForms/Form" method="POST">
    @foreach(var item in Model.Fields)
    {
        
        <input type="@item.Type" name="@item.Title" id="@item.Title"/>
        <br/>
    }
    <input type="button" onclick="submitForm()" value="ثبت فرم"/>
</form>

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

@section Scripts
{
    <script>
        function submitForm()
        {
            
            var form = document.getElementById('@Model.Name') || document.querySelector('form[name="@Model.Name"]');
            var json = Array.from(new FormData(form)).map(function(e,i) {
                if(typeof(e[1]) != "object")
                {
                    this[e[0]]=e[1];
                    return this;
                }
            }.bind({}))[0];

            var fdata = new FormData();
            
            var frmId = $('#formId').val();
            fdata.append("FormId",frmId);

            var names = "";
            $('input[type="file"]').each(function(a, b) {
                var fileInput = $('input[type="file"]')[a];
                if (fileInput.files.length > 0) {
                    var file = fileInput.files[0];
                    names += fileInput.name + "|" + file.name + "=";
                    fdata.append("Files", file);
                }
            });
            fdata.append("FilesName",names);
            
            var str = JSON.stringify(json);

            fdata.append("FormValues",str);
            
            $.ajax({
            url: '/ManageForms/Form/' + frmId,
            type : 'POST',
            processData : false,
            contentType : false,
            
            data: fdata
            
            })
            .done(function(result) {
                console.log(result);
            })
        }
    </script>    
}

در کدهای بالا مشاهده می کنید که ابتدا فیلدهای فرم را به  JSON تبدیل کردیم، سپس یک FormData ساختیم تا اطلاعات فرم را ذخیره کنیم و به سرور ارسال کنیم، شماره یا آی دی فرم را به FormData اضافه کردیم.
در مرحله بعد فرم را بررسی کردیم تا اگر حاوی ورودی فایل بود بتوانیم تشخیص دهیم و فایل ها به همراه نام فایلها را بدست بیاوریم.
سپس فایلها و همینطور نام فایلها را نیز به FormData اضافه کردیم و در نهایت JSON ساخته شده در مرحله اول را نیز به FormData اضافه کردیم.
در ادامه از ajax استفاده کردیم و FormData ساخته شده را به سرور ارسال کردیم.
دقت داشته باشید که برای اینکه فایلها را بتوانیم به سرور ارسال کنیم دو مشخصه processData و contentType را باید برابر false قرار دهیم.

کار ما با ویو تمام شد، حالا به کنترلر برمیگردیم و اکشن متد دریافت اطلاعات را می سازیم:

        [HttpPost]
        public async Task<IActionResult> Form(FormDataViewModel dta)
        {
            var frmId = dta.FormId;
            var obj = JObject.Parse(dta.FormValues);
            var namesString = dta.FilesName.Remove(dta.FilesName.LastIndexOf('='));
            var namesList = namesString.Split('=');
            Dictionary<string,string> namesDic = new Dictionary<string, string>();
            foreach(var row in namesList)
            {
                var item = row.Split('|');
                namesDic.Add(item[0],item[1]);
            }
            if(dta.Files != null)
            {
                foreach(var file in dta.Files)
                {
                    var currentfileName = file.FileName;
                    var names = namesDic.Where(x => x.Value == currentfileName);
                    if(names.Any())
                    {
                        var name = names.FirstOrDefault();
                        var gotName = name.Key; //Title of field
                        var gotFileName = currentfileName; //Save This File and return address
                        //Upload Image
                        
                        var fileLink = String.Format("<a href='{0}' target='_blank'>دانلود فایل</a>","Url of Uploaded Image");
                        obj.Add(gotName,fileLink);
                    }
                }
            }
            _db.FormDatas.Add(new FormData()
            {
                FormValues = JsonConvert.SerializeObject(obj),
                FormId = frmId
            });
            await _db.SaveChangesAsync();
            var forms = await _db.Forms.Include("Fields").FirstOrDefaultAsync(x => x.Id == frmId);
            return View(forms);
        }

همانطور که می بینید ابتدا آی دی فرم را بدست آوردیم، سپس مقادیر رشته ای فرم که در فیلد FormValues ذخیره می شوند را به JObject تبدیل کردیم.
در مرحله بعد فایلهای فرم را مدیریت میکنیم، در این مرحله ابتدا نام های فایلها را به یک لیست تبدیل کردیم تا بتوانیم روی هرکدام پویش کنیم، نام فیلد و فایل آن فیلد را بدست آوردیم و فایل مربوط به هر فیلد را ذخیره کردیم، سپس فیلد مربوطه به همراه آدرس 
فایل ذخیره شده را به JObject ای که در مرحله اول ساختیم اضافه می کنیم، حالا تمام JObject ساخته شده را به صورت رشته تبدیل می کنیم و در فیلد FormValues مربوطه ذخیره می کنیم!

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

نظرات (0)

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