रेंडर आंशिक दृश्य ASP.NET MVC में jQuery का उपयोग करना

Question

मैं jquery का उपयोग करके आंशिक दृश्य कैसे प्रस्तुत करूं?

हम इस तरह से आंशिक दृश्य प्रस्तुत कर सकते हैं:

<% Html.RenderPartial("UserDetails"); %>

हम jquery का उपयोग करके कैसे कर सकते हैं?

Comments

आप नीचे दिए गए लेख को भी देख सकते हैं। tugberkugurlu.com/archive/… यह एक अलग दृष्टिकोण का अनुसरण करता है और रास्ते को बढ़ाता है।

— tugberk

बेवकूफ़ना सवाल। क्या UserDetails एक cshtml पृष्ठ के रूप में एक आंशिक दृश्य है: UserDetails.cshtml? मैं एक आंशिक दृश्य लोड करने का प्रयास कर रहा हूं। और आम तौर पर मैं उपयोग करता हूँ: @ Html.Partial ("~ / Views / PartialViews / FirstPartialViewTwo.cshtml")

— जॉर्ज Geschwend

@GeorgeGeschwend, यहां कुछ भी बेवकूफी नहीं है, जब तक कोई इसका जवाब नहीं दे सकता। UserDetails (UserDetails.cshtml) उपयोगकर्ता नियंत्रक के अंदर आंशिक दृश्य है। के रूप में चिह्नित जवाब की टिप्पणियों में, इसके बेहतर उरल का उपयोग करें। दृश्य के पूर्ण पथ को हार्ड कोडिंग के बजाय।

— प्रसाद

Answer 1

आप केवल jQuery का उपयोग करके आंशिक दृश्य प्रस्तुत नहीं कर सकते। हालाँकि, आप एक विधि (क्रिया) को कॉल कर सकते हैं, जो आपके लिए आंशिक दृश्य प्रस्तुत करेगी और इसे jQuery / AJAX का उपयोग करके पृष्ठ में जोड़ेगी। नीचे, हमारे पास एक बटन क्लिक हैंडलर है जो बटन पर एक डेटा विशेषता से कार्रवाई के लिए url को लोड करता है और अद्यतन सामग्री के साथ आंशिक दृश्य में शामिल DIV को बदलने के लिए GET अनुरोध को बंद करता है।

$('.js-reload-details').on('click', function(evt) {
    evt.preventDefault();
    evt.stopPropagation();

    var $detailDiv = $('#detailsDiv'),
        url = $(this).data('url');

    $.get(url, function(data) {
        $detailDiv.replaceWith(data);         
    });
});

जहां उपयोगकर्ता नियंत्रक के पास विवरणों के नाम से एक क्रिया है:

public ActionResult Details( int id )
{
    var model = ...get user from db using id...

    return PartialView( "UserDetails", model );
}

यह मान रहा है कि आपका आंशिक दृश्य आईडी के साथ एक कंटेनर है detailsDivताकि आप कॉल के परिणाम की सामग्री के साथ पूरी चीज को बदल दें।

पैरेंट व्यू बटन

 <button data-url='@Url.Action("details","user", new { id = Model.ID } )'
         class="js-reload-details">Reload</button>

Userनियंत्रक नाम है और detailsकार्रवाई का नाम है @Url.Action()। UserDetails आंशिक दृश्य

<div id="detailsDiv">
    <!-- ...content... -->
</div>

Comments

मैं आपके द्वारा दिए गए इस उदाहरण कोड के साथ खराब अनुरोध करता रहता हूं। मैंने जैसा भी कॉपी किया है और अभी जिस कंट्रोलर एक्शन में जाना चाहिए, उसे बदला है। मुझे यकीन नहीं है कि "उपयोगकर्ता" किसके लिए है।

— चोबो 2

मैंने कुछ "संभावना" कंट्रोलर और एक्शन नामों का उपयोग किया है क्योंकि आप किसी भी कोड को शामिल नहीं करते हैं जिसे हम जा सकते हैं। बस अपने विवरण के साथ "विवरण" बदलें और अपने नियंत्रक नाम के साथ "उपयोगकर्ता"।

— तवानफोसन

एक महान जवाब tvanfosson के लिए फिर से धन्यवाद।

किसी भी विचार यह रेजर के साथ कैसे काम करेगा? $ .get ("@ Url.Action (\" घोषणापत्र \ ", \" अपलोड \ ", नया {आईडी =" + कुंजी + "}), फ़ंक्शन (डेटा) {$ (" <div /> ") की कोशिश की .replaceWith (डेटा);});

— पैट्रिक ली स्कॉट

@Zapnologica - यदि आप पूरी तालिका को पुनः लोड कर रहे हैं, तो आपको प्लगइन को फिर से लागू करने की आवश्यकता हो सकती है क्योंकि DOM तत्वों को मूल रूप से प्रतिस्थापित किया गया था। इसे JSON, datatables.net/examples/data_source/server_side.html

— tvanfosson

Answer 2

मैंने ऐसा करने के लिए ajax लोड का उपयोग किया है:

$('#user_content').load('@Url.Action("UserDetails","User")');

Comments

आम तौर पर मुझे लगता है कि आप रास्ता बेहतर-कोडिंग के बजाय Url.Action सहायक के साथ जा रहे हैं। यदि आपकी वेब साइट रूट के बजाय उपनिर्देशिका में है तो यह टूटने वाली है। सहायक का उपयोग उस समस्या को ठीक करता है और आपको गतिशील रूप से निर्धारित मानों के साथ पैरामीटर जोड़ने की अनुमति देता है।

— tvanfosson

आप $ ('# user_content') कर सकते हैं। लोड ('@ Url.Content ("~ / User / UserDetails")') के आसपास पाने के लिए- मैं अक्सर इस पद्धति का उपयोग करता हूं अगर मुझे querystring params पर थप्पड़ मारने के लिए जावास्क्रिप्ट की आवश्यकता होती है url के अंत में

— Shawson

इस उत्तर में, UserDetailsएक क्रिया का नाम है, न कि आंशिक दृश्य, सही?

— मैक्सिम वी। पावलोव

@Prasad: Urls हमेशा का उपयोग कर मूल्यांकन किया जाना चाहिए @Url.Action("ActionName","ControllerName", new { area = "AreaName" } )बजाय कर Handcoding ।

— इमाद अलज़ानी

@PKKG। @ Url.Action () केवल रेजर में मूल्यांकन करता है। यह तब काम नहीं करता है जब ओपी अपना कोड एक अलग js फ़ाइल में डालना चाहता है और इसे संदर्भित करता है।

— माइकल

Answer 3

उनके जवाब के साथ @tvanfosson चट्टानें।

हालाँकि, मैं js और एक छोटे नियंत्रक जाँच में सुधार का सुझाव दूंगा।

जब हम @Urlकिसी कार्रवाई को कॉल करने के लिए सहायक का उपयोग करते हैं, तो हम एक स्वरूपित html प्राप्त करने जा रहे हैं। सामग्री को अपडेट करना बेहतर होगा ( .html) वास्तविक तत्व ( .replaceWith) नहीं।

इसके बारे में अधिक: jQuery के प्रतिस्थापन () और HTML () के बीच क्या अंतर है?

$.get( '@Url.Action("details","user", new { id = Model.ID } )', function(data) {
    $('#detailsDiv').html(data);
}); 

यह पेड़ों में विशेष रूप से उपयोगी है, जहां सामग्री को कई बार बदला जा सकता है।

नियंत्रक पर हम आवश्यकता के आधार पर कार्रवाई का पुन: उपयोग कर सकते हैं:

public ActionResult Details( int id )
{
    var model = GetFooModel();
    if (Request.IsAjaxRequest())
    {
        return PartialView( "UserDetails", model );
    }
    return View(model);
}

Answer 4

एक और चीज आप आजमा सकते हैं (तवान्फोसन के जवाब के आधार पर) यह है:

<div class="renderaction fade-in" 
    data-actionurl="@Url.Action("details","user", new { id = Model.ID } )"></div>

और फिर आपके पेज के स्क्रिप्ट सेक्शन में:

<script type="text/javascript">
    $(function () {
        $(".renderaction").each(function (i, n) {
            var $n = $(n),
                url = $n.attr('data-actionurl'),
                $this = $(this);

            $.get(url, function (data) {
                $this.html(data);
            });
        });
    });

</script>

यह ajax का उपयोग करके आपके @ Html.RenderAction को रेंडर करता है।

और यह सब धूर्त sjmansy बनाने के लिए आप इस सीएसएस का उपयोग कर एक फीका प्रभाव जोड़ सकते हैं:

/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
    opacity: 0; /* make things invisible upon start */
    -webkit-animation: fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation: fadeIn ease-in 1;
    -o-animation: fadeIn ease-in 1;
    animation: fadeIn ease-in 1;
    -webkit-animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}

मैन आई एमवीएक्स :-)

Comments

आपने प्रत्येक कार्य क्यों किया? यह काम किस प्रकार करता है? क्या आप कुछ ऐसा करते हैं: data-actionurl = "@ Url.Action (" विवरण "," उपयोगकर्ता ", नया {id = Model.ID} data-actionurl =" एक और कार्रवाई "?

— user3818229

नहीं, प्रत्येक फ़ंक्शन उन सभी HTML तत्वों पर लूप करता है जिनके पास डेटा-एक्शन्यूरल विशेषता है और एक्शन विधि के लिए एक अजाक्स अनुरोध को लागू करके इसे भरता है। इतने सारे <div class="renderaction fade-in" ...></div>तत्व।

— पीटर

Answer 5

आपको अपने नियंत्रक पर एक एक्शन बनाने की आवश्यकता होगी जो "UserDetails" के आंशिक परिणाम या नियंत्रण को प्रदान करता है। तो बस प्रदर्शित करने के लिए प्रदान की गई HTML प्राप्त करने के लिए क्रिया को कॉल करने के लिए jQuery से एक Http Get या Post का उपयोग करें।

Comments

इस jQuery फ़ंक्शन में अपडेट किए गए डेटा को ताज़ा करने के लिए समय अंतराल कैसे सेट करें

— नीरज मेहता

Answer 6

समान परिणाम प्राप्त करने के लिए मानक अजाक्स कॉल का उपयोग करना

        $.ajax({
            url: '@Url.Action("_SearchStudents")?NationalId=' + $('#NationalId').val(),
            type: 'GET',
            error: function (xhr) {
                alert('Error: ' + xhr.statusText);

            },
            success: function (result) {

                $('#divSearchResult').html(result);
            }
        });




public ActionResult _SearchStudents(string NationalId)
        {

           //.......

            return PartialView("_SearchStudents", model);
        }

Answer 7

मैंने इसे इस तरह किया।

$(document).ready(function(){
    $("#yourid").click(function(){
        $(this).load('@Url.Action("Details")');
    });
});

विवरण विधि:

public IActionResult Details()
        {

            return PartialView("Your Partial View");
        }

Answer 8

यदि आपको गतिशील रूप से उत्पन्न मान का संदर्भ देने की आवश्यकता है तो आप @ URL.Action के बाद क्वेरी स्ट्रिंग पैरामीटर्स भी संलग्न कर सकते हैं:

    var id = $(this).attr('id');
    var value = $(this).attr('value');
    $('#user_content').load('@Url.Action("UserDetails","User")?Param1=' + id + "&Param2=" + value);


    public ActionResult Details( int id, string value )
    {
        var model = GetFooModel();
        if (Request.IsAjaxRequest())
        {
            return PartialView( "UserDetails", model );
        }
        return View(model);
    }