Bootstrap 模态和 MVC 局部视图答案

【问题标题】：Bootstrap Modal and MVC Partial ViewBootstrap 模态和 MVC 局部视图
【发布时间】：2016-06-09 18:55:23
【问题描述】：

我有一个返回一些数据的 KendoUI 网格，我有一个绑定到数据 ID 的“.clienttemplate”内的按钮。当您单击该链接时，它使用 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);
    }

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

非常感谢

【问题讨论】：

标签： asp.net-mvc twitter-bootstrap kendo-ui bootstrap-modal

【解决方案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;
                });
            });

【讨论】：

嗨，我已经试过了。您可以访问显示和隐藏事件。我尝试添加 $('#myModal').on('hidden.bs.modal', function (event) { $.ajaxSetup({ cache: false }) }) 但它没有帮助。你会遇到同样的问题。
尝试在您提到的 ajaxSetup 之前添加我在答案中输入的两行
谢谢，所以我添加了这些行，它们只允许您添加一次模式。然后就再也打不开了。我删除了 $('#myModal').html("");并离开克隆线，让您打开几个数据项，然后再次开始显示相同的数据。感觉就快到了。
可以尝试将锚点分开一点并在脚本中使用 ajax 处理它。我更改了答案以表明我的意思。

【解决方案2】：

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

这里是代码

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

【讨论】：

干得好。容易得多。