jquery - MVC5 में आंशिक दृश्य रेंडर करने के लिए कैसे ajax कॉल के माध्यम से एक नियंत्रक और HTML को वापस करने के लिए




asp.net-mvc asp.net-mvc-partialview (2)

ASP.NET MVC में बिल्ट-इन अजाक्स हेल्पर्स हैं जो मूल परिदृश्यों को कवर कर सकते हैं।

आपको jquery.unobtrusive-ajax जावास्क्रिप्ट लाइब्रेरी (+ jQuery निर्भरता) को स्थापित करने और संदर्भित करने की आवश्यकता है। फिर अपने मुख्य दृश्य में (मान लें कि index.cshtml) निम्नलिखित कोड डालें:

Index.cshtml

@Ajax.ActionLink("Load More Posts", "MorePosts", new AjaxOptions()
{
    HttpMethod = "GET",
    AllowCache = false,
    InsertionMode = InsertionMode.InsertAfter,
    UpdateTargetId = "posts-wrapper"
})

<div id="posts-wrapper"></div>

नोट : @Ajax.ActionLink सहायक अधिक अनुकूलन के लिए AjaxOptions पैरामीटर को स्वीकार करता है।

नियंत्रक में ( मान लें कि HomeController.cs ) आपको PartialViewResult लौटना चाहिए:

public ActionResult MorePosts(int? offset, int? count)
{
    IEnumerable<Post> posts = myService.GetNextPosts(offset, count); 
    return PartialView(posts);
}

अंत में आप MorePosts.cshtml आंशिक दृश्य परिभाषित करते हैं:

@model IEnumerable<Post>

@{
    Layout = null;
}

@foreach (var post in Model)
{
    <div class="post">
        <div>>@post.Prop1</div>
        <div>@post.Prop2</div>
    </div>
    <hr />
}

और बस। जब कुछ उपयोगकर्ता Load More बटन पर क्लिक करते हैं, तो अधिक पोस्ट लोड हो जाएंगे।

नोट 1 : आप OnBegin फ़ंक्शन को लागू करने के लिए वास्तविक तर्क को लागू करने के लिए लागू कर सकते हैं जो लोड करने के लिए अगले पद हैं (पूर्व लोड पोस्ट की आईडी प्राप्त करें और इसे सर्वर पर भेजें)।

नोट 2 : एक ही परिणाम कस्टम jQuery.ajax कॉल (jquery.unobtrusive के बिना) के साथ प्राप्त किया जा सकता है। केवल अंतर मैनुअल अजाक्स कॉल और क्लिक इवेंट होंगे।

उम्मीद है की यह मदद करेगा। जरूरत पड़ने पर एक और पूरा उदाहरण लिख सकता हूं।

AJAX का उपयोग html में प्रदान किए गए एक पूर्ण आंशिक दृश्य को लोड करने के लिए कैसे किया जा सकता है (इसलिए मैंने अभी div.html निर्धारित किया है)

मुझे नियंत्रक कार्रवाई को कॉल करने के लिए ajax कॉल की आवश्यकता है जो एक पूर्ण आंशिक दृश्य (लाल) को प्रस्तुत करेगा और इसे वर्तमान में लोड किए गए एक के अंत में जोड़ देगा?

[मुझे पता है कि DOM को कैसे करना है और AJAX कॉल कैसे करना है]

मुझे यह जानने की जरूरत है कि इसके लिए सबसे अच्छा प्लंबिंग दृष्टिकोण क्या है , किस प्रकार का एक्शन। परिणाम एक्शन रिटर्न चाहिए और यदि पहिया को फिर से स्थापित करने से बचने के लिए इसके लिए पहले से ही निर्मित तंत्र है ?


मैं NUGET से Westwind.Web.Mvc लाइब्रेरी प्राप्त करने की सलाह देता हूं और आप JSON परिणाम के रूप में वापस लौटने के लिए अपने किसी भी विचार को स्ट्रिंग में चला सकते हैं।

public JsonResult GetPosts()
{
    string postsHtml = ViewRenderer.RenderPartialView("~/views/yourcontroller/_PostsPartial.cshtml",model);

    return Json(new { html = postsHtml });
}

जैसा कि @Guruprasad ने टिप्पणियों में कहा, आप आंशिक रूप से return PartialView(model) का उपयोग करके एक MVC कंट्रोलर से आंशिक दृश्य वापस पा सकते हैं, लेकिन RenderPartialView के साथ आपको इसे एक स्ट्रिंग के रूप में मिलता है जिसे आप आवश्यकता पड़ने पर किसी भी अन्य मान के साथ JSON के रूप में आउटपुट कर सकते हैं। । यदि आप WebAPI का उपयोग करना चुनते हैं तो यह काम करेगा, क्योंकि इसमें निर्मित दृश्य को प्रस्तुत करने की क्षमता नहीं है।





asp.net-mvc-partialview