2009-11-15 60 views
1

我有一個MVC視圖,顯示記錄列表。ASP.NET MVC CheckBox

我想要一個複選框,允許您隱藏/顯示不活動的記錄。

我該如何做到這一點,以便當用戶選中/取消選中該框時,它會觸及控制器並獲取完整或子集列表?我應該使用AJAX呼叫嗎?

所有這些都應該在索引方法上完成嗎? (通常只返回所有記錄的列表)。

任何幫助/想法讚賞。

回答

1

我一直在研究基於ASP.NET MVC的CRM應用程序。在獲取潛在客戶列表時,我遇到了同樣的問題。用戶(即銷售經理,銷售代表等)通常喜歡在潛在客戶列表中看到的是「熱」或「活躍」的潛在客戶。在我的情況下,我在Index方法中加載所有「熱」/「活動」線索。我有一個包含複選框列表的部分視圖(在Index視圖中),這些複選框表示一個潛在客戶的各個階段,例如「已聯繫」,「已轉換」,「已關閉」。當用戶點擊其中一個複選框時,我做了一個AJAX/jQuery GET所有在檢查checboxes陣列中有狀態的線索。實施例 -

 


    $(document).ready(function() { 

     $(".lead-status").click(
     function() { 
      var checkedOptions = ''; 
      $("input[class=lead-status]:checked").each(
       function() { 
        checkedOptions += $(this).attr('name') + ','; 
       }); 

      var leadFilterUrl = "/Lead/FilteredLeadList/?filterString=" + checkedOptions; 
      $.get(leadFilterUrl, function(data) { 
       var divToShowId = "#leads"; 
       var divToShow = $(divToShowId); 
       divToShow.html(''); 
       divToShow.html(data); 
      }, 
      "html"); 

     }); 
    });  

複選框的局部視圖是像這樣 -

<div class="filters-body"> 
    <div class="checkbox-holder"> 
    <div id="new-leads-count" style="float:right;"><%= Model.NewLeadsCount.ToString() %></div> 
    <%= Html.CheckBox("new", new { @checked = "checked", @class = "lead-status" }) %> 
    New 
    </div> 
    <div class="checkbox-holder"> 
    <div id="contacted-leads-count" style="float:right;"><%= Model.ContactedLeadsCount.ToString() %></div> 
    <%= Html.CheckBox("contacted", new { @checked = "checked", @class = "lead-status" })%> 
    Contacted 
    </div> 
    <div class="checkbox-holder"> 
    <div id="following-up-leads-count" style="float:right;"><%= Model.FollowingUpLeadsCount.ToString() %></div> 
    <%= Html.CheckBox("following", new { @checked = "checked", @class = "lead-status" })%> 
    Following up 
    </div> 
    <div class="checkbox-holder"> 
    <div id="rejected-leads-count" style="float:right;"><%= Model.RejectedLeadsCount.ToString() %></div> 
    <%= Html.CheckBox("rejected", new { @checked = "checked", @class = "lead-status" })%> 
    Rejected 
    </div> 
    <div class="checkbox-holder"> 
    <div id="converted-leads-count" style="float:right;"><%= Model.ConvertedLeadsCount.ToString() %></div> 
    <%= Html.CheckBox("converted", new { @checked = "checked", @class = "lead-status" })%> 
    Converted 
    </div> 
    <div class="summary"> 
    <div id="total-leads-count" style="float:right;"><b><%= Model.TotalLeadsCount.ToString() %></b></div> 
    <b>Total Leads</b> 
    </div> 

FilteredLeadList控制器,I從基於所選擇的過濾器和返回數據庫獲取引線的列表然後將HTML設置在適當的div中。

我希望這給出瞭如何使用AJAX/jQuery獲取項目的部分列表的想法。我正在增強應用程序以使用JSON而不是HTML來提高性能。

希望這有助於 印

1

假設你有控制器這樣的:

public class YourController : Controller { 
    public ActionResult ShowOrHide(RecordInfo[] info) { 
     RecordInfo[] existing = GetExisting();   
     if (IsPost()) { 
      for (int i = 0; i < existing.Length; i++) { 
       // Merge so it will go to the View Model in case of validaiton errror 
       // Should also check the array bounds 
       r.IsVisible = info[i].IsVisible; 
       ShowOrHideRecord(r); 
      } 
      return RedirectToAnotherAction(); 
     } 
     return View(existing); 
    } 
} 

,並查看這樣的:

<% for(int i=0; i <= Model.Length; i++) { %> 
    <div class="item"> 
     <% var name = "info[" + i + "].IsVisible"; %> 
     <% Html.CheckBox(name) %> 
     <label for="<%=name.Replace('.', '_')%>"><%= Model[i].Caption %></label> 
    </div> 
<% } %> 

一切都應該工作。只要注意可能的NULL。

這可以在沒有AJAX的情況下工作,或者您可以使用常規方法輕鬆地使用AjaxForm包裝它。所以優雅的退化也會起作用。