1

ビューの div に (ボタン クリックで) 部分ビューをロードするための jQuery を持つビューがあります。これは問題なく動作します。ただし、部分ビュー内には、別の部分ビューを最初の部分ビューの div にロードする非常によく似た jQuery がありますが、これは機能していません。最初の部分ビューの jQuery が機能していないようです。読み込まれました。

解決策を探してみましたが、答えを見つけることができませんでした。また、正常に動作する jQuery 関数を再作成しましたが、jQuery@Ajax.ActionLinkを学習しようとしているときに Microsoft ヘルパーを回避しようとしています。

これは、動作していないように見える 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を使用できます。次のように。私が知っているハックのようなものですが、それでもあなたを働かせるはずです。

    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

コントローラーには action があります。

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 では、Microsoft Ajax スクリプトを使用していた ASP.NET MVC 2 とは対照的に、Ajax.* ヘルパーは jQuery を使用します。また、ビューや部分ビューに 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 に答える