试图让 window.location.href 调用 ActionResult。 MVC + Javascript

Posted 2023-03-05

【中文标题】试图让 window.location.href 调用 ActionResult。 MVC + Javascript

【英文标题】：Trying to get window.location.href to call ActionResult. MVC + Javascript

【发布时间】：2017-08-18 05:41:20

【问题描述】：

我有一个调用 javascript 函数 onclick 的删除按钮。 函数函数触发，获取 id 并显示在 Alert 中，尝试使用 window.location.href = "/Home/DeletePhoto/photoId=" + id;在 HomeController 中调用 ActionResult。

模态弹出窗口中的按钮：

 <button class="title" id="btnDelete" onclick="fDoTheDelete();">Delete</button>

视图底部的javascript函数：

   function fDoTheDelete()
    
       alert("in the delete function: " + document.getElementById('h3Title').innerhtml);

       var id = document.getElementById('h3Title').innerHTML;

       window.location.href = "http://localhost:50061/Home/DeletePhoto/photoId=" + id;
    

（如果我在javascript代码中Ctrl+点击下面的URL，它会根据需要运行ActionResult）

window.location.href = "http://localhost:50061/Home/DeletePhoto/photoId=" + id;

这是 ActionResult。我想删除一张照片，它被记录并重定向到主页/索引，它将显示没有删除的照片。

   public ActionResult DeletePhoto(int photoId)
        
        //GET FILENAME FROM ID
       string photoName = (from p in db.Photos
                        where p.PhotoId == photoId
                        select p.Description).FirstOrDefault();

        //DELETE FILE

        string fullPath = "/GalleryImages /" + photoName;

        if (System.IO.File.Exists(fullPath))
            
            System.IO.File.Delete(fullPath);
            

        //DELETE RECORD OF PHOTO

        Photo photo = db.Photos.Find(photoId);
        db.Photos.Remove(photo);
        db.SaveChanges();


        return RedirectToAction("Index");

        

单击按钮时，警报显示我在 javascript 函数中，并且 id 已传递，但照片模态窗口刚刚关闭并显示相同的索引，显示图像的缩略图仍然存在。

编辑： 我回来编辑并添加了我正在使用的信息This image gallery，这很容易配置，但很难在缩略图/索引显示和模态灯箱弹出窗口之间传递其他内容。这就是为什么我在简单地调用 ActionResult 时遇到这么多麻烦的原因。有很多难以破解的 js/jquery/blueimp 代码。 感谢所有努力帮助我的人，我希望其他人也可以使用图片库。

【问题讨论】：

h3Title 元素中有空格吗？使用document.getElementById('h3Title').innerHTML.trim() 将其删除。

client-code 和 server-code 混合是不好的，比如你调用js函数强制改变页面位置，但是服务器也强制新页面，所以混合技术非常糟糕，只需使用普通的默认删除，就像他们在官方文档中使用的那样

@Barmar，已根据您的建议进行了修剪，但仍然失败。

@Medet，是的，混合代码不好。但我需要这样做。我已经完成了 kajilion 删除这个并使用普通默认删除删除它。包含照片和删除按钮的模态弹出窗口挡住了路。谢谢，但我已经阅读了我可以在 SO 和 MS 上找到的所有删除文档。

【参考方案1】：

您的代码可能无法在 public ActionResult DeletePhoto(int photoId) 的服务器端捕获删除 ID

根据answer，要求服务器删除特定资源，你的路由应该像/Home/DeletePhoto/photoId一样处理。

并且应该像window.location.href = "/Home/DeletePhoto/"+id;

那样调用

【讨论】：

谢谢。我试过了，我也认为它会起作用，但它没有。 "/Home/DeletePhoto?photoId=" + id;工作。去图

【参考方案2】：

首先，您应该在 Razor 中使用 url.action 而不是硬编码。您将不再有路由问题。

@Url.Action("Information", "Admin", new  id = UrlParameter.Optional )

请看这里：Url.Action parameters?

然后在js中使用.assign("url")之类的方法。

    window.location.assign("
@Url.Action("Information", "Admin", new  id = UrlParameter.Optional )"
)

【讨论】：

你的链接帮助了我。出于某种原因，将按钮标签放在我需要的地方会导致 blueimp 图片库 js 代码只关闭窗口。我研究了您与其他答案的链接，现在。 . . . . var id = document.getElementById('h3Title').innerHTML.trim(); window.location.href = "/Home/DeletePhoto?photoId=" + id; . . . . . .似乎工作。 . . 。谢谢。 . .我可能可以使用剃须刀 Url.Action 但现在我成功地传递了 id 并删除了照片并返回索引页面而没有删除的照片。谢谢