Question

我有一个视图，它有一些jQuery可以将部分视图（通过按钮单击）加载到视图中的div中。这没有问题。但是在局部视图中，我有一个非常相似的jQuery，它将在第一个局部视图中将另一个局部视图加载到div中，但是这不起作用，它几乎看起来像第一个局部视图中的jQuery isn＆＃ 39;正在装载。

我一直在尝试寻找解决方案，但我还没有找到答案。我还在@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>
    }

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

非常感谢。

Answer 1

你错过了

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

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

修改

您可以在返回的脚本上使用eval。如下。我知道但我仍然应该让你工作。

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调用的成功函数

Answer 2

在控制器中我有动作。

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中编写了所有状态数据。

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

Answer 3

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

Answer 4

我还在@ Ajax.ActionLink中重新创建了jQuery函数哪个工作正常，但我试图避免微软的助手因为我正在努力学习jQuery。

如果你不知道，在ASP.NET MVC 3中，Ajax。* helper使用jQuery，与ASP.NET MVC 2相反，他们使用的是Microsoft Ajax脚本。此外，将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，所以在这个AJAX调用的success回调中，一旦你将部分注入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>
}

部分视图中的JQuery未被调用

4 个答案: