MVC pass date range to controller using javascript

Question

Sorry if my question sounds noob, but I am a real beginner in javascript. I have 2 parameters "startdate" and "enddate". I want to pass it to controller via this javascript:

View: (Updated)

<div class="inventoryTypeList">
<p>
    <label for="start">From:</label>
        @(Html.Kendo().DatePicker()
              .Name("from")
              .Events(e => e.Change("startChange"))
        )

        <label for="end">To:</label>
        @(Html.Kendo().DatePicker()
              .Name("to")
              .Events(e => e.Change("endChange"))
        )
</p>
    <button class="k-button" id="showGrid">Search</button>
</div>

<script>

    function startChange() {
        var endPicker = $("#to").data("kendoDatePicker"),
            startDate = this.value();

        if (startDate) {
            startDate = new Date(startDate);
            startDate.setDate(startDate.getDate() + 1);
            endPicker.min(startDate);
        }
    }

    function endChange() {
        var startPicker = $("#from").data("kendoDatePicker"),
            endDate = this.value();

        if (endDate) {
            endDate = new Date(endDate);
            endDate.setDate(endDate.getDate() - 1);
            startPicker.max(endDate);
        }
    }

    $(function () {

        $("#showGrid").click(function () {
            $.ajax({
                url: '@Url.Action("PastTransactionsPartial", "InventoryTransactions")',
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                cache: false,
                data: JSON.stringify({
                    dateFrom: $('#from').val(),
                    dateTo: $('#to').val(),
                }),
                success: function (result) {
                    $('#divPastTransactions').replaceWith(result);
                },
                error: function () { alert("Please specify from and to dates"); }
            });
        });
    });

</script>

<div id="divPastTransactions"  ></div>

Controller: (Updated)

public ActionResult PastTransactionsPartial(DateTime dateFrom, DateTime dateTo)
    {
        var inventorytransactions = db.InventoryTransactions.Include(i => i.InventoryTransactionType).Include(i => i.InventoryType).Include(i => i.Supplier).Where(i => i.InventoryTransactionDate >= dateFrom && i.InventoryTransactionDate <= dateTo);
        return PartialView("_PastTransactionsPartial", inventorytransactions.ToList());
    }

How do I do that? and what do I capture them in the controller?

The results will be displayed in partial view underneath the search function

Edit: closing this thread and put the issue into new thread

You will need to pass them using AJAX and n POST action method. — Sachin Kainth
– Sachin Kainth, Commented Apr 26, 2013 at 16:46
@SachinKainth I am loading a grid using partial view afterwards. Sorry I forgot to include that — blurryMVC
– blurryMVC, Commented Apr 26, 2013 at 16:50
Take a look at the following post which has some code examples that are quite close to what you wish to do: stackoverflow.com/questions/5634014/… — David Tansey
– David Tansey, Commented Apr 26, 2013 at 18:26

blurryMVC · Accepted Answer · 2013-04-26 20:04:46Z

View:

<div class="searchPastTransactions">
<p>
    <label for="start">From:</label>
        @(Html.Kendo().DatePicker()
              .Name("from")
              .Events(e => e.Change("startChange"))
        )

        <label for="end">To:</label>
        @(Html.Kendo().DatePicker()
              .Name("to")
              .Events(e => e.Change("endChange"))
        )
</p>
    <button class="k-button" id="showGrid">Search</button>
</div>

<script>

    function startChange() {
        var endPicker = $("#to").data("kendoDatePicker"),
            startDate = this.value();

        if (startDate) {
            startDate = new Date(startDate);
            startDate.setDate(startDate.getDate() + 1);
            endPicker.min(startDate);
        }
    }

    function endChange() {
        var startPicker = $("#from").data("kendoDatePicker"),
            endDate = this.value();

        if (endDate) {
            endDate = new Date(endDate);
            endDate.setDate(endDate.getDate() - 1);
            startPicker.max(endDate);
        }
    }

    $(function () {

        $("#showGrid").click(function () {
            $.ajax({
                url: '@Url.Action("PastTransactionsPartial", "InventoryTransactions")',
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                cache: false,
                data: JSON.stringify({
                    dateFrom: $('#from').val(),
                    dateTo: $('#to').val(),
                }),
                success: function (result) {
                    $('#divPastTransactions').replaceWith(result);
                },
                error: function () { alert("Please specify from and to dates"); }
            });
        });
    });

</script>

<div id="divPastTransactions"  ></div>

Controller:

public ActionResult PastTransactionsPartial(DateTime dateFrom, DateTime dateTo)
        {
            var inventorytransactions = db.InventoryTransactions.Include(i => i.InventoryTransactionType).Include(i => i.InventoryType).Include(i => i.Supplier).Where(i => i.InventoryTransactionDate >= dateFrom && i.InventoryTransactionDate <= dateTo);
            return PartialView("_PastTransactionsPartial", inventorytransactions.ToList());
        }

Collectives™ on Stack Overflow

MVC pass date range to controller using javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related