Reload some partial view in one page with parameter MVC Razor

Question

I'm a student and also new in ASP.NET programming. I'm using Razor MVC view engine. I want to display some partial view in one page (Index.cshtml) using two datetime parameters (startDate & endDate) and with one button as trigger. But I don't know how to pass the parameters to the Controller and then make the page reload with information between startDate & endDate.

Index.cshtml (Updated)

 @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; } } } } 

To achieve that purpose what should I do?

Should I use Ajax?

Or Html.BeginForm?

But I can't use them to render multiple partial views.

Answer 1

There's multiple ways you could do this, this is just one of them.

JQuery has a nice Load function you could use, each time you call it, it will refresh the partial view. In this scenario, BeginForm is not necessary.

@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 will be the placeholder for your partial view that you will call. Your controller action would look something like this

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

The parameters values in the query string above must match the parameters that the controller expects.