Databases
StackOverflow2013
Postsdbo
POHow to Bind Data in Webgrid usig PartialView in ASP.net MVC
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to Bind Data in Webgrid usig PartialView in ASP.net MVC
    text
    copied!<p>Iam new to .Net MVC. I need to bind data into webgrid return using <code>PartialView()</code>,or If it is possible to return back using <code>JSON</code>,Now My code will execute on <code>Dropdown</code> change,But it will not bind values in web grid.</p> <p>JavaScript,Model,Controller Codes are shown below:</p> <p>Script</p> <pre><code>&lt;script type="text/javascript"&gt; $(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); }); }); }); &lt;/script&gt; </code></pre> <p>View: </p> <pre><code>&lt;div id="divgrid" style="margin-top: 15px;"&gt; @{ var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5, selectionFieldName: "selectedRow", ajaxUpdateContainerId: "gridContent"); grid.Pager(WebGridPagerModes.NextPrevious);} &lt;div id="gridContent"&gt; @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", "", @&lt;a href='../Admin/EditReceipt?id=@item.ID' &gt;&lt;img src="~/Images/edit.png" alt='Edit' /&gt;&lt;/a&gt;, style: "width:10%"), grid.Column(header: "Delete", format: @&lt;text&gt;&lt;a href="@Url.Action("DeleteReceipt", "Admin", new { Id = item.ID })" onclick="javascript:return confirm('Are you sure you'd like to delete this product?');"&gt;&lt;img src="../Images/delete.png" alt='Delete' /&gt;&lt;/a&gt;&lt;/text&gt;) )) @if (grid.HasSelection) { Receipt = (JewellaryWeb.Models.Receipt)grid.Rows[grid.SelectedIndex].Value; &lt;b&gt;Id&lt;/b&gt; @Receipt.Id&lt;br /&gt; &lt;b&gt;Name&lt;/b&gt; @Receipt.Cust_Name&lt;br /&gt; &lt;b&gt;Amount&lt;/b&gt; @Receipt.Pay_Amount&lt;br /&gt; &lt;b&gt;PayMode&lt;/b&gt; @Receipt.Pay_Mode&lt;br /&gt; &lt;b&gt;BankName&lt;/b&gt; @Receipt.Bank_Name&lt;br /&gt; &lt;b&gt;BankAddress&lt;/b&gt; @Receipt.Bank_Address&lt;br /&gt; &lt;b&gt;ChequeNumber&lt;/b&gt; @Receipt.ChequeNo&lt;br /&gt; &lt;b&gt;ChequeDate&lt;/b&gt; @Receipt.Cheque_Date&lt;br /&gt; } &lt;/div&gt; </code></pre> <p><code>Controller:</code></p> <pre><code>public ActionResult SelectCustomerByID(Receipt model,string secondValue) { int CustID = 0; if (secondValue != "") CustID = Convert.ToInt32(secondValue); ObservableCollection&lt;Receipt&gt; ReceiptList = new ObservableCollection&lt;Receipt&gt;(); Receipt Receipt = new Models.Receipt(); model.ReceiptList = Receipt.GetReceiptListByCustID(CustID); return PartialView(model.ReceiptList); } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload