এএসপি.নেট এমভিসিতে jQuery ব্যবহার করে আংশিক দৃশ্য রেন্ডার করুন

Question

আমি কীভাবে jquery ব্যবহার করে আংশিক দৃশ্য উপস্থাপন করব?

আমরা এর মতো আংশিক ভিউ রেন্ডার করতে পারি:

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

কীভাবে আমরা jquery ব্যবহার করে একই কাজ করতে পারি?

Comments

আপনি নীচের নিবন্ধটিও দেখতে পারেন। tugberkugurlu.com/archive/… এটি একটি ভিন্ন পদ্ধতির অনুসরণ করে এবং উপায়টিকে বাড়ায়।

— tugberk

মূঢ় প্রশ্ন. ইউজারডিটেলগুলি কি সিএসটিএমএল পৃষ্ঠা হিসাবে আংশিক দৃষ্টিভঙ্গি: ইউজারডেটেলস.এইচটিটিএমএল? আমি একটি আংশিক ভিউ লোড করার চেষ্টা করছি। এবং সাধারণত আমি ব্যবহার করব: @ এইচটিএমএল. পার্টিশিয়াল ("~ / দর্শন / আংশিক দেখুন / ফার্স্ট পার্টিশিয়ালভিউটো টু সিএসটিএমএল")

— জর্জ গেচভেন্ড 4'18

@ জর্জেগচেভেন্ড, কেউ এখানে সাড়া না দেওয়া পর্যন্ত এখানে কিছুই বোকা নয়। ইউজারডেটেলস (ইউজারডেটেলস.এইচটিটিএমএল) হ'ল ইউজার কন্ট্রোলারের অভ্যন্তরীণ দৃষ্টিভঙ্গি। চিহ্নিত উত্তরের মতামত অনুসারে, দৃশ্যের পুরো পথটিকে শক্ত কোডিংয়ের পরিবর্তে url.Action ব্যবহার করা আরও ভাল।

— প্রসাদ

Answer 1

আপনি কেবল jQuery ব্যবহার করে আংশিক দৃশ্য সরবরাহ করতে পারবেন না। তবে আপনি এমন একটি পদ্ধতিতে (ক্রিয়া) কল করতে পারেন যা আপনার জন্য আংশিক দৃষ্টিভঙ্গি সরবরাহ করবে এবং jQuery / AJAX ব্যবহার করে পৃষ্ঠাটিতে যুক্ত করবে। নীচে, আমাদের একটি বাটন ক্লিক হ্যান্ডলার রয়েছে যা বোতামের কোনও ডেটা অ্যাট্রিবিউট থেকে ক্রিয়াকলাপের জন্য url লোড করে এবং আংশিক দৃশ্যে থাকা ডিআইভিকে আপডেট হওয়া সামগ্রীর সাথে প্রতিস্থাপনের জন্য একটি জিইটি অনুরোধ বন্ধ করে দেয়।

$('.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()। ব্যবহারকারী বিবরণ আংশিক দেখুন

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

Comments

আপনার দেওয়া এই উদাহরণ কোডটি সহ আমি খারাপ অনুরোধ পাচ্ছি। আমি যেমনটি অনুলিপি করেছি এবং ঠিক তেমন কন্ট্রোলার অ্যাকশনটি পরিবর্তন করা উচিত। "ব্যবহারকারী" কীসের জন্য তা আমি নিশ্চিত নই।

— chobo2

আপনি স্রেফ কিছু "সম্ভাব্য" নিয়ন্ত্রক এবং ক্রিয়া নাম ব্যবহার করেছেন যেহেতু আপনি যে কোনও কোড দিয়ে যেতে পারেন তাতে আপনি অন্তর্ভুক্ত করেননি। আপনার ক্রিয়াকলাপের সাথে কেবল "বিশদ" এবং আপনার নিয়ামকের নামের সাথে "ব্যবহারকারী" প্রতিস্থাপন করুন।

— tvanfosson

একটি দুর্দান্ত উত্তরের জন্য আবার ধন্যবাদ tvanfosson।

কোনও ধারণা কীভাবে এটি রেজারের সাথে কাজ করবে? get .get ("@ url.Action (\" ম্যানিফেস্ট \ ", \" আপলোড \ ", নতুন {আইডি =" + কী + "})", ফাংশন (ডেটা) {$ ("<div />") চেষ্টা করেছেন .replaceWith (ডেটা);});

— প্যাট্রিক লি স্কট

@ জাপনোলজিকা - আপনি যদি পুরো টেবিলটি পুনরায় লোড করছেন তবে আপনাকে সম্ভবত প্লাগইনটি পুনরায় প্রয়োগ করতে হবে যেহেতু এটি মূলত সংযুক্ত ডিওএম উপাদানগুলির সাথে প্রতিস্থাপন করা হয়েছিল। এটিকে এমন কোনও পদ্ধতির সাথে সংযুক্ত করা ভাল যা জেএসএন

— উদাহরণস্বরূপ

Answer 2

আমি এটি করতে এজ্যাক্স লোড ব্যবহার করেছি:

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

Comments

সাধারণত আমি মনে করি আপনি হার্ড-কোডিংয়ের পরিবর্তে url.Aक्शन সহায়কের সাথে যাওয়া ভাল। আপনার ওয়েব সাইটটি মূলের পরিবর্তে উপ-ডিরেক্টরিতে থাকলে এটি ভাঙ্গতে চলেছে। সহায়ক ব্যবহার করে সেই সমস্যাটি সংশোধন করে এবং আপনাকে গতিশীল সেট মান সহ পরামিতি যুক্ত করতে দেয় allows

— tvanfosson

আপনি $ ('# ইউজার_ কনটেন্ট') করতে পারেন। লোড ('@ আরল.কন্টেন্ট ("~ / ইউজার / ইউজারডিটেলস"))') এটি জানতে- আমি প্রায়শই এই পদ্ধতিটি ব্যবহার করি যদি আমার কাছে জাভাস্ক্রিপ্টের প্রয়োজন হয় ক্যোরিস্ট্রিং প্যারামগুলিতে চড় মারার জন্য p ইউআরএল শেষে

— শাওসন

এই উত্তরে, UserDetailsকোনও ক্রিয়াকলাপের নাম, আংশিক দৃষ্টিভঙ্গি নয়, তাই না?

— ম্যাক্সিমাম ভি পাভলভ

@Prasad: Url সমূহ সবসময় ব্যবহার মূল্যায়ন করা উচিত @Url.Action("ActionName","ControllerName", new { area = "AreaName" } )পরিবর্তে করছেন Handcoding ।

— ইমাদ আলাজানী

@PKKG। @ ইউআরএল.অ্যাকশন () কেবল রেজারে মূল্যায়ন করে। যদি ওপি তাদের কোডটি একটি আলাদা জেএস ফাইলে রাখতে এবং এটি উল্লেখ করতে চায় তবে এটি কাজ করে না।

— মাইকেল 21

Answer 3

@ উত্তর ফসন তার উত্তর দিয়ে দুলছেন।

তবে, আমি জেএস এবং একটি ছোট নিয়ামক চেকের মধ্যে উন্নতির পরামর্শ দেব improvement

যখন আমরা @Urlকোনও অ্যাকশন কল করতে সাহায্যকারী ব্যবহার করি তখন আমরা একটি বিন্যাসিত এইচটিএমএল পেতে যাচ্ছি। কন্টেন্টটি আপডেট করা ভাল ( .html) প্রকৃত উপাদান ( .replaceWith) নয়।

এ সম্পর্কে আরও: jQuery এর প্রতিস্থাপনের সাথে () এবং এইচটিএমএল () এর মধ্যে পার্থক্য কী?

$.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>

এটি আপনার @ এইচটিএমএলকে উপস্থাপন করে a

এবং এটিকে সমস্ত ভক্তিমূলক sjmansy করতে আপনি এই CSS ব্যবহার করে একটি ম্লান-ইফেক্ট যুক্ত করতে পারেন:

/* 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

কেন আপনি প্রতিটি ফাংশন? কিভাবে এটা কাজ করে? আপনি কি কিছু মেনা করেন: ডেটা-অ্যাকশনুরল = "@ আরআল। অ্যাকশন (" বিবরণ "," ব্যবহারকারী ", নতুন {আইডি = মডেল.আইডি} ডেটা-অ্যাকশনআর =" অন্য একশন "?

— ব্যবহারকারীর 3818229

না, প্রতিটি ফাংশন এমন সমস্ত এইচটিএমএল উপাদানগুলির উপরে লুপ করে যাতে ডেটা-অ্যাকশনুর বৈশিষ্ট্য রয়েছে এবং ক্রিয়া পদ্ধতির জন্য অজ্যাক্স অনুরোধের মাধ্যমে এটি পূরণ করে। একাধিক <div class="renderaction fade-in" ...></div>উপাদান।

— পিটার

Answer 5

আপনার কন্ট্রোলারে আপনাকে এমন একটি ক্রিয়া তৈরি করতে হবে যা "ইউজারডিটেলস" আংশিক দর্শন বা নিয়ন্ত্রণের রেন্ডারড ফলাফলকে দেয়। তারপরে রেন্ডার এইচটিএমএল প্রদর্শিত হওয়ার জন্য ক্রিয়াকে কল করতে কেবল jQuery থেকে একটি এইচটিপি গেট বা পোস্ট ব্যবহার করুন।

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

যদি আপনার একটি গতিশীল উত্পন্ন মান উল্লেখ করতে হয় তবে আপনি @ ইউআরএল-এর পরে কোয়েরি স্ট্রিং পরামিতিগুলি যুক্ত করতে পারেন like

    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);
    }