Asp.net Core 3.1，使用Ajax在视图上显示json数据答案

【问题标题】：Asp.net Core 3.1, using Ajax to display json data on viewAsp.net Core 3.1，使用Ajax在视图上显示json数据
【发布时间】：2019-12-28 19:57:01
【问题描述】：

我想从 GetPatient 函数加载视图上的标签以进行创建。这就是我到目前为止所拥有的，它通过 id 获取数据，但没有将其作为 json 或显示在所述标签上。我该如何解决这个问题？


 // GET: Appointments/Create
        public IActionResult Create(int id = 0)
        {
            if (id == 0)
                return View(new Appointments());
            else
                return View(_context.Appointments.Find(id));

        }

        [HttpGet]
        public JsonResult GetPatient(int id = 0)
        {
            var Pt = _context.Mstr_Patients.Find(id);
            return Json(Pt);
        }
-------- Create View------------
<script>
            function GetPatient() {
            var url = "@Url.Action("GetPatient")";
            var id = $("#PID").val();
            $.get(url, { id: id }, function (data) {
                $("#PID").html(data.PatientID);
            });
        }
        $("#btnSearch").on("click", GetPatient);
</script>

【问题讨论】：

我在您的代码中看不到任何问题，它应该可以正常工作。当您说“但不将其作为 json 返回”时，它实际返回的是什么？你检查过浏览器开发者控制台吗？
@Roman.Pavelko 我该怎么做？我是新手！
如果您使用的是 Chrome，请按 F12，转到 Network 选项卡，选择 XHR 选项卡，单击视图上的按钮并检查控制台中出现的“GetPatient”结果。

标签： c# asp.net asp.net-mvc asp.net-core model-view-controller

【解决方案1】：

也许你可以试试这个：

[HttpGet]
public IActionResult GetPatient(int id = 0)
{
     if (id == 0)
     {
         return View(new Appointments());
     } 
     else
     {
         var patient = _context.Mstr_Patients.Find(id);

         if(patient == null)
         { 
             return StatusCode(404);
         } 

         var serialized = JsonConvert.SerializeObject(patient);

         //This will make your content-type as JSON.
         return Content(serialized, "application/json");
      }   
}

在您的视图中：

<script>

    function GetPatient(){
       var PID = document.getElementById("#PID");  
       var id = PID.val();
       $.ajax({
            type: "GET",            
            url: "@Url.Action("GetPatient")";
            contentType: "application/json",
            dataType: "json",
            data: {"id": id}
            success: function (data) {
                $("#PID").html(data.PatientID);
            }
     }

     var btnSearch = document.getElementById("#btnSearch");

     btnSearch.onclick = () => {
            GetPatient();
     }

</script>

注意：我不能 100% 确定，但在您的 AJAX 调用中，您可能需要更改： data: {"id": id} 到 data: {id: id}

【讨论】：

试过了，脚本没有调用 Getpaient 函数，我知道为什么。脚本上是否有任何语法错误？我似乎无法弄清楚。单击按钮时没有任何反应。
我已经更改了上面的onclick功能，你可以试试这个吗？你应该调试这个，我的意思是关于“onclick”函数或“ajax”调用的错误