partial view refresh using jQuery

Question

On my main edit view I have 3 partial views that contain child data for the main view model. I also have html text boxes for entering and saving related data such as notes etc. After an item is entered or select and passed to a controller action, how do I refresh my partial views? Here is the code I have so far but it does not work. I think I need to pass a model back with my partial view? I am using ajax to call my controller method. Partial View:

@model cummins_db.Models.CaseComplaint

<table width="100%">
<tr>
    <td>
        @Html.DisplayFor(modelItem => Model.ComplaintCode.ComplaintCodeName)    
    </td>
   <td>
    @Html.DisplayFor(modelItem => Model.ComplaintCode.ComplaintType)
   </td>

</tr>

</table>

This is the html where the partial view is located:

<div class="editor-label">
    @Html.Label("Search and select a complaint code")
</div>
<div class="textarea-field">
    <input id = "CodeByNumber" type="text" />
</div>   
@Html.ActionLink("Refresh", "Edit", new { id = Model.CasesID })
    <table width="100%">
        <tr>
            <th>Complaint Code</th>
            <th>Complaint Description</th>
        </tr>
        @try
            {
            foreach (var comp_item in Model.CaseComplaint)
                {
                <div id="complaintlist">
                @Html.Partial("_CaseComplaintCodes", comp_item)
                </div>
                }
            }
        catch
            {

            }

    </table>

Here is the controller method that returns the partial view.

public ActionResult SelectForCase(int caseid, int compid, string compname)
        {

        if (ModelState.IsValid)
            {
            CaseComplaint c = new CaseComplaint
            {
                CasesID = caseid,
                ComplaintCodeID = compid
            };
            db.CaseComplaints.Add(c);
            db.SaveChanges();
            }

        return PartialView("_CaseComplaintCodes");

        }

jQuery ajax calling the controller, it is part of an autocomplete function select.

$('#CodeByNumber').autocomplete(
    {

        source: function (request, response) {
            $.ajax({
                url: "/Cases/CodeByNumber", type: "GET", dataType: "json",
                data: { searchText: request.term, maxResults: 10 },
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    response($.map(data, function (item) {
                        return {
                            label: item.ComplaintType,
                            value: item.ComplaintCodeName,
                            id: item.ComplaintCodeID
                        };  //return
                    })  //map
                            );  //response

                }  //success

            });  //ajax 
        }, //source

        select: function (event, ui) {
            var url = "/Cases/SelectForCase";
            $.ajax({
                type: "GET",
                dataType: "html",
                url: url,
                data: { caseid: $('#CaseID').val(), compid: ui.item.id, compname: ui.item.label },
                success: function (result) { $('#complaintlist').html(result); }
            });

        },
        minLength: 1
    });

Answer 1

This is what I ended up doing to make it work. I changed by controller action to this:

public ActionResult SelectForCase(int caseid, int compid)
        {

        if (ModelState.IsValid)
            {
            CaseComplaint c = new CaseComplaint
            {
                CasesID = caseid,
                ComplaintCodeID = compid
            };
            db.CaseComplaints.Add(c);
            db.SaveChanges();

            var m = from d in db.CaseComplaints
                where d.CasesID == caseid
                select d;

            return PartialView("_CaseComplaintCodes", m);
            }

        return PartialView("_CaseComplaintCodes");

        }

It works now

Answer 2

Should the partial view not be as below:

@model cummins_db.Models.CaseComplaint

<table width="100%">
    <tr>
        <td>
            @Html.DisplayFor(m => m.ComplaintCodeName)    
        </td>
        <td>
            @Html.DisplayFor(m => m.ComplaintType)
        </td>
   </tr>
</table>