refresh a partial view in a main view after an action occurs inside that partial view

Question

I have a partial view that sits in my main view like this:

 <div id="complaintlist">
    @Html.Action("ShowCaseComplaints", "Cases", new { caseid = Model.CasesID })
</div>

This is the partial view:

@model IEnumerable<cummins_db.ViewModels.CaseComplaintsViewModel>

<table width="100%">
 <tr>
    <th></th>
    <th></th>
    <th>Complaint Code</th>
    <th>Complaint Description</th>
    <th>Delete</th>
</tr>  
@foreach (var item in Model)
    {
<tr>
    <td>
         @Html.HiddenFor(modelItem => item.CasesID )    
    </td>
    <td>
        @Html.HiddenFor(modelItem => item.CaseComplaintID )    
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.ComplaintCode )    
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.ComplaintType)
    </td>
    <td>
        @Ajax.ActionLink("Delete", "RemoveCodeFromCase", "Cases", new { caseid = item.CasesID, id = item.CaseComplaintID }, null)
    </td>        
 </tr>
    }
 </table>

This partial view has an action that allows the user to remove a record from the model in the partial view. Here is the action called RemoveCodeFromCase:

public ActionResult RemoveCodeFromCase(int caseid, int id)
        {
        if (ModelState.IsValid)
            {
            CaseComplaint c = db.CaseComplaints.Find(id);
            db.CaseComplaints.Remove(c);
            db.SaveChanges();

            var data = (from C in db.CaseComplaints
                        where C.CasesID == caseid
                        select new CaseComplaintsViewModel()
                        {
                            CasesID = C.CasesID,
                            CaseComplaintID = C.ComplaintCodeID,
                            ComplaintCode = C.ComplaintCode.ComplaintCodeName,
                            ComplaintType = C.ComplaintCode.ComplaintType
                        }).ToList();


            return PartialView("_CaseComplaintCodes", data);

            }

        return PartialView("_CaseComplaintCodes");
        }

I am trying to understand how to refresh my partial view after this action runs.

Thx

Have you considered using Ajax so you don't have to refresh the entire page? Similar question [here](http://stackoverflow.com/questions/6339260/how-to-refresh-partial-view-without-refreshing-the-complete-page-in-mvc) — Mark Walsh, Oct 29 '12 at 14:40

score 2 · Accepted Answer · answered Oct 29 '12 at 16:03

The Ajax extension method you're using will use jQuery Unobtrusive Ajax extensions, which will allow you to render the result client-side. You need to include jquery.unobtrusive-ajax.js in your view, then specify the target id where you'd like to render the result of your action. Assuming it's the original container, it would look like this:

@Ajax.ActionLink("Delete", "RemoveCodeFromCase", "Cases", new { caseid = item.CasesID, id = item.CaseComplaintID },  new AjaxOptions { UpdateTargetId = "complaintlist" }, null)

score 1 · Answer 2 · answered Oct 29 '12 at 14:17

1

I you have to use ajax in order to achieve what you want to achieve because without the page cannot be refreshed as your action happens please read this article

http://www.codemein.net/2012/05/how-to-refresh-partial-view-with-ajax-asp-net/

answered Oct 29 '12 at 14:17

COLD TOLD

13,513
3
35
52

That article makes perfect sense. Can I call the controller action from the partial view to refresh it or does it have to be called from the parent view? – Ryan Oct 29 '12 at 14:43
If it possible i would recommend to call it from the parent view because then you can also make this button do a jquery action to refresh the partial view – COLD TOLD Oct 29 '12 at 15:01
Ok, what my intended functionality would be is to have the action complete when the user clicks the ActionLink called Delete in my partial view. I would like the partial view to refresh when that record gets removed and return the new model to the partial view. – Ryan Oct 29 '12 at 15:14
you can still do it the same way it not really matter where you call the action from partial view or from parent view the link is on the page so when the ActionLink called Delete the you need top call the jquery function to also revresh the partial view – COLD TOLD Oct 29 '12 at 15:27
ok, so bear with me, Do I call the jquery function from the controller action that deletes the record or call the jquery function from the action link which in turn calls the controller action? – Ryan Oct 29 '12 at 15:39
yep action link which in turn calls the controller action think of it as a regular link on your html page because when everythink renders the page is still a regular html page so you just take a delete link and call the jquery action with it – COLD TOLD Oct 29 '12 at 15:55

refresh a partial view in a main view after an action occurs inside that partial view

2 Answers2