重新加載一個頁面參數MVC剃刀

Question

一些局部視圖我是一個學生，也有新的ASP.NET編程。 我使用Razor MVC視圖引擎。 我想在一個頁面（Index.cshtml）使用2-日期時間參數（的startDate &結束日期），並用一個按鈕觸發，以顯示一些局部視圖。 但我不知道如何將參數傳遞給控制器​​，然後使用的startDate &結束日期之間的信息頁面重載。

Index.cshtml（更新）

@model LoginProject.Models.Date 
 
@{ 
 
    ViewBag.Title = "Welcome Maestro"; 
 
} 
 
    <!-- Bootstrap CSS and bootstrap datepicker CSS used for styling the demo pages--> 
 
    <link rel="stylesheet" href="~/Content/themes/css/datepicker.css"> 
 
    <link rel="stylesheet" href="~/Content/themes/css/bootstrap.css"> 
 

 
    <div class="well"> 
 
    <table class="table"> 
 
     <thead> 
 
      <tr> 
 
       <div id="result"></div> 
 

 
        @using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "result", HttpMethod = "POST", InsertionMode = InsertionMode.Replace })) 
 
        { 
 
         <th>@Html.EditorFor(Model => Model.start)</th> 
 
         <th>@Html.EditorFor(Model => Model.end)</th> 
 
         <td><input type="submit" value="Cek" class="btn btn-primary" id="sub" /></td> 
 
        } 
 
      </tr> 
 
     </thead> 
 
    </table> 
 
</div> 
 
    <!-- Load jQuery and bootstrap datepicker scripts --> 
 
    <script src="~/Scripts/js/jquery-1.9.1.min.js"></script> 
 
    <script src="~/Scripts/js/bootstrap-datepicker.js"></script> 
 

 
<script> 
 
    
 
    $(function() { 
 
     // disabling dates 
 
     var nowTemp = new Date(); 
 
     var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0); 
 

 
     var st = $('#start').datepicker({ 
 
      onRender: function (date) { 
 
       return date.valueOf(); 
 
      } 
 
     }).on('changeDate', function (ev) { 
 
      if (ev.date.valueOf() > en.date.valueOf()) { 
 
       var newDate = new Date(ev.date) 
 
       newDate.setDate(newDate.getDate() + 1); 
 
       en.setValue(newDate); 
 
      } 
 
      st.hide(); 
 

 
      $('#end')[0].focus(); 
 
     }).data('datepicker'); 
 

 

 
     var en = $('#end').datepicker({ 
 
      onRender: function (date) { 
 
       return date.valueOf() <= st.date.valueOf() 
 
       ; 
 
      } 
 
     }).on('changeDate', function (ev) { 
 
      en.hide(); 
 
     }).data('datepicker'); 
 
    }); 
 
</script> 
 

 
    @{Html.RenderAction("baruLama", "Home");} 
 
    @{Html.RenderAction("kunjunganPoli", "Home");}

HomeController.cs

using LoginProject.Models; 
 
using System; 
 
using System.Collections.Generic; 
 
using System.Linq; 
 
using System.Web; 
 
using System.Web.Mvc; 
 

 
namespace LoginProject.Controllers 
 
{ 
 
    public class HomeController : Controller 
 
    { 
 
     private rsudwEntities5 db = new rsudwEntities5(); 
 

 
     public ActionResult Index() 
 
     { 
 
      return View(); 
 
     } 
 
    
 
      public ActionResult baruLama(Date date) 
 
     { 
 
      if (date.start != null && date.end != null) 
 
      { 
 

 
       return PartialView("_totalKunjunganGender", db.getTotalKunjunganGender(date.start, date.end).ToList()); 
 

 
      } 
 
      else 
 
      { 
 

 
       var today = DateTime.Today; 
 
       var month = new DateTime(today.Year, today.Month, 1); 
 
       var first = month.AddMonths(-1); 
 
       var last = month.AddDays(-1); 
 

 
       return PartialView("_totalKunjunganGender", db.getTotalKunjunganGender(first, last).ToList()); 
 
      } 
 

 
     } 
 

 
      public ActionResult kunjunganPoli(Date date) 
 
      { 
 
       if (date.start != null && date.end != null) 
 
       { 
 

 
        return PartialView("_totalKunjunganPoli", db.getKunjunganPoli(date.start, date.end).ToList()); 
 

 
       } 
 
       else 
 
       { 
 

 
        var today = DateTime.Today; 
 
        var month = new DateTime(today.Year, today.Month, 1); 
 
        var first = month.AddMonths(-1); 
 
        var last = month.AddDays(-1); 
 

 
        return PartialView("_totalKunjunganPoli", db.getKunjunganPoli(first, last).ToList()); 
 
       } 
 

 
      } 
 

 
    } 
 
}

Date.cs

using System; 
 
using System.Collections.Generic; 
 
using System.Linq; 
 
using System.Web; 
 

 
namespace LoginProject.Models 
 
{ 
 
    public class Date 
 
    { 
 
     public DateTime start = DateTime.Parse("01/08/2014"); //set default to 1 august 2014 
 
     public DateTime end = DateTime.Parse("01/09/2014"); //set default to 1 september 2014 
 
     public DateTime m { 
 
      get { return start; } 
 
      set { start = value; } 
 
     } 
 
     public DateTime s { 
 
      get { return end; } 
 
      set { end = value; } 
 
     } 
 
    } 
 
}

爲了實現這一目的，我應該怎麼辦？我應該使用Ajax嗎？還是Html.BeginForm？但是我不能用它們渲染多個局部視圖。 我會真正appriciate任何幫助。 謝謝。

Answer 1

有多種方法可以做到這一點，這只是其中之一。

jQuery有，你可以使用一個不錯的裝載功能，每次調用它的時候，它會刷新局部視圖。在這種情況下，BeginForm是沒有必要的。

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "MyForm" })) 
{ 

    @Html.Kendo().DatePicker().Name("RefDate").Value("09/25/2014")    


    <input type="button" value="Load Data" id="MyBTN" />  
    <br/> 


    <div id="MyPartial"> 
    </div>     
} 


<script> 

    $("#MyBTN").click(function() { 

     var date = $("#RefDate").val(); 
     var int = 5; 

     $("#MyPartial").load('Home/ViewPartial/?refDate=' + date + '&days=' + int);   
    }); 


</script> 

MyPartial div將作爲您將調用的局部視圖的佔位符。您的控制器操作看起來像這樣

public PartialViewResult ViewPartial(DateTime refDate, int days) 
    {      
     MyModel model = new MyModel(); 
     //do stuff 
     return PartialView("_MyPartial", model); 
    } 

上面的查詢字符串中的參數值必須與控制器所期望的參數匹配。