在局部视图中填充表答案

【问题标题】：Populating table in a partial view在局部视图中填充表
【发布时间】：2020-09-28 23:13:14
【问题描述】：

我有两个模型类，

public class Claims //Goes into main view
{
    public int Id { get; set; }
    public string ClaimName { get; set; }
    public List<ClaimDetails> ClaimList { get; set; }
}

public class ClaimDetails //Class I want in my partial view
{
    public int ClaimNumber { get; set; }
    public string Client { get; set; }
    public int Amount { get; set; }
    public string Type { get; set; }
}

我的控制器，

public class ClaimsController : Controller
{
    public ActionResult Index()
    {
        Claims claims = new Claims();
        claims.Id = 1;
        claims.ClaimName = "Ashton";
        return View(claims);
    }
    [HttpPost]
    public ActionResult SearchList(string enterdNumber)//On click of button I come here using ajax call
    {
        ClaimDetails cD = new ClaimDetails();
        Claims cms = new Claims();
        cms.ClaimList = new List<ClaimDetails>();
        cD.ClaimNumber = 10;
        cD.Client = "Ashton";
        cD.Amount = 2900;
        cD.Type = "Vendor";
        cms.ClaimList.Add(cD);
        ClaimDetails cDD = new ClaimDetails();
        cDD.ClaimNumber = 10;
        cDD.Client = "Ashton";
        cDD.Amount = 2900;
        cDD.Type = "Vendor";
        cms.ClaimList.Add(cDD);

        return PartialView("SearchList",cms);
    }

我希望在其中呈现部分视图的主视图，

@using BusinessLayer
@model BusinessLayer.Claims
@{
    ViewBag.Title = "Index";
}
<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/bootstrap.min.js" type="text/javascript"></script>

<div class="row">
    <div class="col-md-6">
        @Html.LabelFor(m => m.Id):@Model.Id
    </div>
    <div class="col-md-6">
        @Html.LabelFor(m => m.ClaimName):@Model.ClaimName
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <input id="searchNumber" placeholder="Enter the number" type="text" />
    </div>
    <div class="row">
        <button id="searchBtn" type="button">Search</button>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        @Html.Partial("SearchList",Model.ClaimList)
    </div>
</div>


<script type="text/javascript">
    $(document).ready(function () {
        $("#searchBtn").on("click", function () {
            var enteredNum = $("#searchNumber").val();
            $.ajax({
                type: "POST",
                url: "/Claims/SearchList",
                data: { enterdNumber: enteredNum }
            });
        });
    });
</script>

我的部分观点，

@model BusinessLayer.Claims
<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>Claim Number</th>
        <th>Client</th>
        <th>Amount</th>
        <th>Type</th>
    </tr>
    <tbody>
        @if (Model.ClaimList != null)
        {
            foreach(var item in Model.ClaimList)
            {
                <tr>
                    <td>@item.ClaimNumber</td>
                    <td>@item.Client</td>
                    <td>@item.Amount</td>
                    <td>@item.Type</td>
                </tr>
            }
        }
    </tbody>
</table>

我的控制权进入了我使用断点确认的部分视图页面，它还遍历了 foreach 循环，但仍然没有将行放入我的表中。感谢帮助知道我哪里出错了，或者可能是我的局部视图方法本身就是错误的？

【问题讨论】：

标签： asp.net-mvc partial-views

【解决方案1】：

你正在返回一个局部视图，但你没有对它做任何事情。您需要在 ajax 函数中包含 success 回调并将部分视图添加到 DOM

$.ajax({
    type: "POST",
    url: '@Url.Action("SearchList", "Claims")', // use this
    data: { enterdNumber: enteredNum },
    dataType: 'html', // add this
    success: function(response) {
        $('#someElement').html(response); // add this (adjust id to suit)
    }
});

并假设您要更新现有的部分，将id 属性添加到现有容器

<div class="row">
    <div class="col-md-12" id="someElement"> // add id attribute
        @Html.Partial("SearchList",Model.ClaimList)
    </div>
</div>

旁注：

您可能需要考虑包括 table> 和 <thead> 主视图中的元素并仅返回部分 <tbody> 元素最小化每个ajax中传输的数据打电话。
您的方法似乎只是根据过滤器获取数据，所以该方法可以是 GET 而不是 POST

【讨论】：