Question

我正在开发使用ASP.Net mvc 4.我的索引视图中有一个删除功能。在用户继续删除项目之前，这是完成

的步骤

弹出确认对话框，使用javascript获取“是”或“否”回答。
如果用户说“是”，我会从我的控制器调用删除操作
删除操作从数据库中删除项目
删除操作返回'RedirectToAction（“Index”）;'
..假设视图将使用最新更新

第5步是我的问题..它无法正常工作

这是我的代码

删除按钮

<a href="@Url.Action("DeleteFile", new { id = @item.Id })"  
    onclick = "return confirm2delete(this);"
    class="btn btn-danger btn-sm" 
    data-toggle="tooltip" title="Delete File">
    <i class="fa fa-trash-o"></i>
</a>

javascript

function confirm2delete(obj)
{      
    deleteLinkObj = $(this);
    w2confirm("Are sure to delete this file ?")
    .yes(function () {
        $.get(obj.href, function (data) {
            alert(data); // i checked ..this return the html page created from the delete action
            window.open (data); // not the right approach ???
        });

    })
    .no(function () {
        alert("no");
        result = false;
    });
    return false;
}

我的控制器中的删除操作

public ActionResult DeleteFile(int id)
{
    FileUpload f = db.FileUploads.Find(id);
    try
    {                
        FileInfo dfile = new FileInfo(f.fileUrl);
        if (dfile.Exists) { dfile.Delete(); }
        fileUrl = f.FileUrl.Replace("Images/Uploads", "Images/Thumbnails");
        FileInfo thumbnail= new FileInfo(fileUrl);
        if (thumbnail.Exists) { thumbnail.Delete(); }
        db.FileUploads.Remove(f);
        db.SaveChanges();
    }
    catch (Exception ex)
    {
    }
    return RedirectToAction("Index");  // or may i should return something else to make it work in javascript ???
}

希望你们能帮助我。我一直在寻找和尝试这个级别的日子，我觉得它的时间得到一些帮助。再多一点。几乎就在那里。

Answer 1

Ajax调用保留在同一页面中，因此调用return RedirectToAction("Index");毫无意义（它不会重定向）。在任何情况下都不必返回新视图。相反，如果控制器成功删除了项目，您可以从DOM中删除现有元素。您没有显示您的视图，但假设您有一个表格，其中行可能类似于

<tr>
  <td>the name of the file</td>
  <td>the delete link</td>
</td>

然后您可以使用以下“删除”链接

<td><button type="button" class="delete" data-id="@item.Id">Delete</button></td>

关键点是class和data-id属性 - 修改其余部分以适合您的显示但删除onclick属性（停止使用行为污染您的标记并使用{{3 - 它是21世纪！）

然后是剧本

var url = '@Url.Action("DeleteFile")';
$('.delete').click(function() {
  var id = $(this).data('id');
  var row = $(this).closest('tr'); // modify if the containing element is not a <tr>
  w2confirm("Are sure to delete this file ?")
    .yes(function () {
      $.post(url, { id: id }, function(response) { // its a POST, not a GET!
        if (response) {
          row.remove(); // remove the row
        } else {
          // Oops, something went wrong
        }
      }).fail(function (response) {
        // Oops, something went wrong
      });
    })
    .no(function() {
      alert("no");
    });
});

请注意，如果您使用jquery版本1.9+，那么else功能中的$.post()块不是必需的，因为以下方法中的return Json(null);将转到.fail()回调

然后在控制器中，返回json以指示项目已成功删除

[HttpPost]
public ActionResult DeleteFile(int id)
{
  FileUpload f = db.FileUploads.Find(id);
  try
  {                
    ....
    db.SaveChanges();
    return Json(true); // signal success
  }
  catch (Exception ex)
  {
    return Json(null); // signal failure
  }
}

如何从javascript的动作调用打开视图结果

1 个答案: