Question

我有两个模型类，

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循环但仍然没有将行放入我的表中...帮助知道我出错的地方是赞赏，或者可能是我对部分观点的看法本身就错了吗？

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

附注：

您可能需要考虑包含＆lt; table>和<thead> 主视图中的元素并且只有部分返回 <tbody>个元素，用于最小化每个ajax中传输的数据调用
您的方法似乎只是根据过滤器获取数据，所以该方法可以是GET而不是POST

在局部视图中填充表

1 个答案: