c# জাভাস্ক্রিপ্ট থেকে এমভিসি এর মডেল সম্পত্তি অ্যাক্সেস




javascript jquery (4)

আমি আমার মডেল মডেলের মধ্যে আবৃত করা হয়, যা নিম্নলিখিত মডেল আছে

public class FloorPlanSettingsModel
{
    public int Id { get; set; }
    public int? MainFloorPlanId { get; set; }
    public string ImageDirectory { get; set; }
    public string ThumbnailDirectory { get; set; }
    public string IconsDirectory { get; set; }
}

আমি কিভাবে জাভাস্ক্রিপ্ট থেকে উপরের বৈশিষ্ট্য এক অ্যাক্সেস করতে পারি?

আমি এই চেষ্টা, কিন্তু আমি "অনির্দিষ্ট" পেয়েছিলাম

var floorplanSettings = "@Model.FloorPlanSettings";
alert(floorplanSettings.IconsDirectory);

যদি "রেফারেন্স ত্রুটি : মডেল সংজ্ঞায়িত করা হয় না" ত্রুটিটি উত্থাপিত হয়, তবে আপনি নিম্নলিখিত পদ্ধতিটি ব্যবহার করার চেষ্টা করতে পারেন:

$(document).ready(function () {

    @{  var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
         var json = serializer.Serialize(Model);
    }

    var model = @Html.Raw(json);
    if(model != null && @Html.Raw(json) != "undefined")
    {
        var id= model.Id;
        var mainFloorPlanId = model.MainFloorPlanId ;
        var imageDirectory = model.ImageDirectory ;
        var iconsDirectory = model.IconsDirectory ;
    }
});

আশাকরি এটা সাহায্য করবে...


উত্তর বিষয়বস্তু

1) কিভাবে জাভাস্ক্রিপ্ট / .cshtml কোড ব্লক .cshtml ফাইলে মডেল ডেটা অ্যাক্সেস করবেন

2) জাভাস্ক্রিপ্ট / জাভাসি কোড ব্লক .js ফাইলে মডেল ডেটা কিভাবে অ্যাক্সেস করবেন

কিভাবে জাভাস্ক্রিপ্ট / .cshtml কোড ব্লক .cshtml ফাইলে মডেল ডেটা অ্যাক্সেস করবেন

জাভাস্ক্রিপ্ট ভেরিয়েবলের দুটি ধরনের সি # পরিবর্তনশীল ( Model ) অ্যাসাইনমেন্ট রয়েছে।

  1. সম্পত্তি নিয়োগ - Model.Name , string , Model.Name বেসিক ডেটাটাইপস (উদাহরণ: Model.Name )
  2. অবজেক্ট অ্যাসাইনমেন্ট - কাস্টম বা অন্তর্নির্মিত ক্লাসগুলি (উদাহরণ: Model , ModelModel.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>"
};

সম্পত্তি নিয়োগ

আসুন assignment জন্য বিভিন্ন সিনট্যাক্স ব্যবহার করে এবং ফলাফল পালন করা যাক।

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 ত্রুটি বিদ্যমান না। যেহেতু তারিখের জন্য টাইম varialble ত্রুটিটি unexpected number সংখ্যা বিশেষ অক্ষর থাকতে পারে না, HTML ট্যাগগুলি তার সত্তা নামগুলিতে রূপান্তরিত হয় যাতে ব্রাউজার আপনার মান এবং 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 ব্যবহার করে কিন্তু @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 স্ট্রিংয়ের @Html.Raw() ব্যবহার করে আমাদের কিছু পরিবর্তন দেখানো হয়েছে। এইচটিএমএল তার সত্তা নাম পরিবর্তন ছাড়া বজায় রাখা হয়।

ডক্স থেকে 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 ব্যবহার করুন।
  • আপনার এইচটিএমএল ডেটা সাবধানে সার্ভার পার্শ্বের অর্থ উদ্ধৃতি থেকে রক্ষা করুন, অথবা জাভাস্ক্রিপ্ট পরিবর্তনশীলতে অ্যাসাইনমেন্টের সময় ডেটা থেকে ভিন্ন উদ্ধৃতি ব্যবহার করুন।

অবজেক্ট অ্যাসাইনমেন্ট

আসুন assignment জন্য বিভিন্ন সিনট্যাক্স ব্যবহার করে এবং ফলাফল পালন করা যাক।

1) উদ্ধৃতি বস্তুর নিয়োগ মোড়ানো ছাড়া।

  var userObj = @Model; 

যখন আপনি জাভাস্ক্রিপ্ট পরিবর্তনশীল এ ac # অবজেক্ট বরাদ্দ করেন তখন সেই .ToString().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 = {&quot;Name&quot;:&quot;Raj&quot;,
               &quot;IsAuthenticated&quot;:true,
               &quot;LoginDateTime&quot;:&quot;\/Date(1482572875150)\/&quot;,
               &quot;Age&quot;:26,
               &quot;UserIconHTML&quot;:&quot;\u003ci class=\&quot;fa fa-users\&quot;\u003e\u003c/i\u003e&quot;
              };

আমরা কিছু পরিবর্তন দেখতে পাচ্ছি, আমরা দেখি আমাদের মডেলটি একটি বস্তুর রূপে ব্যাখ্যা করা হচ্ছে। কিন্তু আমরা যারা বিশেষ অক্ষর entity names পরিবর্তন হয়েছে। এছাড়াও উদ্ধৃতি মধ্যে উপরে সিনট্যাক্স মোড়ানো কোন বেশি ব্যবহার করা হয়। আমরা কেবল উদ্ধৃতি মধ্যে একই ফলাফল পেতে।

Json.Encode() এর ডক্স থেকে Json.Encode()

জাভাস্ক্রিপ্ট অবজেক্ট নোটেশন (JSON) বিন্যাসে থাকা একটি ডাটা অংককে একটি স্ট্রিংয়ে রূপান্তর করে।

আপনি ইতিমধ্যে এই entity Name সম্মুখীন হয়েছে সম্পত্তি নিয়োগ সঙ্গে entity Name সমস্যা এবং যদি আপনি মনে রাখবেন আমরা Html.Raw ব্যবহার সঙ্গে এটি Html.Raw । সুতরাং যে চেষ্টা করে দেখুন। চলুন Html.Raw এবং Json.Encode একত্রিত করা যাক

6) Html.Raw এবং Json.Encode ব্যবহার করে। উদ্ধৃতি ছাড়াই 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 ব্যবহার করে। উদ্ধৃতি মধ্যে Json.Encode

var userObj = '@Html.Raw(Json.Encode(Model))';

আপনি কোট সঙ্গে মোড়ানো দেখতে হিসাবে আমাদের একটি JSON তথ্য দেয়

অবজেক্ট অ্যাসাইনমেন্ট কনসোলিউশন

  • Html.Raw এবং Json.Encode ব্যবহার করুন। জাভাস্ক্রিপ্ট অবজেক্ট হিসাবে আপনার অবজেক্ট জাভাস্ক্রিপ্ট পরিবর্তন করার জন্য Json.Encode এ এনকোড করুন।
  • Html.Raw এবং Json.Encode ব্যবহার করুন। Html.Raw এটি একটি JSON পেতে quotes মধ্যে মোড়ানো

দ্রষ্টব্য: আপনি যদি ডেটাটাইম ডেটা ফরম্যাটটি দেখে থাকেন তবে সঠিক নয়। এর আগে যেমনটি বলা Converts a data object to a string that is in the JavaScript Object Notation (JSON) format এবং JSON date ধারণ করে না। এই ঠিক করার অন্যান্য বিকল্পগুলি javascipt Date () বস্তু ব্যবহার করে এই ধরনের একমাত্র হ্যান্ডেল করতে কোডের আরেকটি লাইন যোগ করতে হয়

var userObj.LoginDateTime = new Date('@Html.Raw(Model.LoginDateTime)'); 
//without Json.Encode

জাভাস্ক্রিপ্ট / জাভাসি কোড ব্লক .js ফাইলের মধ্যে মডেল ডেটা কিভাবে অ্যাক্সেস করবেন

রেজার সিনট্যাক্সের .js ফাইলে কোন অর্থ নেই এবং তাই আমরা সরাসরি আমাদের মডেলটি .js ফাইলটি অন্তর্দৃষ্টি ব্যবহার করতে পারি না। তবে একটি workaround আছে।

1) সমাধান জাভাস্ক্রিপ্ট গ্লোবাল ভেরিয়েবল ব্যবহার করা হয়

আমরা একটি বিশ্বব্যাপী স্কপড javascipt পরিবর্তনশীলের মান বরাদ্দ করতে হবে এবং তারপরে আপনার .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>

এই স্থানে আমরা প্রয়োজন হিসাবে এবং যখন userJsonObj userObj এবং userJsonObj ভেরিয়েবল ব্যবহার করতে পারেন।

নোট: আমি ব্যক্তিগতভাবে রক্ষণাবেক্ষণের জন্য খুব কঠিন পায় হিসাবে গ্লোবাল ভেরিয়েবল ব্যবহার করে সুপারিশ না। তবে আপনার যদি অন্য কোনও বিকল্প না থাকে তবে আপনি সঠিক নামকরণের কনভেনশন সহ এটি ব্যবহার করতে পারেন .. userAppDetails_global মত কিছু।

2) ফাংশন () বা 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 ফাংশন অনির্দিষ্ট হয়।

এছাড়াও ফাংশন গ্লোবাল সুযোগ খুব অবশ্যই মনে রাখবেন। সুতরাং সমাধান আমরা গ্লোবাল scoped খেলোয়াড়দের মোকাবেলা করতে হবে।


চারপাশে মডেল সম্পত্তি মোড়ানো আমার জন্য কাজ। আপনি এখনও ভিজুয়াল স্টুডিও আধা-কোলন সম্পর্কে অভিযোগ করার সাথে একই সমস্যা পান তবে এটি কাজ করে।

var closedStatusId = @(Model.ClosedStatusId);

আপনি আপনার সম্পূর্ণ সার্ভার-পার্শ্ব মডেলটি গ্রহণ করতে এবং এটি অনুসরণ করে জাভাস্ক্রিপ্ট অবজেক্টে পরিণত করতে পারেন:

var model = @Html.Raw(Json.Encode(Model));

আপনার ক্ষেত্রে যদি আপনি কেবল FloorPlanSettings বস্তুটি চান তবে কেবল সেই Encode পদ্ধতিটি সেই সম্পত্তিটি পাস করুন:

var floorplanSettings = @Html.Raw(Json.Encode(Model.FloorPlanSettings));






model