Я студент, а также новичок в программировании ASP.NET. Я использую механизм просмотра Razor MVC. Я хочу отобразить частичный вид на одной странице (Index.cshtml), используя два параметра datetime (startDate & endDate) и одну кнопку в качестве триггера. Но я не знаю, как передать параметры контроллеру, а затем сделать перезагрузку страницы информацией между startDate & endDate.
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?
Но я не могу использовать их для отображения нескольких частичных представлений.
Существует несколько способов сделать это, это всего лишь один из них.
В 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 будет заполнителем вашего частичного представления, которое вы MyPartial
. Действие вашего контроллера будет выглядеть примерно так:
public PartialViewResult ViewPartial(DateTime refDate, int days)
{
MyModel model = new MyModel();
//do stuff
return PartialView("_MyPartial", model);
}
Значения параметров в строке запроса выше должны соответствовать параметрам, которые ожидает контроллер.