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

Question

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

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

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

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

控制器函数返回部分视图_PhotosCarousel。

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

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

Answer 1

我建议jsFunction从您的实际调用中删除href，然后使用 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 文档在这里。

Answer 2

你可以试试这个：

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

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。