how to Direct fetch of the record after registration by Ajax-CodePudding

I want to fetch the records by Ajax immediately after each record is set by Ajax and show it by the table. I was able to save the records in the database with Ajax, but after registering the records with Ajax, I want to call them as a list with Ajax without refreshing the page.

 [HttpPost]
public IActionResult UpdateSubmitProjectStap2(Project project)
{
    var pro = _context.Projects.Find(TempData["ProID"]);
    pro.KhdamatHesabrsee = project.KhdamatHesabrsee;
    pro.SabteProjectDate = DateTime.Now;
    pro.MablghGhrardad = project.MablghGhrardad;
    pro.ShoroeeProjectDate = project.ShoroeeProjectDate;
    pro.PayanProjectDate = project.PayanProjectDate;
    pro.MashmolArzeshAfzoode = project.MashmolArzeshAfzoode;

    _context.SaveChanges();

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

}

                <form >

                    <table class="table table-bordered text-sm " width="100%">

                        <thead class="text-center">

                            <tr style="background-color:#416992; color: white">
                                <th>نوع خدمات</th>
                                <th>مبلغ قرارداد</th>
                                <th style="width:180px">تاریخ شروع</th>
                                <th style="width:180px">تاریخ پایان</th>
                                <th>مشمول ارزش افزوده</th>
                                <th>عملیات</th>

                            </tr>

                        </thead>

                        <tr>

                            <td>

      <select class="form-control" asp-for="KhdamatHesabrsee"  required autocomplete="off">

                                    <option value="" default="" selected="">انتخاب کنید</option>
                                    <option value="1">حسابرسی</option>
                                    <option value="2">مالیاتی</option>
                                    <option value="3">منابع انسانی</option>


                                </select>

                            </td>

   <td><input class="form-control"  asp-for="MablghGhrardad" autocomplete="off" /></td>

                            <td>


  <div class="input-group" style="padding-left:9px; padding-right:9px;">
                                    <div class="input-group-addon"
                                         style="border:1px solid gray; padding:6px">
                                        <span>  <i class="right fa fa-calendar"></i></span>
                                    </div>
                                    <input id="bgainDate" type="text" autocomplete="off" class="form-control" asp-for="ShoroeeProjectDate" />

                                </div>

                            </td>

                            <td>

  <div class="input-group" style="padding-left:9px; padding-right:9px;">
                                    <div class="input-group-addon"
                                         style="border:1px solid gray; padding:6px">
                                        <span>  <i class="right fa fa-calendar"></i></span>
                                    </div>
                                    <input  id="EndDate" type="text" autocomplete="off" class="form-control" asp-for="PayanProjectDate" />

                                </div>


                            </td>
                            <td class="text-center">

 <input type="checkbox" style="width: 1.25rem; height: 1.25rem; top: .8rem; " class="flat-red" value="1" asp-for="MashmolArzeshAfzoode">
                            </td>
4

                            <td class="text-center">

                                <button id="btn-send" class="btn btn-sm btn-outline-success" > <i class="fa fa-save"> </i>ذخیره </button>

                            </td>


                        </tr>


                    </table>

                </form>

$("#btn-send").on('click', function () {

$.ajax({
    type: "Post",
    url: '@Url.Action("UpdateSubmitProjectStap2", "Project")',
    data: {
        'KhdamatHesabrsee': $("#KhdamatHesabrsee").val(),
        'MablghGhrardad': $("#MablghGhrardad").val(),
        'ShoroeeProjectDate': $("#ShoroeeProjectDate").val(),
        'PayanProjectDate': $("#PayanProjectDate").val(),
        'MashmolArzeshAfzoode': $("#MashmolArzeshAfzoode").val(),

    }
}).done(function (res) {
    if (res.status == 'ok') {
        $("#ohsnap").removeClass('hidden').removeClass('alert-danger').addClass('alert-success').html('گام دوم با موفقیت ثبت شد');
    }
    else if (res.status == 'error') {
         $("#divmsg").removeClass('hidden').addClass('alert-danger').html('در ثبت اطلاعات خطایی رخ داده است');
    }
});

});

CodePudding user response：

If you want to display the list in current page, you can follow the steps below:

Model:

public class Project
{
    public int Id { get; set; }
    public string KhdamatHesabrsee { get; set; }
    public DateTime SabteProjectDate { get; set; }
    public DateTime ShoroeeProjectDate { get; set; }
    public DateTime PayanProjectDate { get; set; }
    public string MablghGhrardad { get; set; }
    public bool MashmolArzeshAfzoode { get; set; }
}

View:

@model Project
<form>
    <table class="table table-bordered text-sm " width="100%">
        <tr>      
            //...           
            <td>
                <div class="input-group" style="padding-left:9px; padding-right:9px;">
                    <div class="input-group-addon"
                         style="border:1px solid gray; padding:6px">
                        <span>  <i class="right fa fa-calendar"></i></span>
                    </div>
                    <input id="bgainDate" type="text" autocomplete="off" class="form-control" asp-for="ShoroeeProjectDate" />
                </div>
            </td>
            <td>
                <div class="input-group" style="padding-left:9px; padding-right:9px;">
                    <div class="input-group-addon"
                         style="border:1px solid gray; padding:6px">
                        <span>  <i class="right fa fa-calendar"></i></span>
                    </div>
                    <input id="EndDate" type="text" autocomplete="off" class="form-control" asp-for="PayanProjectDate" />
                </div>
            </td>
            <td class="text-center">  
                <input type="checkbox" style="width: 1.25rem; height: 1.25rem; top: .8rem; " class="flat-red" asp-for="MashmolArzeshAfzoode">
            </td>
            <td class="text-center">
                <!--add type="button"-->
                <button type="button" id="btn-send" class="btn btn-sm btn-outline-success"> <i class="fa fa-save"> </i>ذخیره </button>
            </td>
        </tr>
    </table>
</form>
<div id="list"></div>  <!--add list div-->

JS:

@section Scripts
{
    <script>
        $("#btn-send").on('click', function () {  
            $.ajax({
                type: "Post",
                url: '@Url.Action("UpdateSubmitProjectStap2", "Project")',
                data: {
                    'KhdamatHesabrsee': $("#KhdamatHesabrsee").val(),
                    'MablghGhrardad': $("#MablghGhrardad").val(),
                    'ShoroeeProjectDate': $("#ShoroeeProjectDate").val(),
                    'PayanProjectDate': $("#PayanProjectDate").val(),
                    'MashmolArzeshAfzoode': $("#MashmolArzeshAfzoode").val(),

                }
            }).done(function (res) {
                $("#list").html(res);   //use .html to display the html
               $("#ohsnap").removeClass('hidden').removeClass('alert-danger').addClass('alert-success').html('گام دوم با موفقیت ثبت شد');
            }).fail(function (res) {
                alert(res.responseText);
                $("#divmsg").removeClass('hidden').addClass('alert-danger').html('در ثبت اطلاعات خطایی رخ داده است');
            });
        })
    </script>
}

Partial view(_ProjectList.cshtml):

@model List<Project>
<table class="table">
    <thead>
        <tr>
            <th>@Html.DisplayNameFor(model=>model[0].KhdamatHesabrsee)</th>
            <th>@Html.DisplayNameFor(model=>model[0].MablghGhrardad)</th>
            <th>@Html.DisplayNameFor(model=>model[0].MashmolArzeshAfzoode)</th>
            <th>@Html.DisplayNameFor(model=>model[0].PayanProjectDate)</th>
            <th>@Html.DisplayNameFor(model=>model[0].SabteProjectDate)</th>
            <th>@Html.DisplayNameFor(model=>model[0].ShoroeeProjectDate)</th>
            
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.KhdamatHesabrsee)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.MablghGhrardad)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.MashmolArzeshAfzoode)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.PayanProjectDate)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.SabteProjectDate)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ShoroeeProjectDate)
                </td>
            </tr>
        }
    </tbody>
</table>

Controller:

[HttpPost]
public IActionResult UpdateSubmitProjectStap2(Project project)
{
    try
    {
        var pro = _context.Projects.Find(TempData["ProID"]);
        pro.KhdamatHesabrsee = project.KhdamatHesabrsee;
        pro.SabteProjectDate = DateTime.Now;
        pro.MablghGhrardad = project.MablghGhrardad;
        pro.ShoroeeProjectDate = project.ShoroeeProjectDate;
        pro.PayanProjectDate = project.PayanProjectDate;
        pro.MashmolArzeshAfzoode = project.MashmolArzeshAfzoode;
        _context.Update(pro);   // be sure add update or insert operation...
        _context.SaveChanges();
    }
    catch (Exception)
    {
        throw;
    }          
    return PartialView("_ProjectList",_context.Projects.ToList());
}

Update:

If you want to display the data in another page, you can use window.location in frontend.

View:

@model Project
<form>
    <table class="table table-bordered text-sm " width="100%">
        <tr>              
            //...                    
            <td><input class="form-control" value="dsf" disabled asp-for="MablghGhrardad" autocomplete="off" /></td>
            <td>
                <div class="input-group" style="padding-left:9px; padding-right:9px;">
                    <div class="input-group-addon"
                         style="border:1px solid gray; padding:6px">
                        <span>  <i class="right fa fa-calendar"></i></span>
                    </div>
                    <input id="bgainDate" type="text" autocomplete="off" class="form-control" asp-for="ShoroeeProjectDate" />
                </div>
            </td>
            <td>
                <div class="input-group" style="padding-left:9px; padding-right:9px;">
                    <div class="input-group-addon"
                         style="border:1px solid gray; padding:6px">
                        <span>  <i class="right fa fa-calendar"></i></span>
                    </div>
                    <input id="EndDate" type="text" autocomplete="off" class="form-control" asp-for="PayanProjectDate" />
                </div>
            </td>
            <td class="text-center">

                <input type="checkbox" style="width: 1.25rem; height: 1.25rem; top: .8rem; " class="flat-red" asp-for="MashmolArzeshAfzoode">
            </td>
            4
            <td class="text-center">
                <!--add type="button"-->
                <button type="button" id="btn-send" class="btn btn-sm btn-outline-success"> <i class="fa fa-save"> </i>ذخیره </button>
            </td>
        </tr>
    </table>
</form>

JS:

@section Scripts
{
    <script>
        $("#btn-send").on('click', function () {

            $.ajax({
                type: "Post",
                url: '@Url.Action("UpdateSubmitProjectStap2", "Project")',
                data: {
                    'KhdamatHesabrsee': $("#KhdamatHesabrsee").val(),
                    'MablghGhrardad': $("#MablghGhrardad").val(),
                    'ShoroeeProjectDate': $("#ShoroeeProjectDate").val(),
                    'PayanProjectDate': $("#PayanProjectDate").val(),
                    'MashmolArzeshAfzoode': $("#MashmolArzeshAfzoode").val(),

                }
            }).done(function (res) {                                 
                window.location = "/ControllerName/Test";  //add this line...
            }).fail(function (res) {
                alert(res.responseText);
                $("#divmsg").removeClass('hidden').addClass('alert-danger').html('در ثبت اطلاعات خطایی رخ داده است');
            });
        })
    </script>
}

Another View named Test.cshtml(the same with _ProjectList.cshtml):

@model List<Project>
<table class="table">
    <thead>
        <tr>
            <th>@Html.DisplayNameFor(model=>model[0].KhdamatHesabrsee)</th>
            //...
            <th>@Html.DisplayNameFor(model=>model[0].SabteProjectDate)</th>
            <th>@Html.DisplayNameFor(model=>model[0].ShoroeeProjectDate)</th>
            
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.KhdamatHesabrsee)
                </td>
                //...
                <td>
                    @Html.DisplayFor(modelItem => item.ShoroeeProjectDate)
                </td>
            </tr>
        }
    </tbody>
</table>

Controller(must contain an action called Test):

[HttpPost]
public IActionResult UpdateSubmitProjectStap2(Project project)
{
    try
    {
        var pro = _context.Projects.FirstOrDefault();
        pro.KhdamatHesabrsee = project.KhdamatHesabrsee;
        pro.SabteProjectDate = DateTime.Now;
        pro.MablghGhrardad = project.MablghGhrardad;
        pro.ShoroeeProjectDate = project.ShoroeeProjectDate;
        pro.PayanProjectDate = project.PayanProjectDate;
        pro.MashmolArzeshAfzoode = project.MashmolArzeshAfzoode;
        _context.Update(pro);
        _context.SaveChanges();
    }
    catch (Exception)
    {
        throw;
    }         
    return Ok();

}
public IActionResult Test()
{
    return View(_context.Projects.ToList());
}