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
    });

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 S, Commented Jul 5, 2012 at 21:01
@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
– Ryan, Commented Jul 5, 2012 at 21:10
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
– Mario S, Commented Jul 5, 2012 at 21:14
The SelectForCase is working fine. I am getting an empty model in the return trip. — Ryan
– Ryan, Commented Jul 5, 2012 at 21:31

adamsproul · Accepted Answer · 2012-07-05 21:19:31Z

1

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>

answered Jul 5, 2012 at 21:19

adamsproul

911 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ryan Over a year ago

CaseComplaint is a actually a junction table for a many to many.

Ryan · Accepted Answer · 2012-07-08 17:22:16Z

0

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

answered Jul 8, 2012 at 17:22

Ryan

6823 gold badges18 silver badges55 bronze badges

Collectives™ on Stack Overflow

partial view refresh using jQuery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related