Question

我通过Visual 2012编写Web MVC4代码。我的代码表显示列表学生。现在，我想通过ajax删除列表中的行但不工作。我如何调用ajax并返回视图。以下是我的代码：

这是控制器：

[HttpGet]
public ActionResult AjaxPage()
{
    demoMVC4Entities db = new demoMVC4Entities();
    var _listProvince = db.T_Provinces;
    ViewBag.ddl_Province = new SelectList(_listProvince, "Province_ID", "Province_Name");

    var _listStudent = db.T_Student;

    return View(_listStudent);
}
[HttpPost]
public ActionResult del(FormCollection fc, int delid)
{
    demoMVC4Entities db = new demoMVC4Entities();
    T_Student _delStudent = db.T_Student.Single(n => n.MA == delid);

    db.T_Student.DeleteObject(_delStudent);
    db.SaveChanges();

    var _listStudent = db.T_Student;
    return View(_listStudent);
}

这是视图：

<div id="result">
    <% using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId="result" }))
       { %>
    <div class="n_control">
        <div>Keyword: </div><% string _ns = ViewBag.Keyword; %>
        <div><%= Html.TextBox("Keyword", _ns)%></div>
        <div>Province: </div>
        <div><%= Html.DropDownList("ddl_Province", "--- Tất cả ---")%></div>
        <div><input type="submit" value="Search" /></div>
    </div>
    <%} %>
    <div class="n_result">
        <table>
            <tr>
                <th></th>
                <th>Ma</th>
                <th>ID</th>
                <th>Name</th>
                <th>Phone</th>
                <th>Email</th>
                <th>Province</th>
                <th></th>
            </tr>
            <%foreach(var item in Model){ %>
            <tr>
                <td><input type="checkbox" name="nam" id="nam" value="<%= item.MA %>" /></td>
                <td><%= Html.DisplayFor(n=>item.MA) %></td>
                <td><%= Html.DisplayFor(n=>item.ID) %></td>
                <td><%= Html.DisplayFor(n=>item.Name) %></td>
                <td><%= Html.DisplayFor(n=>item.Phone) %></td>
                <td><%= Html.DisplayFor(n=>item.Email) %></td>
                <td><%= Html.DisplayFor(n=>item.Province) %></td>
                <td><a href="#" class="del_i" v="<%= item.MA %>">Del</a></td>
            </tr>
            <%} %>
        </table>
    </div>
</div>
<script>
    $(function () {
        $('.del_i').click(function () {
            var _val = $(this).attr("v");
            $.ajax({
                url: '<%= Url.Action("del","Home")%>',
                type: 'POST',
                data: { fc: $(this).serialize(), delid: _val },
                success: function (result) {
                    $('#result').html(result);
                }
            });
        });
    });
</script>

请帮帮我...谢谢。！

Answer 1

您应该使用data-*属性存储数据将链接更改为

<a href="#" class="del_i" data-id="<%= item.MA %>">Del</a>

并使用

访问该值

var _val = $(this).data("id");

$(this).serialize()正在尝试序列化无意义的链接，无论如何都不要使用它，所以它应该只是

data: { delid: _val },

然后将POST方法更改为

public ActionResult del(int delid)

无需返回视图。您只需返回指示成功的json结果，然后从视图中删除关联的行。

完整的代码可以是

脚本

$('.del_i').click(function () {
  var _val = $(this).data("id");
  var row = $(this).closest('tr');
  $.ajax({
    url: '<%= Url.Action("del","Home")%>',
    type: 'POST',
    dataType: 'json',
    data: { delid: _val },
    success: function (result) {
      if(result) {
        row.remove();
      }
    }
  });
});

控制器

[HttpPost]
public ActionResult del(int delid)
{
  demoMVC4Entities db = new demoMVC4Entities();
  T_Student _delStudent = db.T_Student.Single(n => n.MA == delid);
  db.T_Student.DeleteObject(_delStudent);
  db.SaveChanges();
  return Json(true); // or return Json(null) if there was an error
}

MVC4中的Ajax表单

1 个答案: