জাভাস্ক্রিপ্টের মধ্যে রেজার ব্যবহার করা

Question

এটি জাভাস্ক্রিপ্টের মধ্যে রেজার সিনট্যাক্স ব্যবহার করার মতো কোনও কৌশল রয়েছে যা একটি দর্শন ( cshtml) হিসাবে রয়েছে?

আমি একটি গুগল মানচিত্রে চিহ্নিতকারী যুক্ত করার চেষ্টা করছি ... উদাহরণস্বরূপ, আমি এটি চেষ্টা করেছিলাম, তবে আমি সংখ্যায় সংকলন ত্রুটি পেয়েছি:

<script type="text/javascript">

    // Some JavaScript code here to display map, etc.

    // Now add markers
    @foreach (var item in Model) {

        var markerlatLng = new google.maps.LatLng(@(Model.Latitude), @(Model.Longitude));
        var title = '@(Model.Title)';
        var description = '@(Model.Description)';
        var contentString = '<h3>' + title + '</h3>' + '<p>' + description + '</p>'

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var marker = new google.maps.Marker({
            position: latLng,
            title: title,
            map: map,
            draggable: false
        });

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });
    }
</script>

Comments

আপনি @:সিনট্যাক্স সম্পর্কিত আমার আপডেটে আগ্রহী হতে পারেন ।

— স্ট্রিপলিং ওয়ারিয়র

@ যে কেউ এইভাবে এটি বিবেচনা করে অন্তত একটি পৃথক স্ক্রিপ্ট ট্যাগে ডেটা রাখুন যা কিছু জেএসএনকে কেবল সংজ্ঞায়িত করে যা জেএসে ব্যবহৃত হয়। সামনের প্রান্তে ব্যাক-এন্ড-কাপলড জেএস বেশ কয়েকটি অনুষ্ঠানে আমার জন্য একটি উত্তরাধিকার পিআইটিএ হয়েছে। আপনার যদি না থাকে তবে কোড সহ কোডটি লিখবেন না। পরিবর্তে ডেটা হ্যান্ড অফ করুন।

— এরিক রেপেন

Answer 1

এখানে<text> বর্ণিত ছদ্ম-উপাদানটি ব্যবহার করুন , রেজার সংকলকটিকে পুনরায় সামগ্রী মোডে বাধ্য করতে:

<script type="text/javascript">

    // Some JavaScript code here to display map, etc.


    // Now add markers
    @foreach (var item in Model) {
        <text>
            var markerlatLng = new google.maps.LatLng(@(Model.Latitude), @(Model.Longitude));
            var title = '@(Model.Title)';
            var description = '@(Model.Description)';
            var contentString = '<h3>' + title + '</h3>' + '<p>' + description + '</p>'

            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });

            var marker = new google.maps.Marker({
                position: latLng,
                title: title,
                map: map,
                draggable: false
            });

            google.maps.event.addListener(marker, 'click', function () {
                infowindow.open(map, marker);
            });
        </text>
    }
</script>

হালনাগাদ:

স্কট গুথ্রি সম্প্রতি@: রেজারে সিনট্যাক্স সম্পর্কে পোস্ট করেছেন , যা <text>আপনার কাছে জাভাস্ক্রিপ্ট কোড যুক্ত করতে কেবল এক বা দুটি লাইন থাকলে তা ট্যাগের চেয়ে কিছুটা কম un নিম্নলিখিত পদ্ধতিটি সম্ভবত পছন্দনীয় হবে, কারণ এটি উত্পন্ন এইচটিএমএলের আকার হ্রাস করে। (আপনি এমনকি অ্যাডমার্কার ফাংশনটিকে স্থিতিশীল, ক্যাশেড জাভাস্ক্রিপ্ট ফাইলটিতে আরও আকার হ্রাস করতে সরাতে পারেন):

<script type="text/javascript">

    // Some JavaScript code here to display map, etc.
    ...
    // Declare addMarker function
    function addMarker(latitude, longitude, title, description, map)
    {
        var latLng = new google.maps.LatLng(latitude, longitude);
        var contentString = '<h3>' + title + '</h3>' + '<p>' + description + '</p>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var marker = new google.maps.Marker({
            position: latLng,
            title: title,
            map: map,
            draggable: false
        });

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });
    }

    // Now add markers
    @foreach (var item in Model) {
        @:addMarker(@item.Latitude, @item.Longitude, '@item.Title', '@item.Description', map);
    }
</script>

কলটিকে addMarkerআরও সঠিক করার জন্য উপরের কোডটি আপডেট করুন ।

স্পষ্ট করার জন্য, কলটি অনেকটা সি # কোডের মতো দেখানো @:সত্ত্বেও, রেজারটিকে পাঠ্য মোডে ফিরিয়ে দেয় addMarker। রেজার তারপরে @item.Propertyসিনট্যাক্সটি তুলে ধরে বলে যে এটি সরাসরি সেই বৈশিষ্ট্যগুলির সামগ্রীতে আউটপুট করে।

আপডেট 2

এটি লক্ষণীয় যে জাভাস্ক্রিপ্ট কোড রাখার জন্য ভিউ কোডটি সত্যই কোনও ভাল জায়গা নয়। জাভাস্ক্রিপ্ট কোডটি একটি স্ট্যাটিক .jsফাইলে স্থাপন করা উচিত এবং তারপরে এটি এজাক্স কল থেকে বা data-এইচটিএমএল থেকে বৈশিষ্ট্যগুলি স্ক্যান করে প্রয়োজনীয় ডেটা পাওয়া উচিত । আপনার জাভাস্ক্রিপ্ট কোডটি ক্যাশে করা সম্ভব করার পাশাপাশি এটি এনকোডিংয়ের সমস্যাগুলি এড়িয়ে চলে, যেহেতু রেজারটি HTML এর জন্য এনকোড করার জন্য ডিজাইন করা হয়েছে, তবে জাভাস্ক্রিপ্ট নয়।

কোড দেখুন

@foreach(var item in Model)
{
    <div data-marker="@Json.Encode(item)"></div>
}

জাভাস্ক্রিপ্ট কোড

$('[data-marker]').each(function() {
    var markerData = $(this).data('marker');
    addMarker(markerData.Latitude, markerData.Longitude,
              markerData.Description, markerData.Title);
});

Comments

আপনার আপডেট হওয়া উদাহরণটি আমি বুঝতে পারি না। অ্যাডমার্কারের কাজটি কি সঠিক?

— এনভিএম

@ এনভিএম: একই জাভাস্ক্রিপ্ট কোডটি বেশ কয়েকবার আউটপুট করার পরিবর্তে, আমি একটি একক জাভাস্ক্রিপ্ট ফাংশন (যা একটি ক্যাশেড .js ফাইলে রাখা যেতে পারে) তৈরি করা এবং সেই ফাংশনে কয়েকটি কল আউটপুট দেওয়ার পরামর্শ দিচ্ছি। ফাংশনটি সঠিক কিনা সে সম্পর্কে আমার কোনও ধারণা নেই: আমি কেবল এটি অপের কোডটিতে ভিত্তি করেছিলাম।

— স্ট্রিপলিং ওয়ারিয়র

পূর্বাভাসে কেন '@ মডেল.আলক্ষ'। আইটেম না কেন? স্পষ্টতা?

— এনভিএম

আপনার সি # ভেরিয়েবলগুলি এড়ানো দরকার। যদি @item.Titleএকটি একক উক্তি থাকে তবে এই কোডটি বিস্ফোরিত হবে।

— এমপিএন

@ মার্ক: ভাল পর্যবেক্ষণ। আসলে, আমি সাধারণত জাভাস্ক্রিপ্ট এবং খুর মেশা না এ সব আমার নিজের কোডে: আমি রাজো ব্যবহার করার জন্য অন্তর্ভুক্ত এইচটিএমএল জেনারেট করতে পছন্দ data-বৈশিষ্ট্যাবলী, এবং তারপর স্ট্যাটিক, বিচক্ষণ JavaScript ব্যবহার DOM থেকে এই তথ্য সংগ্রহ করা হয়। তবে সেই পুরো আলোচনাটি ছিল প্রশ্নের ক্ষেত্রের বাইরেও।

— স্ট্রিপলিং ওয়ারিয়র

Answer 2

আমি এই সহায়ক সহায়কটি লিখেছি। এটি রাখুন App_Code/JS.cshtml:

@using System.Web.Script.Serialization
@helper Encode(object obj)
{
    @(new HtmlString(new JavaScriptSerializer().Serialize(obj)));
}

তারপরে আপনার উদাহরণে আপনি এর মতো কিছু করতে পারেন:

var title = @JS.Encode(Model.Title);

লক্ষ্য করুন আমি কীভাবে এর চারপাশে উদ্ধৃতি রাখি না। শিরোনামে ইতিমধ্যে কোটস থাকলে এটি বিস্ফোরিত হবে না। অভিধানগুলি এবং বেনামে অবজেক্টগুলি খুব সুন্দরভাবে পরিচালনা করার জন্য মনে হচ্ছে!

Comments

আপনি যদি ভিউটিতে কোনও বস্তুকে এনকোড করার চেষ্টা করছেন তবে সাহায্যকারী কোড তৈরি করার প্রয়োজন নেই, একটি ইতিমধ্যে বিদ্যমান। আমরা এটি সমস্ত সময় ব্যবহার করি@Html.Raw(Json.Encode(Model))

— পিজেএইচ

আপনি নিজের উত্তর পিজেএইচ প্রসারিত করতে পারেন? আপনি কেবল "মডেল" এনকোডিং করে কীভাবে আপনি শিরোনামটি নির্দিষ্ট করবেন?

— obesechicken13

এছাড়াও, আমি যখন মডেলটির সাথে এই পদ্ধতির চেষ্টা করেছি it শিরোনামে এনকোডেড জাভাস্ক্রিপ্টের চারপাশে আমি কিছু অতিরিক্ত উদ্ধৃতি পাই। আমি উদ্ধৃতি থেকে মুক্তি পেতে পারি না যদিও আমি এটিকে অন্য কিছুতে সম্মতি দিচ্ছি। সেই উদ্ধৃতিগুলি আপনার জাসের অংশ হয়ে যায়।

— স্থূলপরিচয় 13

পিজেএইচের মন্তব্য চমত্কার। কোনওভাবে আপনি জাভাস্ক্রিপ্ট ব্লকটিতে সার্ভার সাইড মডেলগুলি deserialize করেন।

— নেটফিড

Answer 3

আপনি একটি বৃত্তাকার গর্তে বর্গক্ষেত্রের খোঁচার জ্যাম দেওয়ার চেষ্টা করছেন।

রেজারটি এইচটিএমএল-উত্পাদক টেম্পলেট ভাষা হিসাবে তৈরি হয়েছিল। আপনি এটি খুব ভাল জাভাস্ক্রিপ্ট কোড উত্পন্ন করতে পেতে পারেন, কিন্তু এটি এর জন্য ডিজাইন করা হয়নি।

উদাহরণস্বরূপ: যদি Model.Titleএকটি অ্যাডাস্ট্রোফ থাকে? এটি আপনার জাভাস্ক্রিপ্ট কোডটি ভেঙে দেবে এবং রেজার এটি ডিফল্টরূপে সঠিকভাবে এড়াতে পারবে না।

কোনও সহায়ক ফাংশনে স্ট্রিং জেনারেটর ব্যবহার করা সম্ভবত আরও উপযুক্ত হবে। সম্ভবত এই পদ্ধতির কম অযৌক্তিক পরিণতি হবে।

Answer 4

আপনি কোন নির্দিষ্ট ত্রুটিগুলি দেখছেন?

এরকম কিছু আরও ভাল কাজ করতে পারে:

<script type="text/javascript">

//now add markers
 @foreach (var item in Model) {
    <text>
      var markerlatLng = new google.maps.LatLng(@Model.Latitude, @Model.Longitude);
      var title = '@(Model.Title)';
      var description = '@(Model.Description)';
      var contentString = '<h3>' + title + '</h3>' + '<p>' + description + '</p>'
    </text>
}
</script>

দ্রষ্টব্য যে রেজারটি মার্কআপ মোডে স্যুইচ করা উচিত তা বোঝাতে আপনার <text>পরে জাদুকরী ট্যাগের প্রয়োজন foreach।

Comments

পুনরাবৃত্তি মডেল (পূর্বে) এবং @ মডেল চিহ্নিত হয়েছে? পুনরাবৃত্তি ফাংশন কি? আমি মনে করি এটি কিছু মিস করেছে। এটা হতে পারে @ item.Latitude ইত্যাদি

— নুরি YILMAZ

Answer 5

এটি বাহ্যিক জাভাস্ক্রিপ্ট ফাইল নয়, যতক্ষণ না এটি কোনও সিএসএইচটিএমএল পৃষ্ঠায় রয়েছে ততক্ষণ তা কাজ করবে।

রেজার টেম্পলেট ইঞ্জিনটি কী আউটপুট দিচ্ছে তা যত্ন করে না এবং এটি <script>অন্য ট্যাগগুলির মধ্যে পার্থক্য করে না ।

তবে এক্সএসএস আক্রমণ রোধ করতে আপনার স্ট্রিংগুলি এনকোড করা দরকার ।

Comments

আমি আমার প্রশ্নটি আপডেট করেছি, এটি আমার-কোনও ধারণার পক্ষে কাজ করে না কী ভুল? ধন্যবাদ

— রাক্লোস

@ আরক্লোস: আপনার স্ট্রিং থেকে বাঁচতে হবে কল করুনHTML.Raw(Server.JavaScriptStringEncode(...))

— স্ল্যাक्स

HTML.Raw(HttpUtility.JavaScriptStringEncode(...))- সার্ভারের সম্পত্তিটির এখন এই পদ্ধতি নেই। এইচটিটিপি ইউটিলিটি করে।

— it3xl

The Razor template engine doesn't care what it's outputting and does not differentiate between <script> or other tags.আপনি কি নিশ্চিত যে এটি সম্পর্কে? stackoverflow.com/questions/33666065/…

— এইচএমআর

@ এইচএমআর: আমি যখন এই উত্তরটি লিখি তখন সেই বৈশিষ্ট্যটির অস্তিত্ব ছিল না।

— এসএলএক্স

Answer 6

আমি "<! -" "->" একটি "পাঠ্য>" এর মতো পছন্দ করি

<script type="text/javascript">
//some javascript here     

@foreach (var item in itens)
{                 
<!--  
   var title = @(item.name)
    ...
-->

</script>

Comments

এটি আমার কাছে অদ্ভুতভাবে সমাধান করা সমাধান, কারণ আমার যে পাঠ্যটি অন্তর্ভুক্ত করা দরকার ছিল তার কিছু @:<text>

— বিযুক্তি ছিল যা রেজারটি

Answer 7

একটি বিষয় যুক্ত করতে হবে - আমি দেখতে পেয়েছি যে রেজার সিনট্যাক্স হিলিটার (এবং সম্ভবত সংকলক) উদ্বোধনী বন্ধনীটির অবস্থানটি আলাদাভাবে ব্যাখ্যা করে:

<script type="text/javascript">
    var somevar = new Array();

    @foreach (var item in items)
    {  // <----  placed on a separate line, NOT WORKING, HILIGHTS SYNTAX ERRORS
        <text>
        </text>
    }

    @foreach (var item in items) {  // <----  placed on the same line, WORKING !!!
        <text>
        </text>
    }
</script>

Answer 8

একটি সহজ এবং একটি ভাল সোজা-এগিয়ে উদাহরণ:

<script>
    // This gets the username from the Razor engine and puts it
    // in JavaScript to create a variable I can access from the
    // client side.
    //
    // It's an odd workaraound, but it works.
    @{
        var outScript = "var razorUserName = " + "\"" + @User.Identity.Name + "\"";
    }
    @MvcHtmlString.Create(outScript);
</script>

এটি আপনার পৃষ্ঠায় এমন একটি স্ক্রিপ্ট তৈরি করে যেখানে আপনি উপরে কোডটি রেখেছেন যা নীচের মত দেখাচ্ছে:

<script>
    // This gets the username from the Razor engine and puts it
    // in JavaScript to create a variable I can access from
    // client side.
    //
    // It's an odd workaraound, but it works.

    var razorUserName = "daylight";
</script>

এখন আপনার কাছে একটি বিশ্বব্যাপী জাভাস্ক্রিপ্ট ভেরিয়েবল রয়েছে razorUserNameযা আপনি ক্লায়েন্টটিতে অ্যাক্সেস করতে এবং ব্যবহার করতে পারবেন। রেজার ইঞ্জিন স্পষ্টতই @User.Identity.Name(সার্ভার-সাইড ভেরিয়েবল) থেকে মানটি বের করেছে এবং এটি আপনার স্ক্রিপ্ট ট্যাগটিতে যে কোডটি লিখে তা এনেছে।

Answer 9

নীচের সমাধানটি রেজারের সাথে জাভাস্ক্রিপ্ট সংযুক্ত করার চেয়ে আমার কাছে আরও সঠিক বলে মনে হচ্ছে। এটি দেখুন: https://github.com/brooklynDev/NGon

আপনি ভিউব্যাগ.নগনে প্রায় কোনও জটিল ডেটা যুক্ত করতে এবং এটি জাভাস্ক্রিপ্টে অ্যাক্সেস করতে পারেন

নিয়ামকটিতে:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var person = new Person { FirstName = "John", LastName = "Doe", Age = 30 };
        ViewBag.NGon.Person = person;
        return View();
    }
}

জাভাস্ক্রিপ্টে:

<script type="text/javascript">
    $(function () {
        $("#button").click(function () {
            var person = ngon.Person;
            var div = $("#output");
            div.html('');
            div.append("FirstName: " + person.FirstName);
            div.append(", LastName: " + person.LastName);
            div.append(", Age: " + person.Age);
        });
    });
</script>

এটি কোনও সাধারণ প্লেইন সিএলআর অবজেক্টকে (পোকো) মঞ্জুরি দেয় যা ডিফল্ট ব্যবহার করে সিরিয়ালাইজ করা যায় JavascriptSerializer।

Answer 10

@: এবং এর চেয়ে আরও একটি বিকল্প রয়েছে <text></text>।

<script>ব্লক নিজেই ব্যবহার ।

রেজার কোডের উপর নির্ভর করে আপনার যখন জাভাস্ক্রিপ্টের বড় অংশগুলি করার দরকার হয়, আপনি এটি এর মতো করতে পারেন:

@if(Utils.FeatureEnabled("Feature")) {
    <script>
        // If this feature is enabled
    </script>
}

<script>
    // Other JavaScript code
</script>

এই পদ্ধতিটির প্রসেসগুলি হ'ল এটি জাভাস্ক্রিপ্ট এবং রেজারকে খুব বেশি মিশ্রিত করে না, কারণ এগুলিকে খুব বেশি মিশ্রিত করা শেষ পর্যন্ত পাঠযোগ্যতার সমস্যার কারণ হয়ে দাঁড়াবে। এছাড়াও বৃহত পাঠ্য ব্লকগুলি খুব বেশি পাঠযোগ্য নয়।

Answer 11

পূর্ববর্তী সমাধানগুলির কোনওটিই সঠিকভাবে কাজ করে না ... আমি সমস্ত উপায়ে চেষ্টা করেছি, তবে এটি আমাকে প্রত্যাশিত ফলাফল দেয় নি ... শেষ পর্যন্ত আমি দেখতে পেলাম যে কোডে কিছু ত্রুটি রয়েছে ... এবং পুরো কোডটি দেওয়া হয়েছে নিচে.

<script type="text/javascript">

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(23.00, 90.00),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    @foreach (var item in Model)
    {
        <text>
            var markerlatLng = new google.maps.LatLng(@(item.LATITUDE), @(item.LONGITUDE));
            var title = '@(item.EMP_ID)';
            var description = '@(item.TIME)';
            var contentString = '<h3>' + "Employee " +title+ " was here at "+description+ '</h3>' + '<p>'+" "+ '</p>'

            var infowindow = new google.maps.InfoWindow({
                // content: contentString
            });

            var marker = new google.maps.Marker({
                position: markerlatLng,
                title: title,
                map: map,
                draggable: false,
                content: contentString
            });

            google.maps.event.addListener(marker, 'click', (function (marker) {
                return function () {
                    infowindow.setContent(marker.content);
                    infowindow.open(map, marker);
                }
            })(marker));
        </text>
    }
</script>

Answer 12

অবশেষে আমি সমাধানটি খুঁজে পেয়েছি (* .vbhtml):

function razorsyntax() {
    /* Double */
    @(MvcHtmlString.Create("var szam =" & mydoublevariable & ";"))
    alert(szam);

    /* String */
    var str = '@stringvariable';
    alert(str);
}