How to Bind Data in Webgrid usig PartialView in ASP.net MVC

Question

Iam new to .Net MVC. I need to bind data into webgrid return using PartialView(),or If it is possible to return back using JSON,Now My code will execute on Dropdown change,But it will not bind values in web grid.

JavaScript,Model,Controller Codes are shown below:

Script

<script type="text/javascript">
        $(document).ready(function () {
            $("#Cust_Id").change(function () {
                firstDDLValue = $("#Cust_Id").val();
                $.post('@Url.Action("SelectCustomerByID", "Admin")', {secondValue:firstDDLValue        }, function (ReceiptList) {
                    alert(firstDDLValue);
                    $('#divgrid').html(ReceiptLists);
                  });
            });

        });
    </script>

View:

<div id="divgrid" style="margin-top: 15px;">
 @{
 var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5, selectionFieldName: "selectedRow", ajaxUpdateContainerId: "gridContent");
grid.Pager(WebGridPagerModes.NextPrevious);}
 <div id="gridContent">
            @grid.GetHtml(
                tableStyle: "webgrid-table",
                headerStyle: "webgrid-header",
                footerStyle: "webgrid-footer",
                alternatingRowStyle: "webgrid-alternating-row",
                selectedRowStyle: "webgrid-selected-row",
                rowStyle: "webgrid-row-style",
                columns: grid.Columns(
                grid.Column("Id", "ID", style: "id"),
                grid.Column("Cust_Name", "Cust Name", style: "PName"),
                grid.Column("Pay_Amount", "Pay_Amount", style: "ICode"),
                grid.Column("Pay_Mode", "Pay_Mode", style: "IName"),
                grid.Column("Bank_Name", "Bank_Name", style: "Weight"),
                grid.Column("Bank_Address", " Bank_Address", style: "MakingCharge"),
                grid.Column("ChequeNo", "ChequeNo", style: "Certification"),
                grid.Column("Cheque_Date", " Cheque_Date", style: "Price"),
                grid.Column("Date", "Date", style: "Price"),
                grid.Column("Edit", "", @<a href='../Admin/EditReceipt?id=@item.ID' ><img src="~/Images/edit.png" alt='Edit' /></a>, style: "width:10%"),
                grid.Column(header: "Delete", format: @<text><a href="@Url.Action("DeleteReceipt", "Admin", new { Id = item.ID })" onclick="javascript:return confirm('Are you sure you'd like to delete this product?');"><img src="../Images/delete.png" alt='Delete' /></a></text>) ))
 @if (grid.HasSelection)
        {
             Receipt = (JewellaryWeb.Models.Receipt)grid.Rows[grid.SelectedIndex].Value;
                                <b>Id</b> @Receipt.Id<br />
                                <b>Name</b> @Receipt.Cust_Name<br />
                                <b>Amount</b> @Receipt.Pay_Amount<br />
                                <b>PayMode</b> @Receipt.Pay_Mode<br />
                                <b>BankName</b> @Receipt.Bank_Name<br />
                                <b>BankAddress</b> @Receipt.Bank_Address<br />
                                <b>ChequeNumber</b> @Receipt.ChequeNo<br />
                                <b>ChequeDate</b> @Receipt.Cheque_Date<br />
        }
</div>

Controller:

public ActionResult SelectCustomerByID(Receipt model,string secondValue)
        {
          int CustID = 0;
          if (secondValue != "")
          CustID = Convert.ToInt32(secondValue);
          ObservableCollection<Receipt> ReceiptList = new ObservableCollection<Receipt>();
          Receipt Receipt = new Models.Receipt();
          model.ReceiptList = Receipt.GetReceiptListByCustID(CustID);
          return PartialView(model.ReceiptList);
        }

Answer 1

I found answer for this I just modified my Script and Use ParitalView to bind data in gird My Solution Code is:

Script

<script type="text/javascript">
     $(document).ready(function () {
     $("#Cust_Id").change(function () {
     firstDDLValue = $("#Cust_Id").val();
     $.get('@Url.Action("SelectCustomerByID", "Admin")', { secondValue: firstDDLValue },      function (ReceiptList) {
      $('#gridContent').html(ReceiptList);
        });
      });
     });
</script>

i create new _Recepitgrid.cshtml as PartialView and write the code for Webgrid as Same as in the main view.

Controller

public ActionResult SelectCustomerByID(Receipt model, string secondValue)
{
 int CustID = 0;
 if (secondValue != "")
 CustID = Convert.ToInt32(secondValue);
 ObservableCollection<Receipt> ReceiptList = new ObservableCollection<Receipt>();
 Receipt Receipt = new Models.Receipt();
 ReceiptList = Receipt.GetReceiptListByCustID(CustID);
 return PartialView("_Recepitgrid", ReceiptList);
}

Now it will works fine..