Jquery 从剑道栅格自定义命令在局部视图中加载局部视图

我在mvc父视图的jquery选项卡中显示了一个局部视图

<div id="tabs">
<ul>
    <li><a href="#CompanyDetails">Company Details</a></li>
    <li><a href="@Url.Action("AnnualReviews", "ManageCompanies", new { id = TempData["AnnReviewTabCompanyId"] })">Annual Reviews</a></li>
</ul>
<div id="CompanyDetails">

    @Html.Partial("CompanyProfilePartial")
</div>

我想在这里显示子部分视图，基于id值，它应该显示一个包含更多记录的子网格

AnnualReviewByPlan自定义命令正在调用一个javascript函数，并传递该行记录的id。 我在这个函数中要做的是在这个部分中加载另一个部分视图，它将显示另一个网格，也许剑道网格，稍后会决定。 这可能吗？如果可能，我该怎么做？在这里可以找到更好的解决方案。

---

干杯。

视图呈现后，加载部分视图的唯一方法是通过Ajax调用，该调用将部分视图返回给JQuery/Javascript，然后相应地更新DOM

服务器： Javascript: 使现代化 [注] 如果用服务器端包装器定义的KiDO-UI小部件取决于放置在PudialVIEW中的JavaScript函数，那么您可能需要考虑。 这是至关重要的，只要您在父窗口中而不是在iframe中包含部分视图，因为kendoui小部件被转换为$function{}，立即执行，并且必须已经定义它们的任何依赖函数

<tbody>
    @(Html.Kendo().Grid<OriginGreen.Models.AnnualReviewViewModel>()
    .Name("AnnualReviews")
    .Columns(columns =>
    {
        columns.Bound(p => p.PlanId).Title("Plan").Visible(true).Width(50);
        columns.Bound(p => p.Duration).Title("Duration").Width(50);
        columns.Bound(p => p.BaseYear).Title("Base Year").Width(50);
        columns.Bound(p => p.MinYear).Title("Min Year").Width(50);
        columns.Bound(p => p.MaxYear).Title("Max Year").Width(50);
        columns.Bound(p => p.AnnReviewYear).Title("Ann. Review Year").Width(50);
        columns.Bound(p => p.Status).Title("Status").Width(100);
        columns.Bound(p => p.AnnReviewDate).Title("AR Due Date").Width(100);

        columns.Template(x => { }).ClientTemplate("<a href='" + Url.Action("EditPlanAR", "ManageCompanies", new { planId = "#= PlanId #" }) + "'>Edit</a>").Width(30);
        columns.Template(x => { }).ClientTemplate("<a href='" + Url.Action("ViewARLog", "ManageCompanies", new { planId = "#= PlanId #" }) + "'>View Log</a>").Width(30);
        columns.Template(x => { }).ClientTemplate("<a href='" + Url.Action("AnnualReviewsByPlan", "ManageCompanies",  new { planId = "#= PlanId #" }) + "'>View ARs</a>").Width(30);
        columns.Template(x => { }).ClientTemplate("<a class='k-button k-button-icontext k-grid-EditArticle' href='" + Url.Action("Edit", new { id = "#= PlanId #" }) + "'>View AR's</a>").Width(30);
        columns.Command(command => command.Custom("AnnualReviewsByPlan").Click("showAnnReviewByPlan").HtmlAttributes(new { planId = "#= PlanId #" }));

    })
    .Events(e => e.DataBound("onRowBound"))
    .Pageable()
    .Sortable()
    .Scrollable()
    .Selectable()
    .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
    .DataSource(dataSource => dataSource
                            .Ajax()
                            .ServerOperation(false)
                            .PageSize(10)
                            .Batch(true)
                            .Model(model =>
                            {
                                model.Id(p => p.PlanId);
                            })
                            .Read(read => read.Action("DisplayAnnReviewPlans", "ManageCompanies", new { companyId = ViewContext.RouteData.Values["id"]}).Type(HttpVerbs.Get))
                        )

    )
</tbody>

function showAnnReviewByPlan(e)
{
    //alert("Hello World1");
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

    var id = dataItem.id;
    alert(id);

    //alert("div hidden, lets show it");
    $('#AnnReviewsByPlan').show();
}

[HttpGet]
public ActionResult YourAction(string id)
{
  //ToDo custom logic here
  return PartialView("YourView");
}

function showAnnReviewByPlan(e)
{
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

    var id = dataItem.id;

    $.ajax({
      type: "GET"
      url: '/YourController/YourAction',
      data : { id: id },
      success: function (data, textStatus, jqXHR) {
          $('#AnnReviewsByPlan').html(data);
     }
    });
}