MVC4中的Ajax形式

Question

I'm code web MVC4 by Visual 2012. I code form show list Student. Now, i want to delete a row in list by ajax but not working. How do me to call ajax and return view. Below is my code:

This is Controller:

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

This is View:

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

Please help me... Thanks.!

Answer 1

You should store data using the data-* attributes Change the link to

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

and access the value with

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

$(this).serialize() is trying to serialize the link which is pointless and your not using it anyway so it should be just

data: { delid: _val },

then change the POST method to

public ActionResult del(int delid)

There is no need to return a view. You can just return a json result indicating success, and then remove the associated row from the view.

The full code can be

Script

$('.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();
      }
    }
  });
});

Controller

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