2012-02-21 49 views
0

我有一個Program Scheduling視圖。當使用GET加載視圖時,它將顯示數據庫中可用的程序列表(在表中)。它僅隨機列出5個程序(最大值)。有兩個按鈕提供基於點擊哪個按鈕在View中顯示數據:ASP.NET MVC3 RAZOR

  1. 顯示3月計劃。點擊此按鈕時,表格應該只顯示計劃在三月份的節目。

  2. 顯示2012程序。點擊此按鈕時,表格應只顯示預定2012年的程序。

我們如何實現它?

注意:另外,您可以請建議一個解決方案,如果「Show 2012程序」的按鈕被多年下拉列表替換,您可以使用該解決方案。

基於MVC的原則:The UI logic belongs in the view. Input logic belongs in the controller. Business logic belongs in the model.

  1. 我們如何實現它的快捷方式?

  2. 我們如何實現它的標準方式(以下上面列出MVC原則)

獲取圖像

enter image description here

CODE

namespace MyEventOriginIdentificationTest.Controllers 
{ 

public class ProgramSchedule 
{ 
    public int ProgramID { get; set; } 
    public string ProgramName { get; set; } 
    public int ScheduledDate { get; set; } 
    public int ScheduledMonth { get; set; } 
    public int ScheduledYear { get; set; } 
} 


public class ProgramTetecastController : Controller 
{ 

    List<ProgramSchedule> wholeProgramList = new List<ProgramSchedule>() 
         { 
         new ProgramSchedule 
         { 
          ProgramID = 1,ProgramName = "2012-March-15", 
          ScheduledDate = 15,ScheduledMonth=3,ScheduledYear=2012 
         }, 
         new ProgramSchedule 
         { 
          ProgramID = 2,ProgramName = "2012-March-16", 
          ScheduledDate = 16,ScheduledMonth=3,ScheduledYear=2012 
         }, 
         new ProgramSchedule 
         { 
          ProgramID = 3,ProgramName = "2012-April-11", 
          ScheduledDate = 11,ScheduledMonth=4,ScheduledYear=2012 
         }, 
         new ProgramSchedule 
         { 
          ProgramID = 4,ProgramName = "2013-Jan-05", 
          ScheduledDate = 5,ScheduledMonth=1,ScheduledYear=2013 
         } 

         }; 




    public List<ProgramSchedule> GetProgramsScheduleForMonth(int theMonth) 
    { 

     var monthProgram = 
           from prog in wholeProgramList 
           where prog.ScheduledMonth == theMonth 
           select prog; 


     return ((List<ProgramSchedule>)monthProgram); 

    } 

    public List<ProgramSchedule> GetProgramsScheduleForYear(int theYear) 
    { 

     var yearProgram = 
           from prog in wholeProgramList 
           where prog.ScheduledYear == theYear 
           select prog; 


     return ((List<ProgramSchedule>)yearProgram); 

    } 



    // GET: 
    public ActionResult MyProgramSchedule() 
    { 
     return View(wholeProgramList); 
    } 

    // POST: 
    [HttpPost] 
    public ActionResult MyProgramSchedule(FormCollection collection) 
    { 
     try 
     { 
      return RedirectToAction("ProgramSchedule"); 
     } 
     catch 
     { 
      return View(); 
     } 
    } 


    } 
} 

VIEW

@model IEnumerable<MyEventOriginIdentificationTest.Controllers.ProgramSchedule> 

@{ 
ViewBag.Title = "MyProgramSchedule"; 
} 

<h2>MyProgramSchedule</h2> 


<div> 


<div id="sub-left" style="width:50%"> 

<input type="submit" value="Show March Programs" /> 
<input type="submit" value="Show 2012 Programs" /> 
<br /> 
</div> 

<div id="sub-right" style="width:50%"> 

<table> 
<tr> 
    <th style="border:1px solid Teal; background-color:Gray"> 
     ProgramID 
    </th> 
    <th style="border:1px solid Teal; background-color:Gray"> 
     ProgramName 
    </th> 
    <th style="border:1px solid Teal; background-color:Gray"> 
     ScheduledDate 
    </th> 
    <th style="border:1px solid Teal; background-color:Gray"> 
     ScheduledMonth 
    </th> 
    <th style="border:1px solid Teal; background-color:Gray"> 
     ScheduledYear 
    </th> 
    <th></th> 
</tr> 

@foreach (var item in Model) { 
<tr> 
    <td style="border:1px solid Teal"> 
     @Html.DisplayFor(modelItem => item.ProgramID) 
    </td> 
    <td style="border:1px solid Teal"> 
     @Html.DisplayFor(modelItem => item.ProgramName) 
    </td> 
    <td style="border:1px solid Teal"> 
     @Html.DisplayFor(modelItem => item.ScheduledDate) 
    </td> 
    <td style="border:1px solid Teal"> 
     @Html.DisplayFor(modelItem => item.ScheduledMonth) 
    </td> 
    <td style="border:1px solid Teal"> 
     @Html.DisplayFor(modelItem => item.ScheduledYear) 
    </td> 

</tr> 
} 

</table> 

</div> 



</div> 

READING

  1. Store Attributes from Button in a Hidden field

  2. ASP.NET MVC3 RAZOR: Retrieving Hidden field Attribute value in Controller (using ViewModel)

  3. Issue with multiple views on single view

  4. Hide or Disable MVC3 ActionLinks depending on cell value

  5. ASP.NET MVC ActionFilterAttribute inject value before model binding


回答

2

所有首先,如果你改變了方法簽名我永遠不會分開 2種方法月份和年份,因爲它們是完全一樣的,包括一個fromto日期例如。

考慮到這一點,你可以這樣做:

public ActionResult ShowProgramsBetweenDates(DateTime? from, DateTime? to) 
{ 
    if(from.HasValue && to.HasValue) { 
     return View(GetProgramsBetweenDates(from.Value, to.Value)); 
    } 

    return View(wholeProgramList); 
} 

public IEnumerable<ProgramSchedule> GetProgramsBetweenDates(DateTime from, DateTime to) 
{ 
    return from prog in wholeProgramList 
      where prog.ScheduledDate >= from && prog.ScheduledDate <= to 
      select prog; 
} 

和你的按鈕將是這樣的:

@using(Html.BeginForm("ShowProgramsBetweenDates", "ProgramTetecast")) 
{ 
    <input type="button" value="Show March Programs" 
      data-from="01-03-2012" data-to="31-03-2012" /> 
    <input type="button" value="Show 2012 Programs" 
      data-from="01-01-2012" data-to="31-12-2012" /> 

    <input type="hidden" id="from" value="" /> 
    <input type="hidden" id="to" value="" /> 
} 

和一個簡單的jQuery幫助

$('form input[type="button"]').on('click', function() { // for all buttons in the form 

    $('#from').val($(this).attr('data-from')); // set #from with date-from 
    $('#to').val($(this).attr('data-to')); // set #to with date-to 

    $(this).closest('form').submit(); // submit the form 

}); 

作爲一個原則,並幫助您在整個應用程序的生命週期中不應該有多個值的日期,有沒有需要拆分日期在一個「表」,因爲你可以提取你需要的一切從一個日期字段

例如,你的類可能僅僅是因爲

public class ProgramSchedule 
{ 
    public ProgramSchedule() {} // Always add an empty constructor 
    public int ProgramID { get; set; } 
    public string ProgramName { get; set; } 
    public int ScheduledDate { get; set; } 
} 

所以你的數據對象會是這樣:

List<ProgramSchedule> wholeProgramList = new List<ProgramSchedule>() 
    { 
     new ProgramSchedule 
     { 
      ProgramID = 1, ProgramName = "2012-March-15", 
      ScheduledDate = new DateTime(2012, 3, 15) 
     }, 
     new ProgramSchedule 
     { 
      ProgramID = 2, ProgramName = "2012-March-16", 
      ScheduledDate = new DateTime(2012, 3, 16) 
     }, 
     new ProgramSchedule 
     { 
      ProgramID = 3, ProgramName = "2012-March-11", 
      ScheduledDate = new DateTime(2012, 3, 11) 
     }, 
     new ProgramSchedule 
     { 
      ProgramID = 4, ProgramName = "2012-January-5", 
      ScheduledDate = new DateTime(2012, 1, 5) 
     }, 
    }; 

,並在您看來,您簡單做:

@foreach (var item in Model) { 
<tr> 
    <td style="border:1px solid Teal"> 
     @Html.DisplayFor(modelItem => item.ProgramID) 
    </td> 
    <td style="border:1px solid Teal"> 
     @Html.DisplayFor(modelItem => item.ProgramName) 
    </td> 
    <td style="border:1px solid Teal"> 
     @Html.DisplayFor(modelItem => item.ScheduledDate) 
    </td> 
    <td style="border:1px solid Teal"> 
     @item.ScheduledDate.toString("MMM") 
    </td> 
    <td style="border:1px solid Teal"> 
     @item.ScheduledDate.ToString("yyyy") 
    </td> 
</tr> 
} 
+0

感謝您的回覆。我得到了這個警告「屬性」數據 - 來自'不是元素'輸入'「的有效屬性。另外,當我運行時,我得到了一個javascript錯誤,說「對象不支持這個屬性或方法」在js函數內部進行點擊。我們如何糾正它? – Lijo 2012-02-21 08:52:55

+1

警告是因爲您將文檔設置爲任何不是HTML5 **(不擔心,'data-'屬性甚至可以在IE6中工作)。關於javascript,你有沒有加載最新的** jQuery **(1.7.1)?你需要在該視圖或你的**佈局**頁面中包含... – balexandre 2012-02-21 08:59:13

+1

你需要1.7.1,正如我所說的,1.5.1有很多錯誤,並且'on'方法不存在,請使用Nuget更新它或簡單地添加'' – balexandre 2012-02-21 09:22:39