Ajax发布不返回视图数据 DeviceData.cshtml Datacontroller.cs

问题描述

我正在使用ajax发布来调用控制器方法DeviceData()。它不返回视图数据。
当我尝试调试代码时，controller.cs和.cshtml中的值均分配给viewBag，但浏览器未显示任何数据。代码不返回任何错误。在ajax调用之后，它仅显示patientDDL。

我需要显示我在viewBag中分配的“ deviceName日期等。”

这是我的代码：

DeviceData.cshtml

@model Hospital.Models.DeviceModel
<div class="row">
  <div class="col-md-12">
    <div id="pdf" class="pull-left">
      <table>
        <tr>
          <td class="blue-bgcolor">Patient List : </td>
          <td>
            @Html.DropDownList("FromJson",new SelectList(Enumerable.Empty <SelectListItem>()),"select",new { Class = "form-control",onchange = "SelectedIndexChanged()" })
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>
<div class="row">
  <table class="table valign-middle">
    <tbody>
      <tr>
        <td>Device Name</td>
        <td>@ViewBag.deviceName</td>
      </tr>
      <tr>
        <td>DateTime</td>
        <td>@ViewBag.date</td>
      </tr>
      <tr>
        <td>SPO2</td>
        <td>@ViewBag.spo2</td>
      </tr>
      <tr>
        <td>PR</td>
        <td>@ViewBag.pr</td>
      </tr>
    </tbody>
  </table>
</div>
<script type="text/javascript">
  $(document).ready(function() {
    $.ajax({
        url: "PatinetDDl",type: "GET",contentType: "application/json; charset=utf-8",datatype: JSON,success: function(result) {
            $(result).each(function() {
                $("#FromJson").append($("<option></option>").val(this.Value).html(this.Text));
            });
        },error: function(data) {}
    });
  });
</script>
<script type="text/javascript">
  function SelectedIndexChanged() {
      var pid = $("#FromJson").val();
      alert(pid);
      $.ajax({
          url: '/Data/DeviceData',type: 'POST',datatype: 'json',//contentType: 'application/json',data: { pid: +pid },success: function (result) { },error: function () { alert("Whooaaa! Something went wrong..") },});
  }
</script>

Datacontroller.cs

public JsonResult PatinetDDl()
{
    Common.DBConnect.fnconchk(con);
    DataTable dtpatient = new DataTable();
    string query = "";
    query = "select Preg_id,P_Name from Patient_Reg";
    SqlCommand cmd2 = new SqlCommand(query,con);
    SqlDataAdapter da = new SqlDataAdapter(cmd2);
    da.Fill(dtpatient);

    List<SelectListItem> ObjList = new List<SelectListItem>();

    foreach (DataRow row in dtpatient.Rows)
    {
        ObjList.Add(new SelectListItem()
        {
            Text = row["P_Name"].ToString(),Value = row["Preg_id"].ToString()
        });
    }
    var jsonData = ObjList;
    return Json(jsonData,JsonRequestBehavior.AllowGet);
}


[HttpGet]
public ActionResult DeviceData()
{
    DeviceModel obj = new DeviceModel();
    return View(obj);
}

[HttpPost]
public ActionResult DeviceData(string pid)
{
    DeviceModel obj = new DeviceModel();
    DataTable dt = new DataTable();
    Common.DBConnect.fnconchk(con);
    if (pid != null)
    {
        string query = "";
        query = " select D_Name,Date_Time,D_Value1 from readings where pid='" + pid;
        SqlCommand cmd2 = new SqlCommand(query,con);
        SqlDataAdapter da = new SqlDataAdapter(cmd2);
        da.Fill(dt);
        ViewBag.deviceName = dt.Rows[0]["D_Name"].ToString();
        ViewBag.date = dt.Rows[0]["Date_Time"].ToString();
        ViewBag.spo2 = dt.Rows[0]["D_Value1"].ToString();
        ViewBag.pr = dt.Rows[0]["D_Value2"].ToString();
    }
    return View(obj);
}

解决方法

您想要更改很多东西以获得期望输出。

第一

创建局部视图名称 _deviceInfo.cshtml

<table class="table valign-middle">
    <tbody>
      <tr>
        <td>Device Name</td>
        <td>@ViewBag.deviceName</td>
      </tr>
      <tr>
        <td>DateTime</td>
        <td>@ViewBag.date</td>
      </tr>
      <tr>
        <td>SPO2</td>
        <td>@ViewBag.spo2</td>
      </tr>
      <tr>
        <td>PR</td>
        <td>@ViewBag.pr</td>
      </tr>
    </tbody>
  </table>

第二

更改控制器的操作方法

[HttpPost]
public PartialViewResult DeviceData(string pid)
{
    DeviceModel obj = new DeviceModel();
    DataTable dt = new DataTable();
    Common.DBConnect.fnconchk(con);
    if (pid != null)
    {
        string query = "";
        query = " select D_Name,Date_Time,D_Value1 from readings where pid='" + pid;
        SqlCommand cmd2 = new SqlCommand(query,con);
        SqlDataAdapter da = new SqlDataAdapter(cmd2);
        da.Fill(dt);
        ViewBag.deviceName = dt.Rows[0]["D_Name"].ToString();
        ViewBag.date = dt.Rows[0]["Date_Time"].ToString();
        ViewBag.spo2 = dt.Rows[0]["D_Value1"].ToString();
        ViewBag.pr = dt.Rows[0]["D_Value2"].ToString();
    }
    return PartialView(obj);
}

第三

DeviceData.cshtml 中的

Ajax方法

@model Hospital.Models.DeviceModel
<div class="row">
  <div class="col-md-12">
    <div id="pdf" class="pull-left">
      <table>
        <tr>
          <td class="blue-bgcolor">Patient List : </td>
          <td>
            @Html.DropDownList("FromJson",new SelectList(Enumerable.Empty <SelectListItem>()),"select",new { Class = "form-control",onchange = "SelectedIndexChanged()" })
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>
<div class="row" id="device-data">
  
</div>
<script type="text/javascript">
  $(document).ready(function() {
    $.ajax({
        url: "PatinetDDl",type: "GET",contentType: "application/json; charset=utf-8",datatype: JSON,success: function(result) {
            $(result).each(function() {
                $("#FromJson").append($("<option></option>").val(this.Value).html(this.Text));
            });
        },error: function(data) {}
    });
  });
</script>
<script type="text/javascript">
  function SelectedIndexChanged() {
      var pid = $("#FromJson").val();
      alert(pid);
      $.ajax({
          url: '/Data/DeviceData',type: 'POST',datatype: 'html',//contentType: 'application/json',data: { pid: +pid },success: function (result) {
$('#device-data').html(result);
 },error: function () { alert("Whooaaa! Something went wrong..") },});
  }
</script>

希望它对您有用：）

,

问题是您按操作结果（html）返回视图，但是在第二个ajax脚本中使用了数据类型json。 像这样编辑SelectedIndexChanged：

function SelectedIndexChanged() {
      var pid = $("#FromJson").val();
      alert(pid);
      $.ajax({
          url: '/Data/DeviceData',success: function (data) { 
            $('#placeHolder').html(data);
          },});
  }

别忘了在要显示DeviceData的位置添加placeHolder元素：

<div id="#placeHolder"></div>