7

Html.RenderPartial（usercontrol、model）を使用してユーザーコントロールをレンダリングし始めました。この機能を変更して、部分ビューの読み込み中にAjax読み込み画像を表示することはできますか？

編集：これを試してみましたが、動作させることができませんでした。私はこのような部分的なビューを持っています（_FixtureList.cshmtl）：

@model List<Areas.Gameplan.Models.Fixture>

@foreach (var item in this.Model)
{ 

<tr> 
    <td class="teamgrid">@Html.Encode(item.Week)</td>
    <td><img src='@Html.Encode(item.Logo)' alt="Logo" /></td>
    <td class="teamgrid">@Html.Encode(item.Opponent)</td>
    <td class="teamgrid">@Html.Encode(item.Result)</td>
</tr>

そして、これは現在私がページをレンダリングしている方法です：

public ActionResult Cincinnati()
    {
        //renderpartial
        List<Fixture> lstFixtures = _Base.DataRepository.GetFixtureList("2017", "Cincinnati");

        return View(lstFixtures);
    }

}

そして、これは私の見解の関連部分です（Cincinnati.cshtml）：

@model List<Areas.Gameplan.Models.Fixture>

@{
    ViewBag.Title = "Cincinnati Bengals";
    Layout = "~/Areas/Gameplan/Views/Shared/_Layout.cshtml";
}


<div id="bigborder">

    <p>
        <br />

    <div class="sidebarleftteam">

        <div id="divFixtures">

           <table id='tblFixtures' align='center'><tr><th><img src='../../../../Content/Images/Gameplan/fixtureweek.jpg' /></th><th><img src='../../../../Content/Images/Gameplan/fixtureopponent.jpg' /></th><th/><th><img src='../../../../Content/Images/Gameplan/fixturescore.jpg' /></th></tr> 

                @{ Html.RenderPartial("_FixtureList", this.Model); }

           </table>

このコードにあなたの例をどのように適用しますか？

編集 ：

それを理解しました、これは私がそれをした方法です：

public ActionResult MyPartial()
    {
        List<Fixture> lstFixtures = _Base.DataRepository.GetFixtureList("2016", "Cincinnati");
        return PartialView("_FixtureList", lstFixtures);
    }

そして、ビューで：

 $.ajax(
 {
     type: 'POST',
     async: true,
     contentType: 'application/json; charset=utf-8',
     dataType: 'html',
     url: 'MyPartial',
     beforeSend: function (xhr) {
         $('#mydiv').addClass('ajaxRefreshing');
         xhr.setRequestHeader('X-Client', 'jQuery');
     },
     success: function (result) {
         $('#mydiv').html("<table id='tblFixtures' align='center'><tr><th><img src='../../../../Content/Images/Gameplan/fixtureweek.jpg' /></th><th><img src='../../../../Content/Images/Gameplan/fixtureopponent.jpg' /></th><th/><th><img src='../../../../Content/Images/Gameplan/fixturescore.jpg' /></th></tr>" + result + "</table>");
     },

     error: function (error) {
         alert(error);
     },
     complete: function () {
         $('#mydiv').removeClass('ajaxRefreshing');
     }
 });
4

1 に答える 1

13

この機能を変更して、部分ビューの読み込み中にAjax読み込み画像を表示することはできますか？

いいえ、Html.RenderPartialAJAXを使用していません。コンテンツはサーバーに直接含まれています。

Html.RenderPartialビューにdivを配置する代わりにAJAXを使用する場合：

<div id="mydiv" data-url="@Url.Action("MyPartial", "Home")"></div>

次に、パーシャルを返すコントローラーアクションを記述します。

public class HomeController: Controller
{
    // that's the action that serves the main view
    public ActionResult Index()
    {
        return View();
    }

    // that's the action that will be invoked using AJAX and which 
    // will return the partial view
    public ActionResult MyPartial()
    {
        var model = ...
        return PartialView(model);
    }
}

次に、対応する部分（~/Views/Home/Myartial.cshtml）があります。

@model MyViewModel
...

最後のステップは、AJAX呼び出しをトリガーするJavaScriptを作成することです。

$(function() {
    var myDiv = $('#mydiv');
    $.ajax({
       url: myDiv.data('url'),    
       type: 'GET',
       cache: false, 
       context: myDiv,
       success: function(result) {
           this.html(result);
       }
    });
});

最後のピースは、読み込み中のアニメーションを表示することです。これは複数の方法で行うことができます。1つの方法は、グローバルajaxイベントハンドラーを使用することです。

$(document).ajaxSend(function() {
    // TODO: show your animation
}).ajaxComplete(function() {
    // TODO: hide your animation
});

もう1つの可能性は、最初にdivにテキストまたは画像を配置することです。

<div id="mydiv" data-url="@Url.Action("MyPartial", "Home")">
    Loading ...
</div>

また、このdivの内容は、ajax呼び出しの成功コールバックでパーシャルの内容に置き換えられるため、読み込み中のテキストは表示されなくなります。エラーが発生した場合、成功コールバックはトリガーされず、divは最初のテキストのままになるため、これには注意してください。したがって、この場合、アニメーションを非表示にするには、完全なハンドラーが推奨されます。

于 2012-07-19T07:20:41.683 に答える