एमवीसी 4 बूटस्ट्रैप मॉडल संपादित करें \ विस्तार

Question

उम्मीद है कि कोई मुझे बूटस्ट्रैप का उपयोग कर एमवीसी 4 में प्रयोग करने में कुछ मदद कर सकता है।

मेरे पास एक दृढ़ता से टाइप किया गया इंडेक्स व्यू है जो प्रत्येक पंक्ति में एक्शन आइकन संपादित करने और हटाने के साथ तालिका में आइटम प्रदर्शित करता है।

@model IEnumerable<Models.EquipmentClass> 

.... 

@foreach (var item in Model) 
{ 
<tbody> 
    <tr> 
     <td> 
      @item.ClassId 
     </td> 
     <td> 
      @item.ClassName 
     </td> 
     <td> 
      <a href=@Url.Action("Edit", "EquipmentClass", new { id = item.ClassId })> 
       <i class="icon-edit"></i> 
      </a> 
      <a href=@Url.Action("Delete", "EquipmentClass", new { id = item.ClassId })> 
       <i class="icon-trash"></i> 
      </a> 
     </td> 
    </tr> 
</tbody> 
} <!-- foreach --> 

उपकरण क्लास नियंत्रक आईडी के आधार पर चयनित आइटम के लिए संपादन दृश्य देता है। सभी महान और उम्मीदवार इस बिंदु पर

public ViewResult Edit(int id) 
{ 
    return View(equipmentclassRepository.Find(id)); 
} 

मैं क्या जानना चाहता हूं कि बूटस्ट्रैप मोडल संवाद में संपादन फ़ॉर्म को कैसे खोलें।

मैं निम्नलिखित में तालिका में संपादन कार्रवाई को आजमा सकता हूं और फिर दृश्य के नीचे एक मोडल div कर सकता हूं लेकिन मैं चयनित आइटम की आईडी में कैसे पास करूं और किस HTML सहायक का उपयोग करना चाहिए मॉडल अनुभाग?

<!-- replaced table action --> 
<a class="btn pull-right" data-toggle="modal" href="#myModal" >Details</a> 

.... 

<!-- modal div --> 
<div class="modal hide fade in" id="myModal")> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">×</button> 
     <h3>Modal header</h3> 
    </div> 
    <div class="modal-body"> 
     @Html.Partial("Edit") 
    </div> 
    <div class="modal-footer"> 
     <a href="#" class="btn" data-dismiss="modal">Close</a> 
     <a href="#" class="btn btn-primary">Save changes</a> 
    </div> 
</div> 

मैं बहुत किसी भी सलाह की सराहना करेंगे, बहुत धन्यवाद

Answer 1

मुझे लगता है कि मैं आपकी समस्या का एक समाधान है। अपने MVC आवेदन काम करने के लिए के रूप में आप यह चाहते आप कोड आपके द्वारा दी गई में कुछ परिवर्तन करने चाहिए:

1. एक div एक आइटम को संपादित किया अपने लेआउट पृष्ठ के तल पर के लिए एक मॉडल का प्रतिनिधित्व करें:

<div id="editModalContainerID" class="modal hide fade" data-url='@Url.Action("Edit", "EquipmentClass")'> 
<div id="editModalBodyID"></div> 
</div> 

सूचना है कि इस मॉडल को कड़ाई से नियंत्रक कार्रवाई एक EquipmentClass आइटम को संपादित किया के लिए जिम्मेदार से जुड़ा है।

2. आपका कस्टम JavaScript करने के लिए एक jQuery समारोह जोड़ें:

function showModal(modalContainerId, modalBodyId, id) { 
    var url = $(modalContainerId).data('url'); 

    $.get(url, { id: id }, function (data) { 
     $(modalBodyId).html(data); 
     $(modalContainerId).modal('show'); 
    }); 
} 

आप देख सकते हैं इस समारोह इसके मापदंडों में से एक के रूप में आईडी लेता है। आम तौर पर इसका उद्देश्य खाली मोडल बॉडी को एक अलग आंशिक दृश्य में डालने के साथ और पूरे कंटेनर को एक मॉडल पृष्ठ के रूप में प्रदर्शित करने के साथ प्रतिस्थापित करना है।

3. एक अलग आंशिक दृश्य में अपने मॉडल div रखो, और यह संपादित फोन (अपने नियंत्रक कार्रवाई नाम के समान हो गया है)। आपको अपने को आंशिक नाम बदलना होगा, उदाहरण के लिए एडिटबॉडी।

संपादित आंशिक दृश्य अब इस तरह sth दिखना चाहिए:

@model EquipmentClass 

<!-- modal div --> 
<div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal">×</button> 
    <h3>Modal header</h3> 
</div> 
<div class="modal-body"> 
    @Html.Partial("EditBody", Model) 
</div> 
<div class="modal-footer"> 
    <a href="#" class="btn" data-dismiss="modal">Close</a> 
    <a href="#" class="btn btn-primary">Save changes</a> 
</div> 

4. बदलें नियंत्रक कार्रवाई इतना है कि यह पिछले चरण में बनाए आंशिक दृश्य प्रस्तुत करती है:

public PartialViewResult Edit(int id) 
{ 
    return PartialView(equipmentclassRepository.Find(id)); 
} 

5।संपादित 'एक' लंगर बदलें इतना है कि यह बनाया कॉल jQuery समारोह:

@model IEnumerable<Models.EquipmentClass> 

.... 

@foreach (var item in Model) 
{ 
<tbody> 
    <tr> 
     <td> 
      @item.ClassId 
     </td> 
     <td> 
      @item.ClassName 
     </td> 
     <td> 
      <a data-toggle="modal" onclick="showModal('#editModalContainerID', '#editModalBodyID', @item.ClassId)"> 
       <i class="icon-edit"></i> 
      </a> 
      <a href=@Url.Action("Delete", "EquipmentClass", new { id = item.ClassId })> 
       <i class="icon-trash"></i> 
      </a> 
     </td> 
    </tr> 
</tbody> 
} <!-- foreach --> 

इस तरह हर बार एक 'एक' संपादित करें आइकन के साथ लंगर showModal समारोह क्लिक किया जाता है (संबंधित आईडी के साथ पारित किया जा रहा) निकाल दिया गया है और संबंधित डेटा के साथ बूटस्ट्रैप मोडल प्रदर्शित होता है।

मुझे यकीन है कि वहाँ यह करने के लिए एक बेहतर तरीका है इस तरह से मेरे लिए ठीक :)

आशा इस आप थोड़ा :) मदद करता है

Answer 2

Przemo जवाब मेरे लिए काम किया, फिर भी काम किया है, लेकिन ध्यान दें है कि मैं केवल जब मैं

<div id="editModalContainerID" class="modal fade" data-url='@Url.Action("Edit", "EquipmentClass")'> 
<div id="editModalBodyID"></div> 
</div> 

को

<div id="editModalContainerID" class="modal hide fade" data-url='@Url.Action("Edit", "EquipmentClass")'> 
<div id="editModalBodyID"></div> 
</div> 

से कोड के पहले खंड बदल यह काम करने के लिए पाने में कामयाब रहे

ध्यान दें कि मैंने संपादन मोडलकॉन्टेनर आईडी से "फीका" कक्षा हटा दी है। अन्यथा आंशिक दृश्य लोड नहीं होता है। उम्मीद है कि यह किसी भी मुद्दे के साथ किसी और की मदद करता है।