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

پاسخ هوش مصنوعی

برای ارسال اطلاعات از مودال به کنترلر و نمایش خطاهای ولیدیشن با ایجکس، شما نیاز به اصلاحاتی در کدهای خود دارید. در ادامه، مراحل ضروری برای انجام این کار توضیح داده شده است.

در کنترلر شما، اگر یک خطا در ولیدیشن وجود داشته باشد، باید از آن اطلاعات برای نمایش در مودال استفاده کنید. کد کنترلتان به درستی تنظیم شده است. در این مرحله، ما تغییراتی در کد ایجکس خود ایجاد می کنیم تا خطاها را با استفاده از jQuery در مودال نمایش دهیم.

برای کدهای HTML و jQuery شما، باید مراحل زیر را دنبال کنید:

1. ابتدا در قسمت `done` ایجکس، چک کنید که آیا مقدار `status` برابر با `failModel` است یا خیر. پس از آن، اطلاعات خطا را دریافت و در مودال نمایش دهید.

2. برای این کار، می توانید از `$.each` برای تکرار خطاها استفاده کنید.

کد تغییر یافته ایجکس به شکل زیر است:

$('#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") {
         // حذف خطاهای قبلی
         $('span.text-danger').text('');
         
         // نمایش خطاهای جدید
         if(msg.errors) {
            $.each(msg.errors, function(key, value) {
               $('[asp-for="' + key + '"]')
                  .siblings('span.text-danger')
                  .text(value);
            });
         }
         return false;
      } else if (msg.status === "success") {
         // در صورت موفقیت، مودال را ببندید و لیست را به روز کنید
         $('#myModal').modal('hide');
         // کد به روز رسانی لیست
      }
   });
});

همچنین باید به کنترلرتان این امکان را بدهید که خطاهای ولیدیشن را به کلاینت برگرداند. برای این کار می توانید از ویژگی های `ModelState` استفاده کنید:

if (!ModelState.IsValid)
{
    var errors = ModelState.ToDictionary(
        kvp => kvp.Key,
        kvp => kvp.Value.Errors.Select(e => e.ErrorMessage).ToArray()
    );
    return Json(new { status = "failModel", errors });
}

در نهایت اگر پیام موفقیت آمیز بود، می توانید مودال را ببندید و لیست شهرها یا محتوای مورد نظر را به روزرسانی کنید.

سعی کنید همیشه کدهایی رو که نوشتید قرار بدید تا بشه دقیق راهنمایی کرد. اینجوری فقط میشه یه سری کلیات رو گفت که مطمئنا به پاسخ نمیرسید

پس بهتره سوال رو ویرایش کنید و کدهایی که نوشتید رو دقیقا قرار بدید

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

اول اینکه شما توی فرم 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 پیغام خطا بدید

موفق باشید

ممنون از پاسختون اما با جی کوئری هم نمیشه کنترل کرد چرا؟چون زمانیکه شما مقادیر رو به یک اکشن دیگه ارسال می کنید که مودال باز بشه کدهای جی کوئری رو نمی توان تو ویو اون اکشن نوشت یعنی تو مودال اصلا کدهای جی کوئری خونده نمیشه و باید تو ایندکس نوشت ولی تو ایندکس هم فرم مودال خونده نمیشه
درمورد مدل هم عرض کنم بله ولیدیشن نمایش داده میشه ولی نه توی مودال درواقع به یک صفحه جدا ارسال میشه و بصورت معمولی نمایش داده میشه از return partialview هم استفاده کردم اما نتیجه ای نداشت