如何在不刷新页面的情况下从表中删除一行?

时间:2018-06-11 06:21:12

标签: javascript c# jquery ajax asp.net-mvc

如何在不刷新页面的情况下从表中删除一行?  我从视图中删除了删除视图,但它显示“无法找到资源” 我在MVC中并不是那么完美,如果有人可以帮助我,那将是非常感恩的。

Here is my Controller

[这是我的索引视图

<table id="customers">
    <tr>
        <th style="text-align:center">
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th style="text-align:center">
            @Html.DisplayNameFor(model => model.Salary)
        </th>
        <th style="text-align:center">
            @Html.DisplayNameFor(model => model.Address)
        </th>
        <th style="text-align:center">Action</th>
    </tr>

    @foreach (var item in Model)
    {
        <tr class="centerAlign">
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Salary)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Address)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
                @Html.ActionLink("Details", "Details", new { id = item.Id }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.Id })
            </td>
        </tr>

public ActionResult Delete(int id = 0)
        {
            New_Table new_table = db.New_Table.Find(id);
            if (new_table == null)
            {
                return HttpNotFound();
            }
            return View(new_table);
        }

        //
         //POST: /Default1/Delete/5

        [HttpPost]
        public ActionResult Delete(int id)
        {
            New_Table new_table = db.New_Table.FirstOrDefault(s => s.Id.Equals(id));
            if (new_table != null)
            {
                db.DeleteObject(new_table);
                db.SaveChanges();
            }
            return View("Index");
        }

] 2

2 个答案:

答案 0 :(得分:2)

  1. 删除操作链接: -            @ Html.ActionLink(“编辑”,“编辑”,新{id = item.Id})
  2. 将此item.id放入隐藏字段
  3. 从javascript变量中的隐藏字段中获取ID。
  4. 通过ajax [POST]调用调用您的删除操作方法,在ajax调用中传递id。
  5. 希望它会有所帮助!

答案 1 :(得分:0)

只需使用JavaScript和Ajax即可。在DeleteView中尝试这种方法:

<script>
function DeleteId(id)
{
  $.ajax({
     dataType: "json",
     url: '@Url.Action("ActionName","ControllerName")',
     data: {id: id},
     success: function(result){
                //todo
            }
       });
    }
</script>

<table id="customers">
    <tr>
        <th style="text-align:center">
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th style="text-align:center">
            @Html.DisplayNameFor(model => model.Salary)
        </th>
        <th style="text-align:center">
            @Html.DisplayNameFor(model => model.Address)
        </th>
        <th style="text-align:center">Action</th>
    </tr>

    @foreach (var item in Model)
    {
        <tr class="centerAlign">
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Salary)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Address)
            </td>
            <td>

            <!-- Code Removed for simplicity -->
            <a onClick="DeleteId('@item.Id');"> Delete <a/>
            </td>
        </tr>