partial view refresh using jQuery

0
votes

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
    });
2
asp.net-mvc-3jqueryrazor
Have you tried returning the CaseCompliant model with the partial view in the SelectForCase action? For example return PartialView("_CaseComplaintCodes", c);. And of course return a temporary model if state is not valid. – Mario S
@Mario thanks. I just tried that, and the response is html with no data. <table width="100%"> <tr> <td> </td> <td> </td> </tr> </table> – Ryan
So you're getting empty parameters for SelectForCase(int caseid, int compid, string compname) action when calling it? Or are you sending in an empty model? Didn't understand if it works for you or not. – Mario S
The SelectForCase is working fine. I am getting an empty model in the return trip. – Ryan

2 Answers

1
votes

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>
0
votes

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