Dynamically inserting HTML into View through AJAX

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.

JQuery+swapping out HTML tables? Sounds like you want datatables.net — Duke Hall
– Duke Hall, Commented Jan 24, 2012 at 12:48

Andreas Eriksson · Accepted Answer · 2012-01-24 12:50:00Z

2

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.

answered Jan 24, 2012 at 12:50

Andreas Eriksson

9,0278 gold badges52 silver badges66 bronze badges

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

Comments

Darin Dimitrov · Accepted Answer · 2012-01-24 12:51:33Z

1

Could I use a partial view for this?

Sure:

public ActionResult GetCallerEquipment(string networkName)
{
    var model = repository.GetCallerEquipment(networkName);
    return PartialView(model);
}

and then inside your GetCallerEquipment.cshtml partial:

@model SomeViewModel
<table>
    ...
</table>

and then:

var networkName = $('#Incident_Caller_DomainUserID option:selected').text();
$('#someContainer').load(url, { networkName: networkName });

answered Jan 24, 2012 at 12:51

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

Collectives™ on Stack Overflow

Dynamically inserting HTML into View through AJAX

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related