एमवीसी 4 में, एक साथ कई पंक्ति संपादन कैसे सहेजते हैं?

Question

प्रत्येक उदाहरण जो मैं एक एमवीसी 4 ऐप के बारे में पा सकता हूं, उस समय संपादन एक समय में डेटा की एक पंक्ति पर काम कर रहा है। यह डेटा की सभी पंक्तियों को प्रदर्शित करता है जिसमें प्रत्येक पंक्ति में एक संपादन होता है जो आपको दूसरे पृष्ठ पर ले जाता है और आपको उस पंक्ति को संपादित करने की अनुमति देता है।

मैं जो करना चाहता हूं वह पंक्तियों में सभी डेटा तत्व प्रदर्शित करता है और उपयोगकर्ता को प्रत्येक पंक्ति पर संपादित करने के बजाय, सभी पंक्तियों के डेटा बिंदु पहले से ही टेक्स्ट बॉक्स में होंगे जो उपयोगकर्ता सीधे अपडेट कर सकते हैं । और पृष्ठ पर केवल एक बचा है जो एक ही समय में सभी अपडेट/संपादन को सहेज लेगा।

मैं इसका समर्थन करने के लिए अपना एमवीसी ऐप कैसे सेट कर सकता हूं?

Answer 1

आप इसके लिए संपादक टेम्पलेट्स का उपयोग कर सकते हैं। नीचे दिया गया उदाहरण सामान्य फॉर्म पोस्टिंग उदाहरण दिखाता है। यदि आपको serialize विधि और फ़ॉर्म मानों का उपयोग करके आवश्यकता है तो आप इसे अजाधित कर सकते हैं।

मान लीजिए कि आपको पाठ्यक्रम के लिए छात्र नामों की सूची संपादित करने की आवश्यकता है। तो चलो कि

public class Course 
{ 
    public int ID { set;get;} 
    public string CourseName { set;get;} 
    public List<Student> Students { set;get;} 

    public Course() 
    { 
    Students=new List<Student>(); 
    } 
} 
public class Student 
{ 
    public int ID { set;get;} 
    public string FirstName { set;get;} 
} 

के लिए कुछ ViewModels बनाने अब आप अपने GET कार्रवाई विधि में, आप हमारे विचार मॉडल की एक वस्तु बनाने के लिए, Students संग्रह प्रारंभ और हमारे दृढ़ता से टाइप किया दृश्य के लिए भेज दें।

public ActionResult StudentList() 
{ 
    Course courseVM=new Course(); 
    courseVM.CourseName="Some course from your DB here"; 

    //Hard coded for demo. You may replace this with DB data. 
    courseVM.Students.Add(new Student { ID=1, FirstName="Jon" }); 
    courseVM.Students.Add(new Student { ID=2, FirstName="Scott" }); 
    return View(courseVM); 
} 

अब एक फ़ोल्डर EditorTemplatesतहत दृश्य/YourControllerName बुलाया बनाएँ। तब सामग्री

नीचे

@model Student 
@{ 
    Layout = null; 
} 
<tr> 
<td> 
    @Html.HiddenFor(x => x.ID) 
    @Html.TextBoxFor(x => x.FirstName) </td> 
</tr> 

अब हमारी मुख्य दृश्य (StudentList.cshtml), इस दृश्य को लाने के लिए उपयोग EditorTemplate एचटीएमएल सहायक विधि के साथ कि कहा जाता Student.cshtml के तहत एक नया दृश्य बनाना होगा।

@model Course 
<h2>@Model.CourseName</h2> 
@using(Html.BeginForm()) 
{ 
    <table> 
    @Html.EditorFor(x=>x.Students) 
    </table> 
    <input type="submit" id="btnSave" /> 
} 

यह तालिका पंक्ति में निहित टेक्स्ट बॉक्स में आपके प्रत्येक छात्र नाम के साथ सभी यूआई लाएगा। अब जब फॉर्म पोस्ट किया गया है, तो एमवीसी मॉडल बाइंडिंग में हमारे व्यूमोडेल की Students संपत्ति में सभी टेक्स्ट बॉक्स मान होंगे।

[HttpPost] 
public ActionResult StudentList(Course model) 
{ 
    //check for model.Students collection for each student name. 
    //Save and redirect. (PRG pattern) 
} 

आप इस Ajaxify करना चाहते हैं, तो आप सबमिट बटन पर क्लिक के लिए, प्रपत्र प्राप्त एक ही पोस्ट कार्रवाई विधि को भेजने सुनने और यह क्रमानुसार कर सकते हैं और Ajaxified समाधान। सहेजने के बाद पुनर्निर्देशित करने के बजाय, आप कुछ JSON वापस कर सकते हैं जो ऑपरेशन की स्थिति को इंगित करता है।

$(function(){ 
    $("#btnSave").click(function(e){ 
    e.preventDefault(); //prevent default form submit behaviour 
    $.post("@Url.Action("StudentList",YourcontrollerName")", 
        $(this).closest("form").serialize(),function(response){ 
    //do something with the response from the action method 
    }); 
    }); 
}); 

Answer 2

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

public ActionResult Update(List<MyEntity> list) 
{ 
... 
} 
public class MyEntity 
{ 
public string Name {get; set;} 
public int Count {get; set;} 
} 

और JavaScript जैसी हो सकता है:

उदाहरण के लिए आप नियंत्रक के रूप में परिभाषित किया जा सकता है

var myList = new Array(); 
// fill the list up or do something with it. 

$.ajax(
{ 
    url: "/Update/", 
    type: "POST", 
    data: {list: myList} 
} 
); 

और निश्चित रूप से अपने "सहेजें" बटन ईवेंट हैंडलर कि कि कार्यक्षमता कॉल करेंगे क्लिक करें है AJAX कॉल के साथ।

आपकी सुविधा के लिए आप क्लाइंट पक्ष पर डीओएम के साथ डेटा को बाध्य करने के लिए नॉकआउटजेएस या अन्य एमवीवीएम फ्रेमवर्क का उपयोग करने पर विचार कर सकते हैं।