अजाक्स लोडिंग छवि

Question

के साथ एमवीसी 3 में आंशिक विचार प्रस्तुत करना मैंने अपने उपयोगकर्ता नियंत्रणों को प्रस्तुत करने के लिए अभी Html.RenderPartial (usercontrol, model) का उपयोग करना शुरू कर दिया है। क्या आंशिक दृश्य लोड होने पर अजाक्स लोडिंग छवि दिखाने के लिए इस कार्यक्षमता को बदलना संभव है?

संपादित करें: इस पर प्रयास करें, लेकिन इसे काम करने में असमर्थ रहे हैं। मैं एक आंशिक यह (_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); 
    } 

}

और इस के प्रासंगिक हिस्सा है मेरा विचार (सिनसिनाटी.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'); 
    } 
}); 

Answer 1

क्या यह संभव है करने के लिए इस कार्यक्षमता को बदलने के लिए

यह समझ से बाहर है, यह कैसे मैंने किया है आंशिक दृश्य लोड करते समय एक अजाक्स लोडिंग छवि दिखाएं?

नहीं, Html.RenderPartial किसी भी AJAX का उपयोग नहीं करता है, सामग्री सीधे सर्वर पर शामिल है।

आप Html.RenderPartial के बजाय AJAX का उपयोग करने के लिए अपने ध्यान में रखते हुए एक div डाल चाहते हैं:

<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 कॉल ट्रिगर किया जाएगा लिखने के लिए:

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

और पिछले टुकड़ा एक लोड हो रहा है एनीमेशन दिखाने के लिए है। यह कई तरीकों से किया जा सकता है। एक तरह से उपयोग करने के लिए है global ajax event handlers:

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

एक और संभावना है बस शुरू में अपने div में कुछ पाठ या छवि डाल करने के लिए है:

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

और इस div की सामग्री के बाद से सफलता में बदल देगी आंशिक की सामग्री के साथ AJAX कॉल का कॉलबैक, लोडिंग टेक्स्ट गायब हो जाएगा। बस इसके साथ सावधान रहें क्योंकि यदि कोई त्रुटि है तो सफलता कॉलबैक ट्रिगर नहीं होगा और div इसके प्रारंभिक पाठ के साथ रहेगा। इसलिए इस मामले में एनीमेशन को छिपाने के लिए पूर्ण हैंडलर को प्राथमिकता दी जाती है।