创建Asp.net MVC项目Ajax实现视图页面数据与后端Json传值显示

以下是一个简单的Asp.net MVC项目中使用Ajax来传递Json数据并在视图页面显示的示例。

创建一个MVC项目（如果还没有）。
添加一个模型类（如果还没有）。
在控制器中添加一个Action方法来返回Json数据。
在视图中使用Ajax调用该Action方法，并显示返回的Json数据。

模型类示例（Models/DataModel.cs）:




public class DataModel
{
    public int Id { get; set; }
    public string Name { get; set; }
}

控制器示例（Controllers/HomeController.cs）:




public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
 
    public ActionResult GetData()
    {
        // 示例数据，实际项目中应从数据库获取
        var data = new List<DataModel>
        {
            new DataModel { Id = 1, Name = "Alice" },
            new DataModel { Id = 2, Name = "Bob" }
        };
 
        return Json(data, JsonRequestBehavior.AllowGet);
    }
}

视图示例（Views/Home/Index.cshtml）:




@{
    Layout = null;
}
 
<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
</head>
<body>
    <div id="data-container">
        <!-- 数据将显示在这里 -->
    </div>
 
    <script type="text/javascript">
        $(document).ready(function () {
            fetchData();
        });
 
        function fetchData() {
            $.ajax({
                url: '@Url.Action("GetData", "Home")',
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    var html = '';
                    $.each(data, function (key, value) {
                        html += '<p>ID: ' + value.Id + ', Name: ' + value.Name + '</p>';
                    });
                    $('#data-container').html(html);
                },
                error: function (xhr, textStatus, errorThrown) {
                    console.log('Error fetching data: ' + textStatus);
                }
            });
        }
    </script>
</body>
</html>

在这个示例中，我们使用了jQuery的$.ajax()方法来异步获取后端的HomeController中的GetData Action方法返回的Json数据，并在成功获取数据后，使用JavaScript动态地将数据插入到页面的<div id="data-container">元素中。这样就实现了Ajax的数据传递和页面的动态更新。

创建Asp.net MVC项目Ajax实现视图页面数据与后端Json传值显示

评论已关闭

推荐阅读