how can I execute a string method in the controller in mvc5 using ajax without refreshing view

Question

Net. Please help me. I have a void deletephoto method in my controller productmasters. The following is that method :

    [HttpPost]
    [ValidateAntiForgeryToken]
    public void DeletePhoto(ProductMaster productMaster,string id,string cid)
    {

       ProductMaster productMaster1 = (from p in db.ProductMasters
                        where p.ProductID == id && p.CompanyID == cid
                        select p).FirstOrDefault();

        string fullPath = Server.MapPath(productMaster1.ImagePathAndName);
        if (System.IO.File.Exists(fullPath))
        {
            System.IO.File.Delete(fullPath);
        }
        productMaster1.ImagePathAndName = null;
        productMaster1.Image = null;
        db.Entry(productMaster1).State = EntityState.Modified;
        db.SaveChanges();
    }

In my edit view I have a remove photo link:

<div>
   @Html.ActionLink("Remove Photo", "DeletePhoto", new { id = Model.ProductID, cid = Model.CompanyID })
</div>

The problem is: How can I execute the void method in this controller without refreshing the edit view.

Thanks in advance.

Answer 1

Use Ajax.ActionLink instead of Html.ActionLink

Ajax.ActionLink is much like the Html.ActionLink counterpart, it also creates the hyperlink <a href="">Click here</a> but when the user clicks it and has a JavaScript enabled browser, Ajax.ActionLink sends the asynchronous request instead of navigating to the new URL. With the Ajax.ActionLink we specify what controller's action method is to be invoked and also specify what to do with the response coming back from the action method.

  @Ajax.ActionLink(
             "Remove Photo", // <-- Text to display
             "DeletePhoto", // <-- Action Method Name
             new { id = Model.ProductID, cid = Model.CompanyID },
             new AjaxOptions
             {
                 UpdateTargetId="PhotoDiv", // <-- DOM element ID to update
                 InsertionMode = InsertionMode.Replace, // <-- Replace the content of DOM element
                 HttpMethod = "GET" // <-- HTTP method
             })

EDIT If you have [ValidateAntiForgeryToken], you can simply use @Ajax.BeginForm

@Ajax.BeginForm("DeletePhoto", new { id = Model.ProductID, cid = Model.CompanyID }, new AjaxOptions { UpdateTargetId = "PhotoDiv" }))
{
  @Html.AntiForgeryToken()
  <input type="submit" value="Remove Photo" class="btnlink" /> // style button to look like a link by adding `btnLink` class
 }

CSS

.btnLink{
 background:none!important;
 border:none; 
 padding:0!important;
 font-family:arial,sans-serif; /*input has OS specific font-family*/
 color:#069;
 text-decoration:underline;
 cursor:pointer;
}