I want to do this after the user registers, shows a successful message and the text boxes are empty again and ready for the next registration, but the registration success message is only displayed for the first registration, but I want to Display each registration

public IActionResult submitSingelControlItem(int Projectid,String calender, String ProjectName,String ProjectManagementName, String ajaxControlItem,String ajaxFraindName,int SingelControlState)
{
    Hesabrsee hesabrsee = new Hesabrsee();
    hesabrsee.ControlDate = ConvertDateTime.ConvertShamsiToMiladi(calender);
    hesabrsee.SabtDate = DateTime.Now;
    hesabrsee.Projectid = Projectid;
    hesabrsee.ProjectName = ProjectName;
    hesabrsee.ProjectManagementName = ProjectManagementName;
    hesabrsee.FaraindName = ajaxFraindName;
    hesabrsee.Deiscreption = ajaxControlItem;
    hesabrsee.ControlState = SingelControlState;

    _context.Add(hesabrsee);
    _context.SaveChanges();

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

<script>
    $("#btn").on('click', function () {

        var ajaxFraindName = $("#ajaxFraindName").val();
        var ajaxControlItem = $("#ajaxControlItem").val();
        var calender = $("#calender").val();
        var SingelControlState = $("#SingelControlState").val();

        if (ajaxFraindName == '' || ajaxControlItem == '' || calender == '' || SingelControlState == '') {
            alert("لطفا ورودی ها را پر کنید");
        }

        else {
           $.ajax({
        type: "Post",
        url: '@Url.Action("submitSingelControlItem", "Hasabrsee")',
        data: {
            'ajaxControlItem': $("#ajaxControlItem").val(),
            'ajaxFraindName': $("#ajaxFraindName").val(),
            'Projectid': $("#Projectid").val(),
            'ProjectName': $("#ProjectName").val(),
            'ProjectManagementName': $("#ProjectManagementName").val(),
            'calender': $("#calender").val(),
            'SingelControlState': $("#SingelControlState").val(),

        }
    }).done(function (res) {
        if (res.status == 'ok') {
          
            $("#ohsnap").removeClass('d-none').removeClass('alert-danger').addClass('alert-success').html('مورد کنترلی با موفقیت ثبت شد');
            $("#ajaxControlItem").val("");
            $("#ajaxFraindName").val("");
     
        }
        setTimeout(function () {
            $('#ohsnap').fadeOut('fast');
        }, 2000)
            
    });
        }


    });

</script>

  <div id="ohsnap" class="col-md-4 col-xs-12 alert d-none" style="text-align:center;"></div>

CodePudding user response：

Of course, it displays the message only once because you are removing the class from the $("#ohsnap") div and then you are not restoring it.

Try using Toastr to display the popup alert. It is easier to do.

From the Toastr documentation:

0. Download the CSS and JS files and add them to your project.

1. Reference the css <link href="toastr.css" rel="stylesheet"/>

2. Reference the script <script src="toastr.js"></script>

3. in your .done() function call toastr;

   .done(function (res) {
        if (res.status == 'ok') {
          toastr.success('title-here', 'مورد کنترلی با موفقیت ثبت شد', {
            timeOut: 2000,
            closeButton: true,
            });
   
            $("#ajaxControlItem").val("");
            $("#ajaxFraindName").val("");
   
        });