1

我有一个视图，它有一些 jQuery 将部分视图（通过按钮单击）加载到视图中的 div 中。这没有问题。然而，在局部视图中，我有一个非常相似的 jQuery，它将另一个局部视图加载到第一个局部视图中的 div 中，但这不起作用，似乎第一个局部视图中的 jQuery 不是加载。

我已经尝试寻找解决方案，但我还没有找到答案。我还在 a 中重新创建了 jQuery 函数，@Ajax.ActionLink它工作正常，但是当我尝试学习 jQuery 时，我试图避免使用 Microsoft 助手。

这是第一个包含似乎不起作用的 jQuery 的局部视图，它还包含起作用的 jQuery @Ajax.ActionLink：

@model MyProject.ViewModels.AddressIndexViewModel

<script>
    $(".viewContacts").click(function () {
        $.ajax({
            url: '@Url.Action("CustomerAddressContacts", "Customer")',
            type: 'POST',
            data: { addressID: $(this).attr('data-addressid') },
            cache: false,
            success: function (result) {
                $("#customerAddressContactsPartial-" + $(this).attr('data-addressid'))
                        .html(result);
            },
            error: function () {
                alert("error");
            }
        });
        return false;
    });
</script>
<table class="customers" style="width: 100%">
    <tr>
        <th style="width: 25%">
            Name
        </th>
        <th style="width: 25%">
            Actions
        </th>
    </tr>
</table>
    @foreach (Address item in Model.Addresses)
    {
    <table style="width: 100%; border-top: none">
        <tr id="address-id-@item.AddressID">
            <td style="width: 25%; border-top: none">
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td style="width: 25%; border-top: none">
                <a href="#" class="viewContacts standardbutton" data-addressid="@item.AddressID">ContactsJQ</a>
                @Ajax.ActionLink("Contacts", "CustomerAddressContacts", "Customer",
                    new { addressID = item.AddressID },
                    new AjaxOptions { UpdateTargetId = "customerAddressContactsPartial-" + @item.AddressID, HttpMethod = "POST" },
                    new { @class = "standardbutton"})
            </td>
        </tr>
    </table>
    <div id="customerAddressContactsPartial-@item.AddressID"></div>
    }

如果有人可以解释我在这里做错了什么以及如何解决它，那么我将非常感激。

非常感谢。

4

4 回答 4

1

你错过了

$(function(){
//code goes here
})

围绕剧本。该页面没有意识到要执行 jquery。

编辑

您可以在返回的脚本上使用 eval。像下面这样。我知道一种 hack，但仍然应该让你工作。

    function (data, textStatus, jqXHR)
            {
                var $scripts = undefined;
                if ($(data).has('script'))
                {
                    $scripts = $(data).filter('script');
                }
                //APPEND YOUR HTML To the page. then run the scripts that are contained.

                if ($scripts != undefined)

                    $scripts.each(function ()
                    {
                        if ($(this).attr('src') != '' && $(this).attr('src'))
                            $.getScript($(this).attr('src'));
                        else
                            eval(this.innerHTML || this.innerText);
                    });

            };

这将是ajax调用的成功函数

于 2012-09-24T09:08:33.733 回答
1

在控制器中我有行动。

public ActionResult ShowAllState()
        {
            return PartialView("_State", CityRepository.AllState);
        }

“_State”是我的片面观点。

在视图中我有按钮。当我单击此按钮时，我的局部视图会显示所有状态数据。

<h5>
    Page Lode With Jquery</h5>
<input type="button" value="Lode Form" id="btnLode" />

<script type="text/javascript">
    $(function () {
        $("#btnLode").click(function () {
            $("#LodeForm").load("/City/ShowAllState", function () {
                alert("Your page loaded Successfully !!!!!!!");
            });
        });
    });

</script>

<div id="LodeForm">
</div>

我在“LodeForm” div 中存储了我所有的状态数据。

我认为这对你有帮助....

于 2012-09-24T09:22:49.903 回答
1

每次通过 ajax 重新加载元素时，都必须将点击处理程序重新附加到新加载的元素。

于 2012-09-24T09:25:37.320 回答
1

我还在 @Ajax.ActionLink 中重新创建了 jQuery 函数，它工作正常，但是我在尝试学习 jQuery 时试图避免使用 Microsoft 助手。

如果您不知道，在 ASP.NET MVC 3 中，Ajax.* 助手使用 jQuery，与使用 Microsoft Ajax 脚本的 ASP.NET MVC 2 不同。此外，将 javascript 代码放在您的视图和部分视图中也被认为是不好的做法。

我建议您在函数内的单独 javascript 文件中将其外部化。

function ajaxifyViewContactsLink() {
    $('.viewContacts').click(function () {
        $.ajax({
            url: this.href,
            type: 'GET',
            cache: false,
            context: this,
            success: function (result) {
                // see the updated markup of the partial below
                // that works with this:
                $(this).closest('.address')
                       .find('.results')
                       .html(result);
            },
            error: function () {
                alert("error");
            }
        });
        return false;
    });
}

你还没有展示你是如何渲染这个部分的，我猜你再次使用了 AJAX，所以在success这个 AJAX 调用的回调中，一旦你将部分注入到 DOM 中，你就会调用该ajaxifyViewContactsLink函数。

现在您的部分只包含它应该包含的内容 - 标记：

@model MyProject.ViewModels.AddressIndexViewModel
<table class="customers" style="width: 100%">
    <tr>
        <th style="width: 25%">
            Name
        </th>
        <th style="width: 25%">
            Actions
        </th>
    </tr>
</table>
@foreach (Address item in Model.Addresses)
{
    <div class="address">
        <table style="width: 100%; border-top: none">
            <tr id="address-id-@item.AddressID">
                <td style="width: 25%; border-top: none">
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td style="width: 25%; border-top: none">
                    @Html.ActionLink(
                        "ContactsJQ", 
                        "CustomerAddressContacts", 
                        "Customer",
                        new { addressid = item.AddressID },
                        new { @class = "viewContacts" }
                    )
                </td>
            </tr>
        </table>
        <div class="results"></div>
    </div>
}
于 2012-09-24T09:28:56.827 回答