Динамическая вставка HTML в View через AJAX - PullRequest
Новая
       17

Динамическая вставка HTML в View через AJAX

0 голосов
/ 24 января 2012

На мой взгляд, я хотел бы вставить таблицу HTML с подробным описанием оборудования пользователя, когда его / ее имя выбрано из выпадающего меню.Я хотел бы сделать это без перезагрузки страницы, поэтому я ищу решение AJAX.Мое текущее решение работает нормально, но я думаю, что там должно быть лучшее решение.

Я использую jQuery, как это (просто сейчас использую <p> теги, и будет очень грязно, еслиЯ пытаюсь закодировать там HTML-таблицу): 

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

Что делает POST-запрос к действию GetCallerEquipment в контроллере AjaxData 

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

    return result;
}

Могу ли я использовать для этого частичное представление?Это кажется лучшим способом, но я понятия не имею, с чего начать, поэтому некоторые советы или ссылки на примеры или учебные пособия будут очень благодарны.

Спасибо.

Ответы [ 2 ]

2 голосов
/ 24 января 2012

Частичное представление было бы здорово.

Просто заставьте свой контроллер вернуть один, а затем сделайте что-то вроде этого: 

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

Вот и все. «Результатом», возвращаемым из запроса get, будет ваш частичный просмотр HTML.

1 голос
/ 24 января 2012

Могу ли я использовать для этого частичное представление?

Sure: 

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

и затем внутри вашего GetCallerEquipment.cshtml частичного: 

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

и затем: 

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