javascript - معلم - مميزات الجافا سكريبت




تمرير C#نموذج من عرض إلى جافاسكريبت (3)

أنا عادة استخدام هذا لترجمة من مفك إلى جافاسكريبت!

@Html.Raw(Json.Encode(item))

أنا تمرير هذا فيوموديل إلى وجهة نظري:

  public class DashboardViewModel
  {
    public List<UserTask> UserTasks {get; set;}

    public List<WorkItem> WorkItems {get; set;}
  }    

ومن داخل عرض أنا أكراتينغ من خلال وركيتمز مثل هذا:

 @foreach (var item in Model.WorkItems)
 {
    @item.Name
    @item.HoursLogged
    <button value="@item">UPDATE</button>
 }

عند النقر على الزر وظيفة جكري فتح مشروط.

أنا بحاجة لتمرير إلى مشروط هذا البند من أجل عرض جميع المعلومات المقال.

هذه هي وظيفة جافا سكريبت:

$(buttonEl).click(function () {
   //code to open modal
   var item = this.value;
});

القيمة التي تم تمريرها في "this.value" ليست كائن ولكن سلسلة مع مساحة الاسم من وركيتم.

لقد حاولت أيضا مع مضمنة أونكليك وظيفة:

<button onclick="openModal('@item')">UPDATE</button>

ولكن مع نفس النتيجة.

اي فكرة؟


ربما عليك أن تأخذ بضع خطوات إلى الوراء لفهم ما يجري هنا. طلب على شبكة الإنترنت هو في الحقيقة مجرد حفنة من السلاسل، مفك .net يفعل بعض الاشياء في محاولة لتسهيل الانتقال من استخدام الأشياء إلى سلسلة مباشرة فقط ولكن كما ترون أنه لا يمكن أن تفعل كل شيء. وبالتالي فإن اتخاذ بعيدا هو أن كنت للتعامل مع الأشياء كما لو كانت جميع السلاسل عندما قدمت على الصفحة.

ومع ذلك، هناك عدد من الطرق لحل هذه المشكلة. يمكنك كما هو مذكور قبل تحويل كافة كائنات وركيتم إلى كائنات جافا سكريبت وسحبها من مصفوفة جافا سكريبت. أو ما أود شخصيا القيام به هو ببساطة يحتوي على زر معرف الكائن والقيام مكالمة أجاكس للحصول على أحدث البيانات من الملقم.

النهاية الخلفية:

[HttpPost]
public string GetWorkItemById(int id)
{

//get or create WorkItem here
WorkItem workItem = new WorkItem(id);
workItem.Name = "Foobar";
workItem.HoursLogged = "127001";

return Newtonsoft.Json.JsonConvert.SerializeObject(workItem);
}

نهاية المقدمة:

    $(buttonEl).click(function () {    
    var id = this.value; //assuming you store the id in the button's value
    $.ajax({
          type: "POST",
          url: "@(Url.Action("GetWorkItemById"))",
          data: ({
                    Id:id
                 }),
          success: success,
          dataType: dataType, 
          success: function(result){
                var name = result.Name; // Foobar
                var hoursLogged = result.HoursLogged; // 127001
                //populate text fields using jquery
          }
        })
    });

يجب تخزين البيانات التي تستخدمها إلى حلقة لمتغير جافا سكريبت والاستعلام أنه عند النقر على زر. احتفظ بمعرف فريد على السمة "زر البيانات" التي يمكنك استخدامها للاستعلام لاحقا. بما أنه صفيف، يمكنك ببساطة استخدام متغير العداد الذي يتطابق مع فهرس صفيف (جس).

@{ var counter = 0;}
@foreach (var item in Model.WorkItems)
 {
    @item.Name
    <button class="updateBtns" data-index="@counter">UPDATE</button>
    counter++;
 }

وفي نفس رأي الحلاقة، يكون هذا جافاسكريبت حيث سيتم تسلسل مجموعة Model.WorkItems إلى مجموعة جافا سكريبت وتخزينه في متغير.

<script>
  $(function() { 

     var dataArr = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.WorkItems));
      $(".updateBtns").click(function (e) {
          e.preventDefault();

          var selectedItem = dataArr[$(this).data("index")];
          console.log(selectedItem);
      });    
  });    
</script>




model