locked
Ajax Update works only first time RRS feed

  • Question

  • User-1949524191 posted

    Dear All

    I have problem with update records in PartialView with Ajax. I have View with call @Html.Action ("_PartialView", "Controller", new { id = OrderId }) and PartialView with Ajax Form

    @model IEnumerable<WebMartin.Models.OrderExecutionRemark>
    
    @{
        AjaxOptions ajaxOpts = new AjaxOptions
        {
            UpdateTargetId = "orderdisplayremark",
            Url = Url.Action("OrderRemarkDelete", "OrderExecution"),
            HttpMethod = "POST"               
        };    
    }
    
    @ViewBag.Po
    
    @if (Model.Any())
    {
        <table id="orderdisplayremark">
            <thead>
                <tr>
                    <th>Worker</th>
                    <th>Date</th>
                    <th>Remark</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach (var remark in Model)
                {
                    <tr>
                        <td>@remark.UserName</td>
                        <td>@remark.OrderRemarkDate.ToString("yyyy-MM-dd")</td>
                        <td>@remark.OrderRemarkText</td>
                        <td>
                            @using (Ajax.BeginForm(ajaxOpts))
                            {
                                @Html.Hidden("remarkid", remark.OrderRemarkId)
                                <input type="submit" value="Delete" />
                            }
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    }

    and Controller

            [HttpPost]
            public PartialViewResult OrderRemarkDelete(int remarkid)
            {
                OrderExecutionRemark oer = db.OrderExecutionRemarks.Find(remarkid);
              /*  db.OrderExecutionRemarks.Remove(oer);
                db.SaveChanges(); */
                ViewBag.Po = oer.OrderRemarkId;
    
                return PartialView("_OERemarkPartial", db.OrderExecutionRemarks.Where(p => p.OrderId == oer.OrderId).ToList());  
            }
            
            [HttpGet]
            [ChildActionOnly]
            public PartialViewResult _OERemarkPartial(int id = 0)
            {
                return PartialView(db.OrderExecutionRemarks.Where(p => p.OrderId == id).ToList());        
            }        

    Problem

    update works only first time, after - not. I have to refresh page before push "Delete" button again. How solve it? I thought I'd use RedirectToAction(View) but I am using this PartialView in three different Views.

    Thank you in advance for all answers.

    Regards

    Krzysztof

    Wednesday, October 19, 2016 7:23 PM

Answers

  • User-286291038 posted

    Hi,

    Please try adding your form tag before your table.

    @using (Ajax.BeginForm(ajaxOpts))

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 20, 2016 3:18 PM
  • User-691209617 posted

    Hi kszymaniak,

    Your code should work fine as long as you are trying to delete another item in the table. Ideally after successfully calling the action method to delete the record, you simply want to remove that item from the UI so that use will not try to delete it again !

    To do this, you can specify the OnSuccess property in your AjaxOptions. This will be a javascript method and will be executed once the ajax call gets a 200 response from the server.

    @{
        AjaxOptions ajaxOpts = new AjaxOptions
        {
            UpdateTargetId = "orderdisplayremark",
            Url = Url.Action("OrderRemarkDelete", "Home"),
            HttpMethod = "POST",
            OnSuccess = "DeletionCompleted"
        };
    }

    Now in this method, all you have to do is to delete the current row where the delete button is clicked

    function DeletionCompleted()
    {
        $(this).closest("tr").remove();
    }

    This code will not reload the entire table content with new data(even though your current method returns a partial view with that).It simply delete the row. So in that case, you do not really need to return the partial view

    [HttpPost]
    public PartialViewResult OrderRemarkDelete(int remarkid)
    {
        varoer = db.OrderExecutionRemarks.Find(remarkid);
        db.OrderExecutionRemarks.Remove(oer);
        db.SaveChanges();       
        return Json(new { message="successfully deleted"});
    }

    If you really want to replace the existing table content with the partial view result (updated tables- your old code), you can do that as well.

    function MyComplete(res) {          
            $("#orderdisplayremark").html(res);
    }

    Hope it helps.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 20, 2016 5:58 PM

All replies

  • User-286291038 posted

    Hi,

    Iam guessing it is due to the fact that after the first form submit, you are replacing the parent enclosing element, orderdisplayremark.

    In the delete method, please try just updating some child element inside the ajax form. If that works, it is probably due the fact mentioned above.

    Wednesday, October 19, 2016 7:41 PM
  • User-1949524191 posted

    Hi, thanks I try explain

    in PartialView are display remarks to order which are issue by workers. As you can see each row contains worker name, date, remark text and form which passing id remark to delete action. If I have many remarks (many rows) and after first post (delete) remark, shall update table with records and when I want to delete next remark then I can not do it. If I want to delete next remark I have to press F5 (refresh page) before. Where is wrong?

    Regards

    Krzysztof

    Wednesday, October 19, 2016 8:07 PM
  • User-286291038 posted

    Hi,

    Please try adding your form tag before your table.

    @using (Ajax.BeginForm(ajaxOpts))

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 20, 2016 3:18 PM
  • User-691209617 posted

    Hi kszymaniak,

    Your code should work fine as long as you are trying to delete another item in the table. Ideally after successfully calling the action method to delete the record, you simply want to remove that item from the UI so that use will not try to delete it again !

    To do this, you can specify the OnSuccess property in your AjaxOptions. This will be a javascript method and will be executed once the ajax call gets a 200 response from the server.

    @{
        AjaxOptions ajaxOpts = new AjaxOptions
        {
            UpdateTargetId = "orderdisplayremark",
            Url = Url.Action("OrderRemarkDelete", "Home"),
            HttpMethod = "POST",
            OnSuccess = "DeletionCompleted"
        };
    }

    Now in this method, all you have to do is to delete the current row where the delete button is clicked

    function DeletionCompleted()
    {
        $(this).closest("tr").remove();
    }

    This code will not reload the entire table content with new data(even though your current method returns a partial view with that).It simply delete the row. So in that case, you do not really need to return the partial view

    [HttpPost]
    public PartialViewResult OrderRemarkDelete(int remarkid)
    {
        varoer = db.OrderExecutionRemarks.Find(remarkid);
        db.OrderExecutionRemarks.Remove(oer);
        db.SaveChanges();       
        return Json(new { message="successfully deleted"});
    }

    If you really want to replace the existing table content with the partial view result (updated tables- your old code), you can do that as well.

    function MyComplete(res) {          
            $("#orderdisplayremark").html(res);
    }

    Hope it helps.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 20, 2016 5:58 PM
  • User-1949524191 posted

    Thanks gens for your help.

    Regards

    Krzysztof

    Friday, October 21, 2016 4:47 PM