在MVC4中，单击按钮未执行Ajax调用

Question

I am trying to refresh grid in partial view using AJAX call of button click. But click method of button is not working properly.

Following code snippet is code i am using to execute

JQUERY

 <script  type="text/javascript">
$(document).ready(function () {
    $("#fromDate").datepicker({
        changeMonth: true,
        changeYear: true
    });
    $("#toDate").datepicker({
        changeMonth: true,
        changeYear: true
    });
});

//function buttonClick() {

$("#btnSearch").click($.ajax({
    url: 'Report/SearchGrid',
    type: "POST",
    success: function (html) {}
}));

//}
    </script>

Razor Code

<input type="button" value="Search" id="btnSearch" onclick= "buttonClick();" style="width: 90px; border: solid 1px #1570a6; background-color: #1570a6; color: #FFFFFF; font-weight: 100;" />

Controller Code

public ActionResult SearchGrid(ExpenseReportModel model)
{
    ExpenseReportModel expModel = new ExpenseReportModel();
    expModel.ExpenseList = GetExpenseList();
    expModel.ExpenseFromDate = Convert.ToDateTime(model.ExpenseFromDate);
    expModel.ExpenseToDate = Convert.ToDateTime(model.ExpenseToDate);

    return PartialView("_GridData", expModel.ExpenseList);
}

Answer 1

I don't see from your code where you are passing data to the controller or where you are setting anything on your form with the result. Your call should look something like this

$('#btnSearch').on('click', function(){
     $.ajax({
         url: "@(Url.Action("Action", "Controller"))",
         type: "POST",
         data: { from: $('.FromDate').val(), to: $('.ToDate').val() },
         cache: false,
         async: true,
         success: function (result) {
             $(".Content").html(result);
         }
     });
});

then in your controller you will accept parameters from and to instead of the whole model. You aren't doing a post back here so the whole model won't be sent back to the controller. Let me know if you have any questions.