Question

In my view, I would like to insert an HTML table detailing a user’s equipment when his/her name is selected from a drop down menu. I’d like to do this without reloading the page, so I’m looking for an AJAX solution. My current solution is working fine, but I think that there must be a better solution out there.

I’m using jQuery like this (just using <p> tags at the moment, and would get very messy if I try to code a HTML table in there):

$.getJSON(url, { networkName: $('#Incident_Caller_DomainUserID option:selected').text() }, function (data) {
    $('#EquipmentList').empty();
    $.each(data, function (index, optionData) {
        $('#EquipmentList').append('<p>' + optionData.Product + '</p>');
    });
});

Which does a POST request to the GetCallerEquipment Action in the AjaxData Controller

public JsonResult GetCallerEquipment(string networkName)
{
    JsonResult result = new JsonResult();
    result.Data = repository.GetCallerEquipment(networkName);
    result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;

    return result;
}

Could I use a partial view for this? That seems the best way to go about it, but I have no idea where to start, so some advise or links to examples or tutorials would be very much appreciated.

Thanks.

Answer 1

A partial view would be great.

Just make your controller return one, and then do something like this:

$.get('@Url.Action("YourActionName", "YourControllerName")', 
       { anydata: youmaywanttopass },
       function(result) { 
           $("#EquipmentList").html(result);
       }
);

That’s it. The “result” returned from the get-request will be your partial view html.