Перезагрузить некоторые частичные представления на одной странице с параметром Razor MVC

1

Я студент, а также новичок в программировании 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?

Но я не могу использовать их для отображения нескольких частичных представлений.

  • 0
    использовать AjaxForm просто Google Ajax.BeginForm в asp.net mvc
  • 0
    @Ehsan Sajjad, куда я должен поместить мой @Html.RenderAction?Html.RenderAction? Страница перезагружается, но не работает. Извините за слишком много просил.
Показать ещё 2 комментария
Теги:
parameter-passing
asp.net-mvc-4
partial-views

1 ответ

0

Существует несколько способов сделать это, это всего лишь один из них.

В 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);
    }

Значения параметров в строке запроса выше должны соответствовать параметрам, которые ожидает контроллер.

Поделиться
  • 0
    Благодарю. Я немного запутался, но все еще пытаюсь реализовать это в своем коде. : D
  • 0
    Мой контроллер прав? Чтобы получить параметр даты и времени (начало и конец) из представления? Я все еще не могу перезагрузить его правильно =.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню