在正确的表行中呈现部分视图

Question

我有查看表格中填充值的位置。有一个链接可以生成另一个表（部分视图），该表需要显示在单击链接的行的正下方。如下图所示，当从第二行单击 View Properties 时，结果显示在第一行下方。

脚本

<script type="text/javascript">
$(document).ready(function () {
    $('.links').click(function () {
        $('.View').toggle();

    });
});
</script>

视图的相关部分

<tr>
    <td data-toggle="tooltip" title="@item.DescriptionDE">@Html.ActionLink(item.OptionName, "ViewOptionValues", "OptionValues", new { id = item.OptionID }, null)</td>
    <td>@Html.ActionLink(@item.TechnicalCharacteristic.TCName, "ViewTcSet", "TechnicalCharacteristics", new {id = item.TechnicalCharacteristicID },null)</td>
    <td class="links">
         @Ajax.ActionLink("View Properties", "ViewOptionvalues", "Options", new { id = item.OptionID }, new AjaxOptions { UpdateTargetId="ViewProperty"})|
         @Html.ActionLink("Edit", "Edit", new { id = item.OptionID })|
         @Html.ActionLink("Details", "Details", new { id = item.OptionID })|
         @Html.ActionLink("Delete", "Delete", new { id = item.OptionID })
     </td>
</tr>

<tr style="display:none;overflow-x:auto" class="View"><td colspan="3"><div id="ViewProperty" style="overflow:auto"></div></td></tr>

Answer 1

您生成无效的HTML，因为您有多个App = Mn.Application.extend({}); // APP App = new App({ start: function() { App.routr = new App.Routr(); Backbone.history.start(); } }); // REGION App.Rm = new Mn.RegionManager({ regions: { main: 'main', buttonRegion: '.button-region' } }); // MODEL App.Model = {}; App.Model.GeneralModel = Backbone.Model.extend({}); // COLLECTION App.Collection = {}; App.Collection.All = Backbone.PageableCollection.extend({ model: App.Model.GeneralModel, getOpts: function() { return { type: 'POST', contentType: 'appplication/json', dataType: 'json', data: {skip: 12}, add: true } }, initialize: function() { this.listenTo(Backbone.Events, 'load', (function() { console.log('Load more entries'); // {remove: false} doesn't seem to affect the collection with Marionette this.getNextPage(); })).bind(this) }, mode: "infinite", url: "https://api.github.com/repos/jashkenas/backbone/issues?state=closed", state: { pageSize: 5, firstPage: 1 }, queryParams: { page: null, per_page: null, totalPages: null, totalRecords: null, sortKey: null, order: null }, /* // Enabling this will mean parseLinks don't run. sync: function(method, model, options) { console.log('sync'); options.contentType = 'application/json' options.dataType = 'json' Backbone.sync(method, model, options); } */ }); // VIEWS App.View = {}; App.View.MyItemView = Mn.ItemView.extend({ template: '#item-view' }); App.View.Button = Mn.ItemView.extend({ template: '#button', events: { 'click .btn': 'loadMore' }, loadMore: function() { Backbone.Events.trigger('load'); } }); App.View.MyColView = Mn.CollectionView.extend({ initialize: function() { this.listenTo(this.collection.fullCollection, "add", this.newContent); this.collection.getFirstPage(); }, newContent: function(model, col, req) { console.log('FullCollection length:', this.collection.fullCollection.length, 'Collection length', this.collection.length) }, childView: App.View.MyItemView }); // CONTROLLER App.Ctrl = { index: function() { var col = new App.Collection.All(); var btn = new App.View.Button(); var colView = new App.View.MyColView({ collection: col }); App.Rm.get('main').show(colView); App.Rm.get('buttonRegion').show(btn); } }; // ROUTER App.Routr = Mn.AppRouter.extend({ controller: App.Ctrl, appRoutes: { '*path': 'index' } }); App.start(); 元素。您的<div id="ViewProperty" ...>有Ajax.ActionLink()选项，它只返回带有UpdateTargetId="ViewProperty"的第一个元素（不是下一行中的元素）。最后，在您的脚本中，id="ViewProperty"使用$('.View').toggle();切换所有行。

删除（废弃）class="View"方法并替换为

Ajax.ActionLink()

然后将脚本修改为

<tr>
  ....
  <td>
    <a href="#" class="view" data-id="@item.OptionID">View Properties<a> | @Html.ActionLink(...
  </td>
</tr>

<tr style="display:none;overflow-x:auto"><td colspan="3"><div style="overflow:auto"></div></td></tr>