在项目单击时呈现视图模型

Question

情况如下：我有一个Product 模型，它有很多属性，其中一个是Photo 对象的列表，每个Photo 对象都有一个ID 和一个Name。有一个轮播视图，其模型列表为Photos。在Product View 我有这样的东西：

@if (Model.Photos.Count > 0)
{
    ....
    <a href="javascript:jsFunction()".......

在 javascript 中，jsFunction 看起来像这样：

function jsFunction()
{
  alert('@Html.Action("GetPhotosCarousel", Model.Photos)');
} 

Controller 函数返回局部视图_PhotosCarousel。

现在，@Html.Action 在渲染主视图时执行的问题，NOT ON CLICK。

如何仅在单击而不是在显示页面时呈现视图 PhotosCarousel？

Answer 1

你可以试试这个：

代码已经准备好拥有多个锚元素：

HTML：

<div class="container">

    <a href="@Url.Action("GetPhotosCarousel")" 
        data-id="@Model.Id" 
        data-name="@Model.Name" 
        class="call-get-photos-carousel">click</a>

    <div class="result"></div>

</div>

JS：

$(document).ready(function(){

    $('.call-get-photos-carousel').bind('click', function(event) {

        var 
            _this = this, 
            data = {'Id': $(this).data('id'), 'Name': $(this).data('name')};

        $.get($(this).attr('href'), data,  function(html) {
            $(_this).siblings('.result').html(html);
        });

        return false;
    });
});

但如果你只有一个锚元素，你可以在元素中使用 ID 以这种方式工作：

HTML：

<div>

    <a href="@Url.Action("GetPhotosCarousel")" 
        data-id="@Model.Id" 
        data-name="@Model.Name" 
        id="call-get-photos-carousel">click</a>

    <div id="result"></div>

</div>

JS：

$(document).ready(function(){

    $('#call-get-photos-carousel').bind('click', function(event) {

        var 
            _this = this, 
            data = {'Id': $(this).data('id'), 'Name': $(this).data('name')};

        $.get($(this).attr('href'), data,  function(html) {
            $('#result').html(html);
        });

        return false;
    });
});

在这两种情况下，操作都会发送到Id 和Name 的值。

Answer 2

我建议从您的 href 中删除对 jsFunction 的实际调用，然后使用 jQuery 处理它。

<a href="#" id="photoCarouselHref">Click Me</a>

$(document).ready(function(){
    $("#photoCarouselHref").click(function(){
        $.ajax({
            url: '@Url.Action("GetPhotosCarousel"),
            //other ajax settings here
        });
    });
});

jQuery ajax 文档here.