从剑道网格自定义命令加载部分视图中的部分视图

Question

我有一个局部视图，它显示在我的 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>

CompanyProfilePartial 在您最初访问该页面时加载，选择“AnnualReviews”选项卡会调用“AnnualReviews”操作，该操作会加载“AnnualReviewsPartial”部分视图。 此视图包含剑道 ui 网格。

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

接收行记录 ID 的 Javascript 函数 -

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

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

AnnualReviewsByPlan 自定义命令正在调用 javascript 函数并传递行记录的 id（它的这一面正在工作）。 我希望在这个函数中做的是在这个局部中加载另一个局部视图，它将显示另一个网格（也许剑道网格，稍后会决定）。 这可能吗？如果可以，我该怎么做？对在这里做什么的任何更好的解决方案持开放态度。 干杯。

Answer 1

一旦你的视图被渲染，加载部分视图的唯一方法是通过 Ajax 调用，它将部分视图返回给你的 JQuery/Javascript，然后相应地更新 DOM。

服务器：

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

Javascript：

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

更新

[注意]
如果您使用服务器端包装器定义的 Kendo UI 小部件依赖于放置在 PartialView 中的 javascript 函数，您可能需要考虑 documentation 的 Deferring Initialization 部分。
只要您将部分视图包含在父窗口中（不在 iframe 中），这一点就很重要，因为 Kendo UI 小部件会被转换为 $(function(){})，这些小部件会立即执行，并且它们的任何依赖函数必须已经定义。