Ajax注冊后如何直接獲取記錄-有解無憂

我想在 Ajax 設定每條記錄后立即通過 Ajax 獲取記錄并通過表顯示。我能夠使用 Ajax 將記錄保存在資料庫中，但是在使用 Ajax 注冊記錄后，我想在不重繪頁面的情況下使用 Ajax 將它們作為串列呼叫。

Ajax注冊后如何直接獲取記錄

 [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('?? ??? ??????? ????? ?? ???? ???');
    }
});

});

uj5u.com熱心網友回復：

如果您想在當前頁面顯示串列，您可以按照以下步驟操作：

模型：

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; }
}

看法：

@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>
}

部分視圖（_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>

控制器：

[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());
}

更新：

如果你想在另一個頁面顯示資料，你可以window.location在前端使用。

看法：

@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>
}

另一個名為 Test.cshtml 的視圖（與 _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>

控制器（必須包含一個名為的動作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());
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/326185.html

標籤：查询阿贾克斯 asp.net核心

上一篇：Jquery'each'等待ajax行程完成然后繼續回圈

下一篇：如何使網站從頂部開始滾動，然后在向上滾動時停在某個點