asp.net 如何通过搜索只显示表中的数据,net核心剃刀，我有这个数据视图上的表我想出现行搜索时只

'如何通过只搜索来显示表中数据.net core razor，我在表中有这个数据视图，我只想在搜索时显示行'

<tbody id="tblBody" >
@{
    foreach (var item in Model.Patients)
    {
            <tr id="row_@item.Id">

                <td id="patientName_@item.Id" class="table-cell-arabic">@item.PatientName</td>
                <td id="phone_@item.Id">@item.Phone</td>
                <td id="Diseases_@item.Id">@item.Diseases</td>
                <td>
                    <button class="btn btn-danger btn-xs sm-btn-table" type="button" onclick="OnDelete(@item.Id)">Delete</button>
                    <button class="btn btn-success btn-xs sm-btn-table" type="button" onclick="OnEdit(@item.Id)">Edit</button>
                    <button class="btn btn-success btn-xs sm-btn-table" type="button" onclick="OnDetails(@item.Id)">Details</button>

                </td>
            </tr>
        
    }
}

</tbody>

是否要通过搜索按钮加载数据，如下所示（以Id为例）：
Index.cshtml.cs:

public void OnGet()
{
}

public JsonResult OnGetTest(int Id)
{
     if (Id == 0)
     {
          var patient = (from m in _context.Patient select m).ToList();
          return new JsonResult(patient);
     }
     else
     {
          var patient = (from m in _context.Patient select m).Where(c => c.Id == Id).ToList();
          return new JsonResult(patient);
     }
}

Index.cshtml:

<div>
    <input id="Search" />
    <button class="btn-primary" onclick="Test()">Search</button>
</div>
<div>
    <table class="table">
        <thread>
            <tr>
                <td>PatientName</td>
                <td>Phone</td>
                <td>Diseases</td>
            </tr>
        </thread>
        <tbody id="tbody">
        </tbody>
    </table>
</div>

<script>
    function Test() {
        $.ajax({
            url: '?handler=Test&id=' + $("#Search").val(),
            success: function (result) {
                var html = "";
                for (var i = 0; i < result.length; i++) {
                    html += "<tr><td id='patientName_'" + result[i].id + ">" + result[i].patientName + "</td>"
                        + "<td id='phone_'" + result[i].id + ">" + result[i].phone + "</td>"
                        + "<td id='Diseases_'" + result[i].id + ">" + result[i].diseases + "</td></tr>"
                }
                $("#tbody").html(html);
            },
            error: function (error) {
                console.log(error);
            }
        });
    }
</script>

结果：
搜索前：

搜索后：

如果您使用MVC：
控制器：

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

        [HttpPost]
        public IActionResult Index(int Id)
        {
            if (Id == 0)
            {
                var patient = (from m in _context.Patient select m).ToList();
                return Json(patient);
            }
            else 
            {
                var patient = (from m in _context.Patient select m).Where(c => c.Id == Id).ToList();
                return Json(patient);
            }
            
        }

查看方式：

<div>
    <input id="Search"/>
    <button class="btn-primary" onclick="Test()">Search</button>
</div>
<div>
    <table class="table">
        <thread>
            <tr>
                <td>PatientName</td>
                <td>Phone</td>
                <td>Diseases</td>
            </tr>
        </thread>
        <tbody id="tbody">

        </tbody>
    </table>
</div>

<script>
    function Test()
    {
        $.ajax({
            type: 'POST',
            url: "/Home/Index",
            data: { id: $("#Search").val()},
            success: function (response) {
                var html = "";
                for(var i=0;i<response.length;i++)
                {
                    html += "<tr><td id='patientName_'" + response[i].id + ">" + response[i].patientName + "</td>"
                        + "<td id='phone_'" + response[i].id + ">" + response[i].phone + "</td>"
                        + "<td id='Diseases_'" + response[i].id + ">" + response[i].diseases + "</td></tr>"
                }
                $("#tbody").html(html);
            },
            error: function(error){
                console.log(error);
            }
        });
    }
</script>

这就是你想要的吗？

asp.net 如何通过搜索只显示表中的数据,net核心剃刀，我有这个数据视图上的表我想出现行搜索时只

1条答案

相关问题

热门标签

最新问答