Trying to get window.location.href to call ActionResult. MVC + Javascript

Question

I have a delete button that calls a javascript function onclick. The function function fires, gets id and displays in Alert, the tries to use window.location.href = "/Home/DeletePhoto/photoId=" + id; to call an ActionResult in the HomeController.

button in modal popup:

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

javascript function at the bottom of the View:

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

(if I Ctrl + Click on the URL below in the javascript code, it runs the ActionResult as required)

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

Here is the ActionResult. I want to delete a photo and it's record and redirect to Home/Index which will display photos without the deleted one.

   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");

        }

On button click, Alerts show that I am inside javascript function, and the id has been passed, but the photo Modal window just closes and displays same Index showing the thumbnail of the image still exists.

EDIT: I came back to edit and add the information that I am using This image gallery which was very easy to configure but made it difficult to pass additional stuff between the thumbnail/index display and the Modal lightbox popup. That is why I am having so much trouble with a simple call to an ActionResult. There is lots of js/jquery/blueimp code that is difficult to hack. thanks for everyone that made an effort to help me and I hope someone else can use the Image Gallery too.

Is there any whitespace in the `h3Title` element? Use `document.getElementById('h3Title').innerHTML.trim()` to remove it. — Barmar, Mar 25 '17 at 07:42
mixing client-code with server-code is bad, for instance, you calling js function forcing to change location of page, but the server also forcing new page, so mixing technologies are super bad, just use plain default deleting, like they use in official docs — Medet Tleukabiluly, Mar 25 '17 at 07:44
@Barmar, it is trimmed using your suggestion but still fails. — JustJohn, Mar 25 '17 at 15:42
@Medet, yes, bad to mix code. But I need to do it this way. I've done a kajilion delete this and and delete that using plain default deleting. The Modal popup holding the photo and Delete button is getting in the way. Thank you, but already been through all delete docs I can find on SO and MS. — JustJohn, Mar 25 '17 at 15:42

score 0 · Answer 1 · edited May 23 '17 at 12:25

0

You code is not probably able to catch the delete ID on server side at
public ActionResult DeletePhoto(int photoId)

According to this answer, for asking server to delete a specific resource, your route should be handled like /Home/DeletePhoto/{photoId}.

And should be invoked like
window.location.href = "/Home/DeletePhoto/"+id;

edited May 23 '17 at 12:25

Community

1
1

answered Mar 25 '17 at 07:51

Jimish Fotariya

773
6
20

1

thank you. I tried that and, I too, thought it would work but it didn't. "/Home/DeletePhoto?photoId=" + id; worked. go figure – JustJohn Mar 25 '17 at 20:26

score 0 · Accepted Answer · edited May 23 '17 at 11:46

0

First, you should use url.action in Razor instead of hard coding. You will not have routing problem anymore.

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

See here: Url.Action parameters?

And then use a method in js like .assign("url").

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

edited May 23 '17 at 11:46

Community

1
1

answered Mar 25 '17 at 08:22

Stefdelec

2,356
2
25
36

your link helped me. For some reason putting the button tag around what I needed caused the blueimp image gallery js code to just close the window. I studied your link to other answers, and for now. . . . . var id = document.getElementById('h3Title').innerHTML.trim(); window.location.href = "/Home/DeletePhoto?photoId=" + id; . . . . . . seems to work. . . .thanks. . .I probably can use a a razor Url.Action but for now I am successfully passing the id and deleting the photo and returning to index page without the deleted photo. thank you – JustJohn Mar 25 '17 at 16:30

Trying to get window.location.href to call ActionResult. MVC + Javascript

2 Answers2