如何從javascript的動作調用中打開視圖結果

Question

我正在使用ASP.Net mvc 4開發。我的索引視圖中具有刪除功能。 在用戶繼續刪除項目之前，這是需要執行的步驟

1. 彈出一個確認對話框，以使用javascript獲得“是”或“否”的答案。

2. 如果用戶說“是”，我會從控制器中調用刪除操作

3. delete操作從數據庫中刪除項目

4. 刪除操作返回'RedirectToAction（“ Index”）;'

5. ..假設視圖將使用最新更新進行更新

步驟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屬性（停止用行為污染您的標記並使用不引人注目的JavaScript -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+版本，則不需要$.post()函數中的else塊，因為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
  }
}