使用参数 MVC Razor 在一个页面中重新加载部分视图

Question

我是一名学生，也是 ASP.NET 编程的新手。我正在使用 Razor MVC 视图引擎。我想使用两个日期时间参数（startDate 和 endDate）在一页（Index.cshtml）中显示一些部分视图，并使用一个按钮作为触发器。 但我不知道如何将参数传递给控制器​​，然后使用 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？

但我不能用它们来渲染多个局部视图。

Answer 1

有多种方法可以做到这一点，这只是其中之一。

JQuery 有一个不错的 Load 函数，你可以使用它，每次调用它，它都会刷新局部视图。在这种情况下，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);
    } 

上述查询字符串中的参数值必须与控制器期望的参数相匹配。