Question

我想选择一行网格并在tabstrip上显示详细信息行。应该附上相同的图像。

任何人都可以帮助我吗？我使用的是asp.net mvc 4 + Kendo Ui控件。

图片为here。

文件 CandidateController.cs

public ActionResult Index()
    {
        return View();
    }

    public ActionResult Can_Read([DataSourceRequest]DataSourceRequest request)
    {
        return Json(GetAllCan().ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
    }

    public ActionResult Can_ReadId([DataSourceRequest]DataSourceRequest request, Guid id)
    {
        return Json(GetCanById(id).ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
    }

在部分视图中： 候选人信息

@model RecruitmentOnlineMVC.Models.CandidateViewModel

    <div class="candidate-detail" style="width: 827px!important">
        <table>
            <tr>
                <th>Candidate Name</th>
                <td>@(Html.TextBoxFor(model => model.CandidateName, new { @class = "k-input k-textbox" }))</td>
                <th>ID</th>
                <td>@Html.TextBoxFor(model => model.ID, new { @class = "k-input k-textbox" })</td>
            </tr>
            <tr>
                <th>Email</th>
                <td>@Html.TextBoxFor(model => model.Email, new { @class = "k-input k-textbox" })</td>
                <th>Phone</th>
                <td>@Html.TextBoxFor(model => model.Phone, new { @class = "k-input k-textbox" })</td>
            </tr>
        </table>
    </div>

在 查看索引

中

@model RecruitmentOnlineMVC.Models.CandidateViewModel
    @(Html.Kendo().Splitter()
      .Name("splitter")
      .Panes(panes =>
          {
              panes.Add()
                   .Content(@<div>
                       @(Html.Kendo().Grid<RecruitmentOnlineMVC.Models.CandidateViewModel>()
                                        .Name("grid")
                                        .Columns(columns =>
                                        {
                                            columns.Bound(c => c.CandidateName);
                                            columns.Bound(c => c.ID);
                                        })
                                        .Selectable(selectable => selectable
                                                    .Mode(GridSelectionMode.Single))
                                        .DataSource(dataSource => dataSource
                                            .Ajax()
                                            .PageSize(20)
                                            .Read(read => read.Action("Can_Read", "Candidate"))
                                         )
                                        .Pageable(pageable => pageable.ButtonCount(3))
                                        .Filterable()
                                        .Sortable()
                                        .ColumnMenu()
                                        .Events(e => e.Change("onSelected"))
                                    )
                   </div>)
                   .Scrollable(true)
                   .Collapsible(true)
                   .Size("370px");

              panes.Add()
                   .Content(@<div>
                       @(Html.Kendo().TabStrip()
                                      .Name("tabstrip")
                                      .Items(tabstrip =>
                                          {
                                              tabstrip.Add().Text("Candidate Detail")
                                                      .Selected(true)
                                                      .LoadContentFrom("/Candidate/CandidateInfo");

                                              tabstrip.Add().Text("Work History")
                                                      .LoadContentFrom("/Candidate/WorkHistory");

                                          })
                                )
                   </div>);
          }))

脚本

<script>
function onSelected() {
    var can = this.select();
    var propId = this.dataItem(can).ID;

\\在这里，我想在Controller上使用propId进行调用操作，并在Tabstrip上返回详细信息

任何人都可以帮助我吗？非常感谢！

我想按照这样的流程处理：

here

请指导我。非常感谢！

Answer 1

您需要使用Json http post在您的控制器中创建一个单独的功能并从OnSelected（）函数调用ajax请求..

以下是示例 //获取公司列表

 [HttpPost]
    public JsonResult GetCandidateDetails(string propId)
    {
       var Model= repository.GetCnadidatedetails(propId);  

        return Json(Model), JsonRequestBehavior.AllowGet);
    }

<script>
function onSelected() {
    var can = this.select();
    var propId = this.dataItem(can).ID;
     var dataItem = this.dataItem(e.item.index());
            $.ajax({    

                url: '@Url.Action("GetCnadidatedetails", "Controller")',  
                //note: only string type is allowed as paramater to send to controller                  
                data: { propId : this.propId }, 
                dataType: "json",
                type: "POST",
                statusCode: {
                    404: function () {
                        showMessage("page not found.");
                    }
                },
                error: function () {

                    alert("error");

                },
                success: function (result) {

                    //add your result to tabstripe
                    $("#tabstrip").add(result.Id+result.Name); 

                }
            });

如何使用Kendo Grid和Tabstrip创建页面

1 个答案: