উত্তরের বিষয়বস্তু
1) .cshtml
ফাইলগুলিতে জাভাস্ক্রিপ্ট / জকোয়ারি কোড ব্লকে মডেল ডেটা কীভাবে অ্যাক্সেস করবেন
2) জাভাস্ক্রিপ্ট / জাকোয়ারি কোড ব্লক .js
ফাইলগুলিতে মডেল ডেটা কীভাবে অ্যাক্সেস করবেন
.cshtml
ফাইলগুলিতে জাভাস্ক্রিপ্ট / জকোয়ারি কোড ব্লকে মডেল ডেটা কীভাবে অ্যাক্সেস করবেন
Model
জাভাস্ক্রিপ্ট ভেরিয়েবলের জন্য দুই ধরণের সি # ভেরিয়েবল ( ) অ্যাসাইনমেন্ট রয়েছে।
- প্রপার্টি নিয়োগ - মৌলিক datatypes পছন্দ
int
, string
, DateTime
(উদা: Model.Name
)
- অবজেক্ট নিয়োগ - কাস্টম বা Inbuilt শ্রেণীর (উদা:
Model
, Model.UserSettingsObj
)
এই দুটি কার্যকারিতা বিশদটি খতিয়ে দেখি।
উত্তরের বাকি অংশগুলির জন্য AppUser
উদাহরণ হিসাবে নীচের মডেলটি বিবেচনা করুন ।
public class AppUser
{
public string Name { get; set; }
public bool IsAuthenticated { get; set; }
public DateTime LoginDateTime { get; set; }
public int Age { get; set; }
public string UserIconHTML { get; set; }
}
এবং আমরা এই মডেলটি নির্ধারিত মানগুলি
AppUser appUser = new AppUser
{
Name = "Raj",
IsAuthenticated = true,
LoginDateTime = DateTime.Now,
Age = 26,
UserIconHTML = "<i class='fa fa-users'></i>"
};
সম্পত্তি বরাদ্দ
অ্যাসাইনমেন্টের জন্য আলাদা সিনট্যাক্স ব্যবহার করতে এবং ফলাফলগুলি পর্যবেক্ষণ করতে দিন।
1) উদ্ধৃতি সম্পত্তি অর্পণ ছাড়া।
var Name = @Model.Name;
var Age = @Model.Age;
var LoginTime = @Model.LoginDateTime;
var IsAuthenticated = @Model.IsAuthenticated;
var IconHtml = @Model.UserIconHTML;
আপনি দেখতে পাচ্ছেন যে বেশ কয়েকটি ত্রুটি রয়েছে Raj
এবং True
এটি জাভাস্ক্রিপ্ট ভেরিয়েবল হিসাবে বিবেচিত হয় এবং যেহেতু তারা এটিকে একটি variable undefined
ত্রুটি উপস্থিত করে না । যেখানে ডেটটাইম ভেরিয়েবলের ক্ষেত্রে ত্রুটিটি হ'ল unexpected number
সংখ্যার বিশেষ অক্ষর থাকতে পারে না, তাই HTML ট্যাগগুলি তার সত্তার নামগুলিতে রূপান্তরিত হয় যাতে ব্রাউজারটি আপনার মান এবং এইচটিএমএল মার্কআপের সাথে মিশে না যায়।
2) উদ্ধৃতি সম্পত্তি অ্যাসাইনমেন্ট।
var Name = '@Model.Name';
var Age = '@Model.Age';
var LoginTime = '@Model.LoginDateTime';
var IsAuthenticated = '@Model.IsAuthenticated';
var IconHtml = '@Model.UserIconHTML';
ফলাফলগুলি বৈধ, সুতরাং সম্পত্তি অ্যাসাইনমেন্টের উদ্ধৃতি আমাদেরকে বৈধ বাক্য গঠন দেয়। তবে মনে রাখবেন যে সংখ্যাটি Age
এখন একটি স্ট্রিং, সুতরাং আপনি যদি না চান তবে আমরা কেবল উদ্ধৃতিগুলি সরাতে পারি এবং এটি একটি সংখ্যা প্রকার হিসাবে রেন্ডার হবে।
3) ব্যবহার করে @Html.Raw
কিন্তু উদ্ধৃতি মোড়ানো ছাড়া
var Name = @Html.Raw(Model.Name);
var Age = @Html.Raw(Model.Age);
var LoginTime = @Html.Raw(Model.LoginDateTime);
var IsAuthenticated = @Html.Raw(Model.IsAuthenticated);
var IconHtml = @Html.Raw(Model.UserIconHTML);
ফলাফল যাই হোক ব্যবহার করে আমাদের পরীক্ষা ক্ষেত্রে 1. একই রকম @Html.Raw()
উপর HTML
স্ট্রিং আমাদেরকে কিছু পরিবর্তন দেখিয়েছিলেন। এইচটিএমএলটির সত্তার নাম পরিবর্তন না করেই ধরে রাখা যায়।
Html.Raw () দস্তাবেজগুলি থেকে
এইচটিএমএল স্ট্রিং ইনস্ট্যান্সে এইচটিএমএল মার্কআপকে মোড়ানো থাকে যাতে এটি HTML চিহ্নআপ হিসাবে ব্যাখ্যা করা হয়।
তবে এখনও আমাদের অন্যান্য লাইনে ত্রুটি রয়েছে।
4) ব্যবহার @Html.Raw
এবং এছাড়াও উদ্ধৃতি মধ্যে মোড়ানো
var Name ='@Html.Raw(Model.Name)';
var Age = '@Html.Raw(Model.Age)';
var LoginTime = '@Html.Raw(Model.LoginDateTime)';
var IsAuthenticated = '@Html.Raw(Model.IsAuthenticated)';
var IconHtml = '@Html.Raw(Model.UserIconHTML)';
ফলাফল সব ধরণের সঙ্গে ভাল। তবে আমাদের HTML
ডেটা এখন নষ্ট হয়ে গেছে এবং এটি স্ক্রিপ্টগুলি ভেঙে দেবে। সমস্যাটি হ'ল কারণ আমরা '
ডেটা মোড়ানোর জন্য একক উদ্ধৃতি ব্যবহার করছি এবং এমনকি ডেটাতে একক উদ্ধৃতি রয়েছে।
আমরা 2 টি পদ্ধতির সাহায্যে এই সমস্যাটি কাটিয়ে উঠতে পারি।
1) " "
এইচটিএমএল অংশ মোড়ানোর জন্য ডাবল উক্তি ব্যবহার করুন । অভ্যন্তরীণ তথ্য যেমন একক উদ্ধৃতি আছে। (নিশ্চিত হয়ে নিন যে ডাবল উদ্ধৃতি দিয়ে মোড়ানোর পরেও "
ডেটার মধ্যে খুব বেশি কিছু নেই)
var IconHtml = "@Html.Raw(Model.UserIconHTML)";
2) আপনার সার্ভারের পাশের কোডটির অর্থ অক্ষরটিকে এড়িয়ে চলুন। মত
UserIconHTML = "<i class=\"fa fa-users\"></i>"
সম্পত্তি বরাদ্দ উপসংহার
- সংখ্যাযুক্ত ডেটা টাইপের জন্য উদ্ধৃতিগুলি ব্যবহার করুন।
- সংখ্যার ডেটা টাইপের জন্য কোট ব্যবহার করবেন না।
Html.Raw
আপনার এইচটিএমএল ডেটা যেমন আছে তেমন ব্যাখ্যা করতে ব্যবহার করুন ।
- সার্ভার সাইডের অর্থের উদ্ধৃতিগুলি এড়ানোর জন্য আপনার এইচটিএমএল ডেটার যত্ন নিন, বা জাভাস্ক্রিপ্ট ভেরিয়েবলের অ্যাসাইনমেন্টের সময় ডেটার চেয়ে আলাদা কোট ব্যবহার করুন।
অবজেক্ট অ্যাসাইনমেন্ট
অ্যাসাইনমেন্টের জন্য আলাদা সিনট্যাক্স ব্যবহার করতে এবং ফলাফলগুলি পর্যবেক্ষণ করতে দিন।
1) উদ্ধৃতি অবজেক্ট অ্যাসাইনমেন্ট ছাড়া।
var userObj = @Model;
আপনি যখন জাভাস্ক্রিপ্ট ভেরিয়েবলকে AC # অবজেক্ট বরাদ্দ করবেন তখন সেই বস্তুর মান .ToString()
নির্ধারিত হবে। সুতরাং উপরের ফলাফল।
2 উদ্ধৃতি অবজেক্ট বরাদ্দ
var userObj = '@Model';
3)Html.Raw
উদ্ধৃতি ছাড়া ব্যবহার ।
var userObj = @Html.Raw(Model);
4)Html.Raw
উদ্ধৃতি সহ ব্যবহার
var userObj = '@Html.Raw(Model)';
Html.Raw
আমাদের জন্য কোন অনেক ব্যবহারের ছিল পরিবর্তনশীল করার জন্য একটি বস্তুর বরাদ্দ হয়েছে।
5)Json.Encode()
উদ্ধৃতি ব্যতীত ব্যবহার
var userObj = @Json.Encode(Model);
//result is like
var userObj = {"Name":"Raj",
"IsAuthenticated":true,
"LoginDateTime":"\/Date(1482572875150)\/",
"Age":26,
"UserIconHTML":"\u003ci class=\"fa fa-users\"\u003e\u003c/i\u003e"
};
আমরা কিছু পরিবর্তন দেখতে পাই, আমরা দেখতে পাই যে আমাদের মডেলটিকে একটি বস্তু হিসাবে ব্যাখ্যা করা হচ্ছে। তবে আমাদের সেই বিশেষ চরিত্রগুলি পরিবর্তিত হয়েছে entity names
। উপরোক্ত সিনট্যাক্সগুলিকে উদ্ধৃতিগুলিতে মোড়ানোও খুব বেশি কার্যকর নয়। আমরা কেবল উদ্ধৃতিতে একই ফলাফল পেতে।
জসন.এনকোডের ডক্স থেকে ()
জাভাস্ক্রিপ্ট অবজেক্ট নোটেশন (জেএসএন) ফর্ম্যাটে থাকা একটি স্ট্রিংয়ে ডেটা অবজেক্টকে রূপান্তর করে।
যেমন আপনি ইতিমধ্যে entity Name
সম্পত্তি বরাদ্দের সাথে এই সমস্যাটির মুখোমুখি হয়ে এসেছেন এবং যদি মনে থাকে তবে আমরা ব্যবহারের মাধ্যমে এটি অতিক্রম করেছি Html.Raw
। সুতরাং এটি চেষ্টা করে দেখুন। একত্রিত করতে দেয় Html.Raw
এবংJson.Encode
6) ব্যবহার করে Html.Raw
এবং Json.Encode
উদ্ধৃতি ছাড়াই।
var userObj = @Html.Raw(Json.Encode(Model));
ফলাফলটি একটি বৈধ জাভাস্ক্রিপ্ট অবজেক্ট
var userObj = {"Name":"Raj",
"IsAuthenticated":true,
"LoginDateTime":"\/Date(1482573224421)\/",
"Age":26,
"UserIconHTML":"\u003ci class=\"fa fa-users\"\u003e\u003c/i\u003e"
};
7) ব্যবহার Html.Raw
এবং Json.Encode
উদ্ধৃতি মধ্যে।
var userObj = '@Html.Raw(Json.Encode(Model))';
আপনি দেখছেন যে উদ্ধৃতি দিয়ে মোড়ানো আমাদের একটি JSON ডেটা দেয়
অবজেক্ট অ্যাসাইনমেন্টে অন্তর্ভুক্তি
- ব্যবহারের
Html.Raw
এবং Json.Encode
combintaion হিসেবে জাভাস্ক্রিপ্ট পরিবর্তনশীল আপনার বস্তুর দায়িত্ব অর্পণ করা জাভাস্ক্রিপ্ট অবজেক্ট ।
- একটি JSON পেতে এটির অভ্যন্তরে ব্যবহার করুন
Html.Raw
এবং মোড়ানোওJson.Encode
quotes
দ্রষ্টব্য: আপনি যদি পর্যালোচনা করেছেন ডেটাটাইম ডেটা ফর্ম্যাটটি সঠিক নয়। এটি কারণ যা আগে বলা হয়েছিল Converts a data object to a string that is in the JavaScript Object Notation (JSON) format
এবং জেএসওনে কোনও date
প্রকার নেই। এটি ঠিক করার জন্য অন্যান্য বিকল্পগুলি জাভাস্কিপ্ট তারিখ () অবজেক্টটি ব্যবহার করে এই ধরণের হ্যান্ডেল করার জন্য কোডের অন্য একটি লাইন যুক্ত করা হয়
var userObj.LoginDateTime = new Date('@Html.Raw(Model.LoginDateTime)');
//without Json.Encode
.js
ফাইলগুলিতে জাভাস্ক্রিপ্ট / জকোয়ারি কোড ব্লকে মডেল ডেটা কীভাবে অ্যাক্সেস করবেন
রেজার সিনট্যাক্সের কোনও .js
ফাইলের কোনও অর্থ নেই এবং তাই আমরা সরাসরি আমাদের মডেল কোনও .js
ফাইল insisde ব্যবহার করতে পারি না । তবে একটি কর্মক্ষেত্র আছে।
1) সমাধান জাভাস্ক্রিপ্ট গ্লোবাল ভেরিয়েবল ব্যবহার করছে ।
আমাদের একটি গ্লোবাল স্কোপড জাভাস্কিপ্ট ভেরিয়েবলের মান নির্ধারণ করতে হবে এবং তারপরে আপনার .cshtml
এবং .js
ফাইলগুলির সমস্ত কোড ব্লকের মধ্যে এই ভেরিয়েবলটি ব্যবহার করতে হবে। সুতরাং বাক্য গঠন হবে
<script type="text/javascript">
var userObj = @Html.Raw(Json.Encode(Model)); //For javascript object
var userJsonObj = '@Html.Raw(Json.Encode(Model))'; //For json data
</script>
এই জায়গায় আমরা ভেরিয়েবল ব্যবহার করতে পারেন সঙ্গে userObj
এবং userJsonObj
যেমন এবং যখন প্রয়োজন ছিল।
দ্রষ্টব্য: আমি ব্যক্তিগতভাবে গ্লোবাল ভেরিয়েবলগুলি ব্যবহার করার পরামর্শ দিই না কারণ এটি রক্ষণাবেক্ষণের জন্য খুব শক্ত হয়ে যায়। তবে আপনার যদি অন্য কোনও বিকল্প না থাকে তবে আপনি এটির নামকরণের যথাযথ সম্মেলন ব্যবহার করে ব্যবহার করতে পারেন .. এরকম কিছু userAppDetails_global
।
২) ফাংশন ( ) ব্যবহার করে বা closure
কোনও ফাংশনে মডেল ডেটার উপর নির্ভরশীল সমস্ত কোড মোড়ানো। এবং তারপরে .cshtml
ফাইল থেকে এই ফাংশনটি সম্পাদন করুন।
external.js
function userDataDependent(userObj){
//.... related code
}
.cshtml
ফাইল
<script type="text/javascript">
userDataDependent(@Html.Raw(Json.Encode(Model))); //execute the function
</script>
দ্রষ্টব্য: আপনার বাহ্যিক ফাইলটি উপরের স্ক্রিপ্টের পূর্বে অবশ্যই উল্লেখ করা উচিত। অন্য userDataDependent
ফাংশন অপরিজ্ঞাত।
এছাড়াও নোট করুন যে ফাংশনটি অবশ্যই বিশ্বব্যাপী সুযোগে থাকতে হবে। সুতরাং উভয় সমাধানই আমাদের বিশ্বব্যাপী বাদ দেওয়া খেলোয়াড়দের সাথে ডিল করতে হবে।