如何将参数解析为MVC4中的局部视图方法

Question

I am using MVC4 with VS2012

Requirement: Want to display Grid data by partial view & loading data from method.

Problem: i sucessfully load data from method to partial view but without parameter.

in index.cshtml

<div id="gridContent"></div>

<script src="~/Content/SB/js/json2.js"></script>

<script>
    $(document).ready(function () {
        $("#btnGo").click(function () {             
            loadGrid();
        });          
    });
</script>

 <script>
     function loadGrid() {
         var booksDiv = $("#gridContent");
         var items = {};
         items.vFinYear = $("#ddl_FinnYear").val();
         items.vDeptCode = $("#ddl_Dept").val();

         $.ajax({
             cache: false,
             type: "GET",
             url: "/Voucher/VoucherRaisedbyMePartial" ,
             data: '{items: ' + items + '}',
             success: function (data) {
                 booksDiv.html('');
                 booksDiv.html(data);
             },
             error: function (xhr, ajaxOptions, thrownError) {
                 debugger;
                 alert(thrownError);
                 alert('Failed to retrieve data.');
             }
         });
     }
</script>

in voucher Controller

    public ActionResult VoucherRaisedbyMePartial(Voucher items)
    {
        // Problem is here: Unable to get values in parameter items
        // Data loading in partial view sucessfully, but i want to filter
        // data on the basis of departmet and financial year.

        var VoucherList = new List<Voucher>();          
        return PartialView("_VoucherRaisedbyMePartial", VoucherList);
    }

Voucher Model

namespace PVS_WEB.Models
{
    public class Voucher
    {
        public string vFinYear { get; set; }
        [DisplayName("Department")]
        public string vDeptCode { get; set; }
        public string vVoucheNo { get; set; }
        public string vPaymentFor { get; set; }
        public string vStatus { get; set; }
        public string vPendingWith { get; set; }
        public string vVoucherSrNo { get; set; }
        public string vUserID { get; set; }

    [DisplayName("Financial Year")]
    public SelectList lstFinYear { get; set; }

    [DisplayName("Department")]
    public SelectList lstDepartment { get; set; }

    [DisplayName("From")]
    public string vFrom { get; set; }

    [DisplayName("To")]
    public string vTo { get; set; }

    [DisplayName("Date")]
    [DisplayFormat(DataFormatString = "{0:d MMM yyyy}")]
    public DateTime dtDate { get; set; }

    [DisplayName("Invoice Received Date")]
    [DisplayFormat(DataFormatString = "{0:d MMM yyyy}")]
    public DateTime dtInvoiceRecDate { get; set; }

    [DisplayName("Vendor")]
    public string vVendor { get; set; }

    [DisplayName("Cost Center")]
    public string vCostcenter { get; set; }

    [DisplayName("GLCode")]
    public string vGLCode { get; set; }

    [DisplayName("Debit To")]
    public string vDebitTo { get; set; }

    [DisplayName("Issue Cheque in favour of")]
    public string vIssuechequeinfav { get; set; }

    [DisplayName("Towards Payment For")]
    public string vTowardsPayment { get; set; }

    [DisplayName("Due Date")]
    [DisplayFormat(DataFormatString = "{0:d MMM yyyy}")]
    public DateTime dtDuecDate { get; set; }

    [DisplayName("Service Applicable")]
    public bool vServiceApplicable { get; set; }

    [DisplayName("Type of Service")]
    public string vServiceType { get; set; }

    [DisplayName("Service received From")]
    public string vServiceReceivedFrom { get; set; }

    [DisplayName("Applicability of service tax liability")]
    public string vServiceTaxLiability { get; set; }


    [DisplayName("Coupon ID")]
    public int nVoucherCouponID { get; set; }

    [DisplayName("Invoice Number")]
    public string vInvoiceNo { get; set; }

    [DisplayName("Invoice Date")]
    [DisplayFormat(DataFormatString = "{0:d MMM yyyy}")]
    public DateTime dtInvoiceDate { get; set; }

    [DisplayName("PO Number")]
    public string vPONo { get; set; }

    [DisplayName("PO Date")]
    [DisplayFormat(DataFormatString = "{0:d MMM yyyy}")]
    public DateTime dtPODate { get; set; }

    [DisplayName("SAP GIR No")]
    public string vSAPGIRNO { get; set; }

    [DisplayName("Invoice Amount")]
    public double dInvoiceAmt { get; set; }

    [DisplayName("Advance Date")]
    [DisplayFormat(DataFormatString = "{0:d MMM yyyy}")]
    public DateTime dtAdvanceDate { get; set; }

    [DisplayName("Advance Amount")]
    public double dAdvanceAmt { get; set; }

}
}

Answer 1

Change you action to post by using HttpPost attribute

[HttpPost]
public ActionResult VoucherRaisedbyMePartial(Voucher items)

In you ajax call you can pass directly the the json object like this

 $.ajax({
     cache: false,
     type: "POST",
     url: "/Voucher/VoucherRaisedbyMePartial" ,
     data: { items: items },
     success: function (data) {
         booksDiv.html('');
         booksDiv.html(data);
     },
     error: function (xhr, ajaxOptions, thrownError) {
         debugger;
         alert(thrownError);
         alert('Failed to retrieve data.');
     }
 });

Answer 2

changes are post and content type is application/json; charset=utf-8

  $.ajax({
             cache: false,
             type: "POST",
             contentType: "application/json; charset=utf-8",
             url: "/Voucher/VoucherRaisedbyMePartial",
             data: '{items: ' + JSON.stringify(items) + '}',

             success: function (data) {
                 booksDiv.html('');
                 booksDiv.html(data);
             },
             error: function (xhr, ajaxOptions, thrownError) {
                 debugger;
                 alert(thrownError);
                 alert('Failed to retrieve data.');
             }
         });