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局部视图。该视图包含一个kendo 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>

Javascript函数收到行的记录ID -

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（它的这一面正在工作）。我想在这个函数中做的是在这个部分中加载另一个局部视图，它将显示另一个网格（也许是kendo网格，将在稍后决定）。这是可能的，如果是的话，我该怎么办呢？如何在这里做更好的解决方案。欢呼声。

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的延迟初始化部分。只要您在父窗口中包含局部视图（不在iframe 中），这是至关重要的，因为Kendo UI小部件被转换为$（function（）{}），这些小部件会立即执行，并且任何一个必须已经定义了相关函数。

在kendo grid custom命令的局部视图中加载局部视图

1 个答案:

服务器：

使用Javascript：

更新