CODEWITHSUNDEEP
jqueryasp.net-mvcasp.net-mvc-3
pisi
pisi

Reputation: 127

Pass jquery parameters to Controller Action

I want to pass 2 parameters with ajax function to the Controller Action, but the code that I use it's not working. The action is called but without parameters; what is wrong in the code below? Please help. Thank you!

view code:

        <fieldset>
            @Html.Label("Start date: *")
            @Html.TextBoxFor(model => model.startDate, new { Class = "calendar", data_mini = true, data_role = "datebox", data_options = "{\"mode\":\"calbox\",\"useNewStyle\": true,\"overrideStyleClass\": \"calendar\",\"fieldsOrderOverride\": [\"d\",\"m\",\"y\"],\"headerFormat\":\"%A,%d, %-m, %Y\",\"dateFormat\":\"DD-MM-YYYY\",\"useTodayButton\":true}" })
        </fieldset>
        <fieldset>
            @Html.Label("End date: *")
            @Html.TextBoxFor(model => model.endDate, new { Class = "calendar", data_mini = true, data_role = "datebox", data_options = "{\"mode\":\"calbox\",\"useNewStyle\": true,\"overrideStyleClass\": \"calendar\",\"fieldsOrderOverride\": [\"d\",\"m\",\"y\"],\"headerFormat\":\"%A,%d, %-m, %Y\",\"dateFormat\":\"DD-MM-YYYY\",\"useTodayButton\":true}" })
        </fieldset>
        <fieldset>
            @Html.Label("Submited: *")
        </fieldset>
        <a data-role="button" id="search" name="search" data-theme="a" class="book ui-btn ui-btn-corner-all ui-shadow ui-btn-up-a">
        <span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Search</span></span></a>

Jquery code:

<script type="text/javascript">
 $("#search").click(function () {
    GetNewDaysList();
   });
//gets elements for the selected dates
function GetNewDaysList() {
var action = '@Url.Action("GetNewDays", "ApproveWork")';
var criteria = new Array($("#startDate").val(),$("#endDate").val());
    var opt = {
        type: "GET",
        data: { criteria: criteria },
        url: action,
        success: DaysListSuccess,
        error:DaysListFailed
    };
    jQuery.ajax(opt);
}

  function DaysListSuccess(data) {
    if (data != undefined) {
        $.mobile.hidePageLoadingMsg();
        $('ul').hide();
        $("#employeeDays").html(data).trigger('create');
        $("#searchSection").show();
        $("#employeeDays").show();
    }
}

  function DaysListFailed() {
 //
}
});

Controller code:

    [HttpGet]
      public ActionResult GetNewDays(IEnumerable<string> criteria)
    {
        List<string> criteriaList = criteria.ToList();
        DateTime start = DateTime.ParseExact(criteriaList[1],"dd-MM-yyyy", System.Globalization.CultureInfo.InvariantCulture);
        string startToString = start.ToString("yyyyMMdd");
        DateTime end = DateTime.ParseExact(criteriaList[2], "dd-MM-yyyy", System.Globalization.CultureInfo.InvariantCulture);
        string endToString = end.ToString("yyyyMMdd");            
        List<string> daysList = new List<string>();
       var model = new ApproveWorkModel();
       model.daysList = daysList;
       return PartialView ( "EmployeeDays",model);
    }
}

Upvotes: 0

Views: 2403

Answers (1)

SalmanAA
SalmanAA

Reputation: 552

use this:

var opt = {
    type: "GET",
    data: { 
            startDate:  $("#startDate").val(),
            endDate: $("#endDate").val()
    },
    url: action,
    success: DaysListSuccess,
    error:DaysListFailed
};

and in controller:

public ActionResult GetNewDays(string startDate, string endDate)

Upvotes: 1

Related Questions