使用 ASP.NET Core 5 MVC 将 Json 结果转换为 HTML 形式

Question

我想在从下拉列表 select 编辑 ID 时显示与特定卡相关的余额 select 并在 [enter image description here][1 中显示余额值]在表格上输入。

但是当我在运行程序中时，我得到的只是 JSON 结果。我的表格没有出现

控制器中的测试动作：

public IActionResult Test()
{
    var data = from als in ctx.TbIstanbulCards select new { als.IstanbulCardId, als.Balance };
    return Json(data.ToList());
}

Index 视图（测试）

@model VmIstanbul

@section Scripts{
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>

    <script>
        $(document).ready(function () {
            var options = {};
            options.url = "/Customer?handler=SelectAll";
            options.type = "GET";
            options.dataType = "json";
            options.success = function (data) {
                data.forEach(function (element) {
                    $("#customerid").append("<option>
        "
        + element.IstanbulCardId + "
    </option > ");
            });
            };
            options.error = function () {
                $("#msg").html("Error while
    making Ajax call!");
        };
            $.ajax(options);
        });

        $("#customerid").change(function () {
            var options = {};
            options.url = "/Customer/" +
                $("#customerid").val() + "?handler=SelectByID";
            options.type = "GET";
            options.dataType = "json";
            options.success = function (data) {
                $("#companyname").val(data.Balance);
                //$("#contactname").val(data.contactName);
                //$("#country").val(data.country);
            };
            options.error = function () {
                $("#msg").html("Error while making Ajax call!");
            };
            $.ajax(options);
        });


</script>

}
<form id="myForm" asp-controller="Customer" asp-action="Test">
    <label for="departmentsDropdown"><b>Card</b></label>
    <select class="form-control" onchange="getValue()" id="departmentsDropdown" name="departmentsDropdown"></select><br />
    <input type="text" value="" id="show" />
</form>

结果是这样的

https://i.stack.imgur.com/sqDVl.png

Answer 1

从你的代码中看不清楚，因为 ajax url 是 razor 页面路由而不是 mvc。您是否同时启用了它们？

此外，从您之前的 post 我看到视图名称是 Test.cshtml，而 Test 操作 return Json，所以当您访问 /Custom/Test，您只会得到 Json 结果，而不是视图。

如果用Test动作来显示html视图，我觉得应该是return视图：

public IActionResult Test()
{
    return View();
}

更新：

对return视图（Test.cshtml）进行操作（测试）。只是 reutn View() 没有任何数据，因为我没有看到您在视图中使用模型 (VmIstanbul) 值的任何地方。

public IActionResult Test()
{
    
    return View();
}

对 return 数据进行另一个操作 ajax，给它起一个除 Test 之外的名称。例如：

public IActionResult TestSelect()
{
    var data = from als in ctx.TbIstanbulCards select new { als.IstanbulCardId, als.Balance };
    return Json(data.ToList());
}

并将 ajax url 更改为 TestSelect

@section Scripts{
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: "GET",
                url: "/Customer/TestSelect",
                success: function (data) {
                    console.log(data);
                    var s = '<option value="-1">Please Select a Card id</option>';
                    for (var i = 0; i < data.length; i++) {
                        s += '<option value="' + data[i].balance + '">' + data[i].istanbulCardId + '</option>';
                    }
                    $("#departmentsDropdown").html(s);
                }
            })
        })

        function getValue() {
            var myVal = $("#departmentsDropdown").val();
            $("#show").val(myVal);
        }
    </script>
}

结果：

使用 ASP.NET Core 5 MVC 将 Json 结果转换为 HTML 形式

Convert Json results into HTML form using ASP.NET Core 5 MVC

json

forms

asp.net-core-mvc

dropdown

asp.net-core-5.0