Question

我有一个KendoUI Grid返回一些数据，我在一个'.clienttemplate'里面有一个按钮，它绑定到数据Id。当您单击该链接时，它使用Bootstrap 3模式显示部分视图。问题是，尽管id都是不同的，但我总是得到相同的结果（通常是你在页面加载时点击的第一个id）

查看

@(Html.Kendo().Grid<Kendo_Range_Test.ViewModels.VesselViewModel>()
  .Name("Grid")
  .Columns(columns =>
  {
      columns.Bound(c => c.owner_company);           
      columns.Bound(c => c.vessel_name);
      columns.Bound(c => c.vessel_type);                           
      columns.Bound(c => c.fixture_stop);
      columns.Bound(c => c.fixture_location);
      columns.Bound(c => c.fixture_note);
      columns.Bound(c => c.vessel_status);
      columns.Command(command => { command.Edit(); }).Width(180);
     columns.Bound(c => c.vessel_idx)
           .ClientTemplate(
           "<a data-identity='#=vessel_idx#' data-toggle='modal' data-target='\\#myModal' href='" + Url.Action("VesselModal", "BrokerHome") + "/#=vessel_idx #'" + ">Vessel</a>");
  }
  )
  .Editable(editable => editable.Mode(GridEditMode.InLine))
  .Pageable()
  .Reorderable(reorder => reorder.Columns(true))
  .DataSource(dataSource => dataSource
      .Ajax()
      .PageSize(40)
      .Model(model =>
          {
              model.Id(p => p.vessel_idx);
          })
      .Read(read => read.Action("vessels_Read", "BrokerHome"))
      .Update(update => update.Action("vessels_Update", "BrokerHome"))
  )

）

控制器

public ActionResult VesselModal(int? id)                       
    {
        var vessel = db.tbl_vessels.Find(id.Value);
        var vm = Mapper.Map<VesselViewModel>(vessel);
        return PartialView("_VesselDetails", vm);
    }

我注意到的是，当我应用一些断点时，这个控制器方法只能被调用一次而且再也不会被调用，这就是为什么结果在模态中总是相同的原因。我该怎么做才能确保它在每个点击的项目上重新调用该方法，或者我应该以另一种方式执行此模式？

非常感谢

Answer 1

@Yanayaya尝试将该锚点分离并使用ajax + jQuery处理模态？

剃刀

...
columns.Bound(c => c.vessel_idx)
           .ClientTemplate(
           "<a class='getVesselModal' data-identity='#=vessel_idx#' data-toggle='modal' data-target='\\#myModal'>Vessel</a>");
...

脚本

            $(function () {
                $(document).on('click', '.getVesselModal', function () {
                    this.blur();

                    var myID = $(this).data('identity');

                    //I normally use this line..
                    //$('#myModal').html("");

                    $('#myModal').replaceWith($('#myModal').clone());

                    $.ajax({
                        cache: false,
                        type: "GET",
                        url: '@Url.Action("VesselModal", "BrokerHome")?id=' + myID,
                        success: function (response) {
                            $('#myModal').append(response);
                            $('#myModal').modal();
                        },
                        failure: function (response) {
                            alert("Failure");
                        }
                    });

                    return false;
                });
            });

Answer 2

我设法解决了这个问题。在hiddent事件触发removeData似乎是最好的。我现在得到了预期的结果。

这是代码

$('#myModal').on('hidden.bs.modal', function (event) {
   $(this).removeData('bs.modal');                                     
})

Bootstrap模态和MVC部分视图

2 个答案: