चेकबॉक्स की जांच पर तालिका की पंक्तियों को हटाएं

Question

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

Answer 1

हमेशा की तरह एक मॉडल के साथ शुरू:

public class ProductViewModel 
{ 
    public int Id { get; set; } 
    public string Name { get; set; } 
} 

फिर एक नियंत्रक:

public class HomeController : Controller 
{ 
    // TODO: Fetch this from a repository 
    private static List<ProductViewModel> _products = new List<ProductViewModel> 
    { 
     new ProductViewModel { Id = 1, Name = "Product 1" }, 
     new ProductViewModel { Id = 2, Name = "Product 2" }, 
     new ProductViewModel { Id = 3, Name = "Product 3" }, 
     new ProductViewModel { Id = 4, Name = "Product 4" }, 
     new ProductViewModel { Id = 5, Name = "Product 5" }, 
    }; 

    public ActionResult Index() 
    { 
     return View(_products); 
    } 

    [HttpPost] 
    public ActionResult Delete(IEnumerable<int> productIdsToDelete) 
    { 
     // TODO: Perform the delete from a repository 
     _products.RemoveAll(p => productIdsToDelete.Contains(p.Id)); 
     return RedirectToAction("index"); 
    } 
} 

और अंत में Index.aspx दृश्य:

<% using (Html.BeginForm("delete", "home", FormMethod.Post)) { %> 

    <table> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Select</th> 
      </tr> 
     </thead> 
     <tbody> 
      <%= Html.EditorForModel()%> 
     </tbody> 
    </table> 

    <input type="submit" value="Delete selected products" /> 

<% } %> 

और उत्पाद संपादक टेम्पलेट (~/Views/Home/EditorTemplates/ProductViewModel.ascx) :

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<ToDD.Controllers.ProductViewModel>" %> 
<tr> 
    <td> 
     <%: Model.Name %> 
    </td> 
    <td> 
     <input type="checkbox" name="productIdsToDelete" value="<%: Model.Id %>" /> 
    </td> 
</tr> 

Answer 2

मैं AJAX का उपयोग करूंगा। चेक किए गए राज्य को बदलने पर, मैं सभी चयनित आईडी को हटाने और तालिका डेटा रीफ्रेश करने का अनुरोध सबमिट करूंगा।

Answer 3

jQuery, कुछ अन्य जावास्क्रिप्ट लाइब्रेरी का उपयोग करें, या चेकबॉक्स की जांच पर केवल एक कोड को AJAX अनुरोध करें। फिर सफलता पर DOM बदलें।

jQuery का उपयोग करके आप की तरह कुछ कर सकता है:

<table> 
    <tr> 
     <td><input type="checkbox" class="check" id="1" /></td> 
    </tr> 
    <tr> 
     <td><input type="checkbox" class="check" id="2" /></td> 
    </tr> 
    <tr> 
     <td><input type="checkbox" class="check" id="3" /></td> 
    </tr> 
</table> 


$('.check').click(function() { 
    var tableRow = $(this).parent().parent(); 
    var id = $(this).attr('id'); 
    $.ajax({ 
     url: 'http://www.YOURDOMAIN.com/Controller/Action/' + id, 
     success: function(data) { 
      $(tableRow).remove(); 
     } 
    }); 
)}; 

यह बहुत ही बुनियादी कार्यान्वयन, आप इसे पंक्ति को हटाने में कुछ एनीमेशन के साथ तैयार कर सकता है। आपको कुछ त्रुटि प्रबंधन के साथ डेटा पास करने और डेटा वापस करने की भी आवश्यकता है। jQuery AJAX tutorial के लिए यहां देखें।