How to use PartialView to bind Data in webgrid on ASP.Net MVC

Question

I have one DropDownlist and Webgrid.When I load Page all Datas where Bind then i need to bind Data in Webgrid depending upon DropDownlist change.How to i do this.

My Code Is:

Script:

It will call the Controller Function

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

Controller Code:

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 View(model.ReceiptList);
}

Answer 1

You should return a PartialView in your action:

return PartialView(model.ReceiptList);

This only works if you have a view called SelectCustomerByID . If you have a view with another name you can specify that in an overload:

return PartialView("_NameOfPartialView", model.ReceiptList);

Then in your success function of $.post() :

function (ReceiptList) {
    // ReceiptList will contain the html of the grid.
    $('#id-of-datagrid').html(ReceiptList);
}

Note: I think you have to remove the Receipt model parameter from SelectCustomerByID .

Answer 2

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..