Asp.net mvc 在局部视图中填充表

我有两个模型课

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; }
}

公共类声明//进入主视图
{
公共int Id{get；set；}
公共字符串ClaimName{get；set；}
公共列表ClaimList{get；set；}
}
public class ClaimDetails//我希望在局部视图中显示的类
{
公共int-ClaimNumber{get；set；}
公共字符串客户端{get；set；}
公共整数金额{get；set；}
公共字符串类型{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);
    }

公共类索赔控制器：控制器
{
公共行动结果索引（）
{
索赔=新索赔（）；
权利要求。Id=1；
claims.ClaimName=“Ashton”；
返回视图（索赔）；
}
[HttpPost]
public ActionResult SearchList（string enterdNumber）//单击按钮，我使用ajax调用来到这里
{
ClaimDetails cD=新的ClaimDetails（）；
索赔cms=新索赔（）；
cms.ClaimList=新列表（）；
cD.ClaimNumber=10；
cD.Client=“Ashton”；
cD.金额=2900；
cD.Type=“供应商”；
cms.ClaimList.Add（cD）；
ClaimDetails cDD=新的ClaimDetails（）；
cDD.ClaimNumber=10；
cDD.Client=“Ashton”；
cDD.金额=2900；
cDD.Type=“供应商”；
cms.ClaimList.Add（cDD）；
返回PartialView（“搜索列表”，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>

@使用BusinessLayer
@模型业务层
@{
ViewBag.Title=“Index”；
}
@LabelFor（m=>m.Id）：@Model.Id
@Html.LabelFor（m=>m.ClaimName）：@Model.ClaimName
搜寻
@Html.Partial（“搜索列表”，Model.ClaimList）
$（文档）.ready（函数（）{
$（“#searchBtn”）。在（“单击”，函数（）{
var enteredNum=$（“#searchNumber”）.val（）；
$.ajax({
类型：“POST”，
url:“/Claims/SearchList”，
数据：{enterdNumber:enteredNum}
});
});
});

我的偏见,

@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>

@model BusinessLayer.Claims

@ActionLink（“新建”、“创建”）

索赔编号
客户
数量
类型
@if（Model.ClaimList！=null）
{
foreach（Model.ClaimList中的var项）
{
@项目.索赔编号
@项目.客户
@项目.金额
@项目.类型
}
}

---

我的控件进入我的部分视图页面，我使用断点确认了该页面，它也会在foreach循环中迭代，但仍然不会将行放入我的表中。请帮助了解我的错误所在，或者可能是我的部分视图方法本身有误？

您返回的是部分视图，但没有对其进行任何操作。您需要在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>

//添加id属性
@Html.Partial（“搜索列表”，Model.ClaimList）

旁注：

您可能需要考虑包括<代码>和<代码> <代码> 元素，并具有仅返回

元素，以最小化每个ajax中传输的数据 打电话

您的方法似乎只是基于过滤器获取数据，所以 方法可以是GET而不是POST