ارسال اطلاعات از مودال به کنترلر با ایجکس و نمایش ولیدیشن در مودال

02:54:00 PM - 1398/10/19

دوستان من یک دکمه دارم به اسم ثبت وقتی می زنم یک مودال باز میشه حالا می خوام با ایجکس مقادیر رو ارسال کنم به کنترلر و دوم اینکه اگر فیلد خالی بود در مودال ولیدیشن نمایش داده بشه البته ایجکسی هم خطا نمایش بده خوبه ممنون میشم راهنمایی کنید

کدهای کنترلر

  [HttpPost]
        [Route("Create")]
        public IActionResult Create(City city)
        {
            if (!ModelState.IsValid)
            {
                return Json(new { status = "failModel" });
            }
            try
            {
                City newcity = new City
                {
                    CityName = city.CityName
                };
                _iadmin.AddCity(newcity);
                return Json(new { status = "success" });
            }
            catch
            {

                return Json(new { status = "fail" });
            }
        }

این هم کد های مودال

<form id="frmCity">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">ثبت شهر</h4>
    </div>
    <div class="modal-dialog" role="document">
        <div class="modal-body">
            <div class="form-group">
                <label asp-for="CityName" class="control-label"></label>
                <input asp-for="CityName" class="form-control" />
                <span asp-validation-for="CityName" class="text-danger"></span>
            </div>
        </div>
    </div>


    <div class="modal-footer" style="text-align:left;">
        <button class="btn btn-default" type="button" data-dismiss="modal">برگشت</button>
        <button class="btn btn-success" type="submit">
            ایجاد
        </button>
    </div>

</form>

و این هم کدهای ایجکس

 $('#frmCity').submit(function myfunction(e) {
            e.preventDefault();
            var form = $(this);
            $.ajax({
                type: "post",
                url: '@Url.Action("Create", "Cities")',
                cache: false,
                data: form.serialize()
            }).done(function (msg) {
                if (msg.status === "failModel") {
                    alert('علی');
                    return false;
                }
            });
        });

ویرایش شده در پنج شنبه ۱۹ دی ۱۳۹۸ ساعت ۱۷:۴۷:۲۳

به این سوال امتیاز بدهید 1 تعداد بازدید این سوال : 2672

پاسخ دهنده : fateme 04:57:00 PM - 1398/10/19

به این پاسخ امتیاز بدهید 0 نظر گزارش حذف ویرایش

پاسخ دهنده : fateme 02:48:00 PM - 1398/10/22

به نظرم چند تا اشکال هست در اینجا

اول اینکه شما توی فرم Modal خودتون هیچ مدلی ندارید. بنابراین نمی تونید Validation های سمت سرور رو نمایش بدید در این فرم مودال. (البته شاید هم دارید ولی توی کدهاتون ننوشتید)

نکته دوم اینکه فرض می کنیم شما بالای فرم مودال خودتون model دارید. خب ولیدیشن هایی که از مدل نمایش داده میشن ولیدیشن های سمت سرور هستن. مثلا فرض کنید

[Display(Name = "شهر")]
[Required(ErrorMessage = "لطفا شهر را وارد کنید")]
Public string CityName {get; set;}

اگر از Property بالا توی فرم خودتون استفاده کنید در صورتی خطاها و ولیدیشن ها نمایش داده میشن که شما اطلاعات رو به صورت submit عادی سمت سرور ارسال کنید. یعنی از ایجکس استفاده نکنید. چون ولیدیشن بالا یک ولیدیشن سمت سرور هست و در Request های سمت سرور نمایش داده میشه.

در حالی که شما یک Request سمت کلاینت دارید(همون ایجکس) پس این ولیدیشن ها نمایش داده نمشن.

شما یا باید Request رو عادی کنید یعنی به صورت زیر

<form asp-controller="ControllerName" asp-action="ActionName" method="post">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">ثبت شهر</h4>
    </div>
    <div class="modal-dialog" role="document">
        <div class="modal-body">
            <div class="form-group">
                <label asp-for="CityName" class="control-label"></label>
                <input asp-for="CityName" class="form-control" />
                <span asp-validation-for="CityName" class="text-danger"></span>
            </div>
        </div>
    </div>


    <div class="modal-footer" style="text-align:left;">
        <button class="btn btn-default" type="button" data-dismiss="modal">برگشت</button>
        <button class="btn btn-success" type="submit">
            ایجاد
        </button>
    </div>

</form>

یا اینکه ولیدیشن ها رو از طریق خود جی کوئری کنترل کنید و با alert پیغام خطا بدید

موفق باشید

ویرایش شده در یکشنبه ۲۲ دی ۱۳۹۸ ساعت ۱۴:۴۹:۴۵