asp.net mvc - मैं दृश्य के अंदर आंशिक दृश्य कैसे लोड कर सकता हूं




asp.net-mvc asp.net-mvc-3 (6)

उपरोक्त के लिए छोटे tweek

@Ajax.ActionLink(
    "Click Here to Load the Partial View", 
    "ActionName", 
    "ControlerName",
    null, 
    new AjaxOptions { UpdateTargetId = "toUpdate" }
)

<div id="toUpdate"></div>

मैं इस आंशिक दृष्टिकोण से बहुत उलझन में हूं ...

मैं अपने मुख्य दृश्य के अंदर आंशिक दृश्य लोड करना चाहता हूं ...

यहाँ सरल exmaple है ...

मैं होमकंट्रोलर इंडेक्स एक्शन के इंडेक्स.cshtml को मुख्य पृष्ठ के रूप में लोड कर रहा हूं ..

index.cshtml में मैं एक लिंक बना रहा हूँ

@Html.ActionLink("load partial view","Load","Home")

होम कंट्रोलर में मैं एक नई एक्शन जोड़ रहा हूं

public PartialViewResult Load()
{
    return PartialView("_LoadView");
}

_LoadView.cshmtl में मैं बस एक हूँ

<div>
    Welcome !!
</div>

लेकिन, जब प्रोजेक्ट चलाते हैं, index.cshtml पहले प्रस्तुत करता है और मुझे "लोड आंशिक दृश्य" लिंक दिखाता है ... जब मैं उस पर क्लिक करता हूं तो यह _LoadView.cshtml से स्वागत संदेश को index.cshtml में प्रस्तुत करने के नए पृष्ठ पर जाता है ।

क्या गलत हो सकता है?

नोट: मैं AJAX के माध्यम से पृष्ठ लोड नहीं करना चाहता हूं या Ajax.ActionLink का उपयोग नहीं करना चाहता हूं


एक बात जानने के लिए - और मैं इस के बारे में गलत महसूस करता हूं ...

jquery.validate.unobtrusive.js
jquery.validate.unobtrusive.min.js

एक जैसे नहीं हैं ...

jquery.unobtrusive-ajax.js
jquery.unobtrusive-ajax.min.js

मैंने "अविभाज्य" पढ़ा और माना कि मेरे पास सही पुस्तकालय था - AJAX वाले लोगों की आवश्यकता है!


मेरे लिए यह NuGet के माध्यम से AJAX Unobtrusive लाइब्रेरी डाउनलोड करने के बाद काम किया:

 Search and install via NuGet Packages:   Microsoft.jQuery.Unobtrusive.Ajax

दृश्य में जोड़ने के लिए jquery और AJAX Unobtrusive के संदर्भ:

@Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"> </script>

इसके बाद अजाक्स एक्शनलिंक और div हम परिणाम प्रस्तुत करना चाहते थे:

@Ajax.ActionLink(
    "Click Here to Load the Partial View", 
    "ActionName", 
    null, 
    new AjaxOptions { UpdateTargetId = "toUpdate" }
)

<div id="toUpdate"></div>

यदि आप अपने विचार के अंदर अपने आंशिक दृश्य की सामग्री को पॉप्युलेट करना चाहते हैं तो आप इसका उपयोग कर सकते हैं

@Html.Partial("PartialViewName")

या

{@Html.RenderPartial("PartialViewName");}

यदि आप सर्वर अनुरोध करना चाहते हैं और डेटा को संसाधित करना चाहते हैं और फिर उस डेटा से भरे मुख्य दृश्य को आंशिक दृश्य वापस कर सकते हैं जिसका आप उपयोग कर सकते हैं

...
    @Html.Action("Load", "Home")
...

public PartialViewResult Load()
{
    return PartialView("_LoadView");
}

यदि आप चाहते हैं कि उपयोगकर्ता लिंक पर क्लिक करें और फिर आंशिक दृश्य के डेटा को पॉप्युलेट करें जिसका आप उपयोग कर सकते हैं:

@Ajax.ActionLink(
    "Click Here to Load the Partial View", 
    "ActionName", 
    "ControlerName",
    null, 
    new AjaxOptions { UpdateTargetId = "toUpdate" }
)

यदि आप सीधे मुख्य दृश्य के अंदर आंशिक दृश्य लोड करना चाहते हैं तो आप Html.Action सहायक का उपयोग कर सकते हैं:

@Html.Action("Load", "Home")

या यदि आप लोड एक्शन के माध्यम से नहीं जाना चाहते हैं तो एचटीएमएलपार्टियल हेप्लर का उपयोग करें:

@Html.Partial("_LoadView")

अगर आप Ajax.ActionLink का उपयोग करना चाहते हैं, तो अपने Html.ActionLink साथ बदलें:

@Ajax.ActionLink(
    "load partial view", 
    "Load", 
    "Home", 
    new AjaxOptions { UpdateTargetId = "result" }
)

और निश्चित रूप से आपको अपने पृष्ठ में एक धारक शामिल करना होगा जहां आंशिक प्रदर्शित किया जाएगा:

<div id="result"></div>

इसमें शामिल करना भी न भूलें:

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

Ajax.* को सक्षम करने के लिए अपने मुख्य दृश्य में Ajax.* हेल्पर्स। और सुनिश्चित करें कि आपके web.config में अविभाज्य जावास्क्रिप्ट सक्षम है (यह डिफ़ॉल्ट रूप से होना चाहिए):

<add key="UnobtrusiveJavaScriptEnabled" value="true" />

लेनिन के रूप में मुझे बिल्कुल वही समस्या थी। मैंने यहाँ और एक दर्जन अन्य स्थानों का सुझाव दिया है। अंततः मेरे लिए काम करने वाली चीज बस जोड़ रही थी

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")

मेरे लेआउट में ...





asp.net-mvc-partialview