javascript - व्यू से जावास्क्रिप्ट तक सी#मॉडल पास करें




c# asp.net-mvc (3)

मैं अपने दृश्य में यह ViewModel पास कर रहा हूं:

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

जब मैं बटन पर क्लिक करता हूं, तो एक jQuery फ़ंक्शन एक मोडल खोल रहा है।

सभी आइटम इन्फोस को प्रदर्शित करने के लिए मुझे मदल को पास करना होगा

यह जावास्क्रिप्ट फ़ंक्शन है:

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

"This.value" में पारित किया जाने वाला मान ऑब्जेक्ट नहीं है, लेकिन वर्कइटम के नेमस्पेस के साथ एक स्ट्रिंग है।

मैंने इनलाइन ऑनक्लिक फ़ंक्शन के साथ भी प्रयास किया है:

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

लेकिन एक ही परिणाम के साथ

कोई उपाय?


@item in View सामान्य स्ट्रिंग के रूप में आइटम मुद्रित करेगा (item.ToString ())। मुझे लगता है कि आप क्या चाहते हैं स्ट्रिंग को जावास्क्रिप्ट ऑब्जेक्ट के रूप में पार्स करना है, है ना?

एक दृष्टिकोण अपने मॉडल में एक विधि को लागू करना है, जैसे JSON.stringify ()। विधि JSON स्ट्रिंग को सी # मॉडल को पार्स कर सकती है:

{
 "Name" : "Scott",
 "HoursLogged" : "2"
}

उसके बाद आप JSON ऑब्जेक्ट में स्ट्रिंग को JSON.parse () का उपयोग करके पार्स कर सकते हैं। इस स्थिति में, आप JSON ऑब्जेक्ट का उपयोग कर सकते हैं। कुछ विचार:

सी#:

public class Item
{
 public string Name { get; set; }
 public int HoursLogged { get; set; }
 public string ToJsonString()
 {
  return "{" + "\"Name\":" + Name + ",HoursLogged:" + HoursLogged + "}";
 }
}

जे एस:

var jsonStr = '@item.ToJsonString()';
var jsonObj = JSON.parse(jsonStr);
console.log(jsonObj.Name);
console.log(jsonObj.HoursLogged);

आप न्यूटन को सी # मॉडल को स्ट्रिप करने के लिए भी उपयोग कर सकते हैं।


आपको डेटा जो आप जावास्क्रिप्ट चर में लूप में उपयोग करते हैं और क्वेरी करें, जब आपके बटन पर क्लिक किया जाए। अपने बटन के डेटा विशेषता पर एक अद्वितीय पहचानकर्ता रखें, जिसे आप बाद में क्वेरी के लिए उपयोग कर सकते हैं। चूंकि यह एक सरणी है, आप बस एक काउंटर वेरिएबल का उपयोग कर सकते हैं जो (जेएस) सरणी अनुक्रमणिका के साथ मेल खाता है।

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

और एक ही उस्तरा दृश्य में, यह जावास्क्रिप्ट है जहां आप Model.WorkItems को क्रमबद्ध कर देंगे। 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>

यहाँ पर क्या हो रहा है यह समझने के लिए आपको शायद कुछ कदम वापस लेना चाहिए। एक वेब अनुरोध सचमुच स्ट्रिंग्स का एक गुच्छा है, एमवीसी। नेट कुछ सामान की कोशिश करता है और ऑब्जेक्ट्स को सीधे स्ट्रिंग स्ट्रिंग में इस्तेमाल करने से संक्रमण को कम करता है, लेकिन जैसा कि आप देख सकते हैं कि यह सब कुछ नहीं कर सकता तो ले-दूर यह है कि आप चीजों से निपटने के लिए, जैसे कि पृष्ठ पर दिए गए सभी स्ट्रिंग्स हैं।

कहा जा रहा है कि इस समस्या को हल करने के कई तरीके हैं। आप अपने सभी वर्कइटम ऑब्जेक्ट को जावास्क्रिप्ट ऑब्जेक्ट में कनवर्ट करने से पहले जावास्क्रिप्ट एरे से बाहर खींच सकते हैं। या जो मैं व्यक्तिगत रूप से करना चाहता हूं बस बटन में ऑब्जेक्ट का आईडी होता है और सर्वर से सबसे हालिया डेटा प्राप्त करने के लिए एजेक्स कॉल करता है।

पीछे की ओर:

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







model