0

我有一个索引页面，其中有一个链接可以调用局部视图。代码如下：-

@model MvcCommons.ViewModels.CompositeViewModel

@{
ViewBag.Title = "Index";
}

<script src="../../Scripts/jquery.jtruncate.js" type="text/javascript"></script>


<script type="text/javascript">
$().ready(function() {
    $('.text').jTruncate({
        length: 100,
        minTrail: 0,
        moreText: "",
        lessText: "Read Less",
        //ellipsisText: " (Click below to continue reading)"
    });
});
</script>


<script type="text/javascript">
$('#myTable01').fixedHeaderTable({
    footer: false,
    cloneHeadToFoot: false,
    altClass: 'odd',
    autoShow: false
});


</script>
<table class="fancyTable" id="myTable01" cellpadding="0" cellspacing="0">
<tr>
    <th>
        @Html.DisplayNameFor(model => model.ArticleViewModel.Article.ArticleTitle)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.ArticleViewModel.Article.ArticleDate)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.ArticleViewModel.Article.ArticleText)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.ArticleViewModel.Article.ArticleSource)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.ArticleViewModel.Article.Category.CategoryTitle)
    </th>
    <th>
        Images
    </th>
    <th></th>
</tr>

@foreach (var item in Model.ArticleViewModel.ArticleList)
{
<tr>
    <td>
        @Html.DisplayFor(modelItem => item.ArticleTitle)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.ArticleDate)
    </td>
    <td>
        <div class="text">
            @Html.DisplayFor(modelItem => item.ArticleText)
        </div>
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.ArticleSource)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Category.CategoryTitle)
    </td>
    <td>
        @if (Model.ImageViewModel.ImageCount(item.ArticleID, Model.ImageViewModel.PageID) > 0)
        {
            @Html.HiddenFor(model => Model.PageViewModel.Page.PageTitle, new { id = "PageTitle" })
            @Html.HiddenFor(model => Model.PageViewModel.Page.PageAction, new { id = "PageAction" })
            @Html.HiddenFor(model => item.ArticleID, new { id = "ItemID" })
            @Html.Partial("~/Views/Shared/ViewImages.cshtml", Model)
        }
    </td>
    <td>
        @Html.ActionLink("Edit", "Edit", new { id = item.ArticleID }) |
        @Html.ActionLink("Details", "Details", new { id = item.ArticleID }) |
        @Html.ActionLink("Delete", "Delete", new { id = item.ArticleID })
    </td>
</tr>
}
</table>

<p>
     @Html.ActionLink("Create New", "Create")


</p>

ViewImages.cshtml 页面如下：-

@model MvcCommons.ViewModels.CompositeViewModel

@{

ViewBag.Title = "Modal image uploader";
}


<script type="text/javascript">
var pageTitle = $('#PageTitle').val();
var pageAction = $('#PageAction').val();
var id = $('#ItemID').val();

$(document).ready(function () {
    $('.modal_block').click(function (e) {
        $('#tn_select').empty();
        $('.modal_part').hide();
    });
    $('#modal_view_link').click(function (e) {
        $('.modal_part').show();
        var context = $('#tn_view_select').load('/Upload/Index?Page=' + pageTitle + '&Action=' + pageAction + '&id=' + id, function () {
            initSelect(context);
        });
        e.preventDefault();
        return false;
    });

});

</script>

<div class="modal_block modal_part"></div>
<div class="modal_dialog modal_part" id="tn_view_select"></div>



<p>

<a href="#" id="modal_view_link" >Click here to view the images</a>
</p>

我的问题是，由于索引是一个转发器，我需要区分这些部分视图，因为目前，只有第一个链接可以工作（在索引页面中）。

我认为需要做的是在ViewImages.cshtml中，这部分代码：-

<a href="#" id="modal_view_link" >Click here to view the images</a>

所有链接的 id 必须是唯一的。

任何想法将不胜感激。

感谢您的帮助和时间

更新 - 将所有内容移至 1 页，Index.cshtml，但仍无法正常工作

@model MvcCommons.ViewModels.CompositeViewModel

@{
ViewBag.Title = "Index";
}

<script src="../../Scripts/jquery.jtruncate.js" type="text/javascript"></script>

<script type="text/javascript">
var pageTitle = $('#PageTitle').val();
var pageAction = $('#PageAction').val();
var id = $('#ItemID').val();

$(document).ready(function () {
    $('.modal_block').click(function (e) {
        $('#tn_select').empty();
        $('.modal_part').hide();
    });
    $('#modal_view_link').click(function (e) {
        var id = $(this).attr("data-id");
        $('.modal_part').show();
        var context = $('#tn_view_select').load('/Upload/Index?Page=' + pageTitle + '&Action=' + pageAction + '&id=' + id, function () {
            initSelect(context);
        });
        e.preventDefault();
        return false;
    });

    $('#myTable01').fixedHeaderTable({
        footer: false,
        cloneHeadToFoot: false,
        altClass: 'odd',
        autoShow: false
    });

});

</script>


<table class="fancyTable" id="myTable01" cellpadding="0" cellspacing="0">
<tr>
    <th>
        @Html.DisplayNameFor(model => model.ArticleViewModel.Article.ArticleTitle)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.ArticleViewModel.Article.ArticleDate)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.ArticleViewModel.Article.ArticleText)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.ArticleViewModel.Article.ArticleSource)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.ArticleViewModel.Article.Category.CategoryTitle)
    </th>
    <th>
        Images
    </th>
    <th></th>
</tr>

@{var i = 0;}

@foreach (var item in Model.ArticleViewModel.ArticleList)
{
i++;
<tr>
    <td>
        @Html.DisplayFor(modelItem => item.ArticleTitle)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.ArticleDate)
    </td>
    <td>
        <div class="text">
            @Html.DisplayFor(modelItem => item.ArticleText)
        </div>
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.ArticleSource)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Category.CategoryTitle)
    </td>
    <td>
        @if (Model.ImageViewModel.ImageCount(item.ArticleID, Model.ImageViewModel.PageID) > 0)
        {
            @Html.HiddenFor(model => Model.PageViewModel.Page.PageTitle, new { id = "PageTitle" })
            @Html.HiddenFor(model => Model.PageViewModel.Page.PageAction, new { id = "PageAction" })
            @Html.HiddenFor(model => item.ArticleID, new { id = "ItemID" })
            <a href="#" class="modal_view_link" data-id="@(i)">Click here to view the images</a>
        }
    </td>
    <td>
        @Html.ActionLink("Edit", "Edit", new { id = item.ArticleID }) |
        @Html.ActionLink("Details", "Details", new { id = item.ArticleID }) |
        @Html.ActionLink("Delete", "Delete", new { id = item.ArticleID })
    </td>
</tr>
}

</table>

<p>
@Html.ActionLink("Create New", "Create")
</p>
4

1 回答 1

0

是否有任何理由为满足您条件的每次迭代渲染这些<script>东西？ViewImages.cshtmlModel.ArticleViewModel.ArticleListImageCount

我会将<script>内容渲染到页面一次（即：foreach在.<a ..>foreach

然后您可以将 foreach 切换到；

@{var articleList = Model.ArticleViewModel.ArticleList; }
@for(int i = 0;i< articleList.Count; i++) {
     ...
     @Html.HiddenFor(model => articleList[i], new { id = "ItemID" })
     <a href="#" class="modal_view_link" data-id="@(i)">Click here to view the images</a>
     ...
}

然后将 jQuery 更新为类似的东西；

$(document).ready(function () {
    ...
    $('.modal_view_link').click(function (e) {
        var id = $(this).attr("data-id");
        var context = $('#tn_view_select').load('/Upload/Index?Page=' + pageTitle + '&Action=' + pageAction + '&id=' + id, function () {
            initSelect(context);
        });
        e.preventDefault();
        return false;
    });
});
于 2012-09-05T02:13:47.377 回答