通过AJAX将HTML动态插入View

本文关键字：插入 View 动态 HTML AJAX 通过 | 更新日期: 2023-09-27 18:21:28

在我看来，当从下拉菜单中选择用户的姓名时，我想插入一个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>');
    });
});

哪个对AjaxData控制器中的GetCallerEquipment Action执行POST请求

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

我可以用局部视图吗？这似乎是最好的方法，但我不知道从哪里开始，所以请提供一些建议或链接到示例或教程。

谢谢。

通过AJAX将HTML动态插入View

局部视图会很好。

只要让你的控制器返回一个，然后做这样的事情：

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

就是这样。get请求返回的"结果"将是您的部分视图html。

我可以用局部视图吗？

当然：

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 });
相关文章：