title: How to delete mvc webgrid row by calling ajax?
body: <p>in my mvc razor view, I have a partial view with webgrid data, I need to add an actionlink to delete that row data, This is what I did:
  This is javascript function:
      
          function delMeal(pid) {</p>
  
  <pre><code>        if (confirm("Do you want to delete Meal: " + pid)) {
              var data = { 'MealID': pid }
              $.post('/Travel/DeleteMeal', data,
              function (data) {
                  if (data == true)
                      location = location.href;
                  else
                      alert("Could not delete");
              });
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>This is controller method:</p>
  
  <pre><code>public JsonResult DeleteMeal(Int32 productId)
      {  
          //NWDataContext db = new NWDataContext();
          Meal product = db.Meals.Where(x =&gt; x.MealID == productId).FirstOrDefault();
          db.Meals.Remove(product);
          db.SaveChanges();
  
          return Json(true, JsonRequestBehavior.AllowGet);
      }
  </code></pre>
  
  <p>This is row with delete function call on webgrid
       @Html.ActionLink("Delete", "DeleteMeal", "Travel", new { onclick = "delMeal("+item.MealID+")"})</p>
  
  <p>The above code in action link does not work, since I added method ("DeleteMeal") in it, but if I remove that method, the javascript function is called, but method("DeleteMeal") does not call. 
  can anybody help me out to make above the codes in @Html.ActionLink working? thanks a lot,</p>