2016-02-26 84 views
0

我有一个KendoUI网格,返回一些数据,我有一个'.clienttemplate'内的一个按钮绑定到数据ID。当你点击该链接时,它使用Bootstrap 3模式显示部分视图。问题是,尽管ID是全部为不同的我总是得到相同的结果反馈(通常你点击了when的第一个ID,他的页面加载)引导模式和MVC部分视图

查看

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

我注意到的是,当我申请索姆这个控制器方法的断点只会被调用一次,而不会再一次,这就是为什么结果总是在模态中相同的原因。我可以做些什么来确保它对每个点击项目的方法进行新的调用,或者我应该以另一种方式做这种模式?

非常感谢

回答

0

@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; 
       }); 
      }); 
+0

您好,我想这些了。您可以访问节目并隐藏事件。我尝试添加$('#myModal')。('hidden.bs.modal',function(event){$ .ajaxSetup({cache:false})}}但它没有帮助。你遇到同样的问题。 – Yanayaya

+0

试试在你提到的ajaxSetup之前加入我在答案中提到的两条线 –

+0

谢谢,所以我添加了这些行,它们只允许你添加一个模态。然后它不会再打开。我删除了$('#myModal')。html(“”);并离开克隆线,让您打开一些数据项然后开始再次显示相同的数据。感觉就像它几乎在那里。 – Yanayaya

0

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

下面是代码

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

干得好。更容易。 –