jquery and mvc.net query

Question

i'm totally new to mvc.net nhibernate and programming, what i'm trying to do is to query using ajax request...i have two pages...the first page is connect to one table in sql server and the next page is connected to another table...those two table are connected with a foreign key...the first page will show the jquery datatable records from the first table and it has link called view when i click on it it will direct me to the other controller/page which will show all of the jquery datatable records of the other db table..so my question is how can i query the next table(page) when i click on view(first page/table)?i want to show certain records ...what should i pass?am really confused ..here my class model :

public class Pybkhdr : NhibernateModel, IMcDataParameter
{
    public virtual Guid ID { get; set; }
    public virtual string PayeeCode{ get; set; }
    public virtual string PayeeName { get; set; }
    public virtual DateTime PaymentDate { get; set; }
    public virtual string BankName { get; set; }
    public virtual string FileName { get; set; }
    public virtual string FileStatus { get; set; }
    public virtual int TotalRecord { get; set; }
    public virtual decimal TotalAmount { get; set; }
    public virtual string HashTotal { get; set; }
    public virtual int Acti { get; set; }
    public virtual string Crid { get; set; }
    public virtual DateTime Crdt { get; set; }
    public virtual string Lmid { get; set; }
    public virtual DateTime Lmdt { get; set; }
}

public class Pybkdtl : NhibernateModel, IMcDataParameter
{
    public virtual Guid ID { get; set; }
    public virtual Guid PybkhdrId { get; set; }
    public virtual int SequenceNo{get; set;}
    public virtual string CustomerName { get; set; }
    public virtual string Icno { get; set; }
    public virtual decimal Amount { get; set; }
    public virtual string AccountNo { get; set; }
    public virtual string ReferenceNo { get; set; }
    public virtual string TransactionRef { get; set; }
    public virtual string MobileNo { get; set; }
    public virtual string Channel { get; set; }
    public virtual DateTime TransactionDate { get; set; }
    public virtual string TransactionStatus { get; set; }
    public virtual int Acti { get; set; }
    public virtual string Crid { get; set; }
    public virtual DateTime Crdt { get; set; }
    public virtual string Lmid { get; set; }
    public virtual DateTime Lmdt { get; set; }

view :

 @using Cp.Controllers @using ld.Http @{ ViewBag.Title = "Bank Payment Listing"; Layout = Request.IsAjaxRequest() ? "" : "~/Views/Shared/_DpLayout.cshtml"; } <style> .displaynone { display: none; } </style> @Html.Raw(ViewBag.Script) <fieldset> <div> <table class="table1pxForDt" style="width:100%"> <tr> <td> Approved - Pending payment Approved<br /> Error - One or more matching having problem<br /> Match - All transaction match<br /> New - only upload no do any matching<br /> Unmatch - One or more transaction cannot match </td> </tr> </table> </div> <div style="text-align: left;"> <div style="text-align: right;"> <input type="button" onclick="BackHomePage()" value="Back" /> <input type="button" name="btnupload" id="btnupload" value="Upload New File" /> </div> Search：<input value="" id="SearchValue" onkeydown="if (EnterSearch('SearchValue', event)) { $('#btnSearch').click(); }" /> Field：<select id="SearchType" style="margin-right:20px;"> <option value="FileName" selected="selected">File Name</option> <option value="BankName">Bank</option> </select> Status : <select id="SearchStatus"> <option value="">-- Select --</option> <option value="@BankPaymentController.PayFileStatus.Approved">Approved</option> <option value="@BankPaymentController.PayFileStatus.Error">Error</option> <option value="@BankPaymentController.PayFileStatus.Match">Match</option> <option value="@BankPaymentController.PayFileStatus.New">New</option> <option value="@BankPaymentController.PayFileStatus.Unmatch">Unmatch</option> </select> <input type="button" id="btnSearch" name="btnSearch" value="Search" /> <table class="table1pxForDt" id="dtbankpayheader" style="width:100%"> <thead> <tr> <th>Status</th> <th>Upload Date</th> <th>File Name</th> <th>Bank</th> <th>Upload By</th> <th>filepath</th> <th>summarypath</th> <th>ACTION</th> </tr> </thead> <tbody></tbody> </table> </div> </fieldset> <script type="text/javascript"> var urlroot = '@(Url.Content("~/"))'; $(document).ready(function () { ld.nf.RemoveModuleMask("workbody"); if (ld.gd('#ScreenTitleId')) ld.gd("ScreenTitleId").innerHTML = '@ViewBag.Title'; }); $('#btnSearch').click(function () { mydatatable.fnDraw(); }); $('#btnupload').click(function () { window.location = "@("/BankPayment/BankPaymentUpload".UrlResolve())"; }); function BackHomePage() { window.location = "@("/MainWork/Welcome".UrlResolve())"; ld.gd("ScreenTitleId").innerHTML = ""; } function DeleteFile(filename) { alert(urlroot + 'BankPayment/BankPaymentDelete?fn=' + filename + '&fc=' + Math.random()); window.location = urlroot + 'BankPayment/BankPaymentDelete?fn=' + filename + '&fc=' + Math.random(); } function EnterSearch(textId, evt) { if (textId != undefined && evt != undefined) { ld.gd(textId).setAttribute("autocomplete", "off"); var myEvent = evt ? evt : (window.event ? window.event : null); if (myEvent.keyCode === 13) { return true; } } return false; } var mydatatable = null; $(document).ready(function () { mydatatable = $('#dtbankpayheader').dataTable({ "oLanguage": { "sUrl": "@(Resources.AppGlobal.JqDataLabelFile.UrlResolve())" }, "aaSorting": [[1, "desc"]], "bStateSave": true, "aLengthMenu": [[10, 25, 50], [10, 25, 50]], "bJQueryUI": true, "sPaginationType": "full_numbers", "bPaginate": true, "bProcessing": false, "bServerSide": true, "sAjaxSource": "@("/BankPayment/BankPaymentListingAction".UrlResolve())" + "?urlrnd=" + Math.random(), "sServerMethod": "POST", 'bLengthChange': true, "iDisplayLength": 30, "bFilter": false, "fnServerData": function (sSource, aoData, fnCallback) { aoData.push({ 'name': 'SearchValue', 'value': ld.gd("SearchValue").value }); aoData.push({ 'name': 'SearchType', 'value': ld.gd("SearchType").value }); aoData.push({ 'name': 'SearchStatus', 'value': ld.gd("SearchStatus").value }); // aoData.push({ 'name': 'ID', 'value': '@(ViewBag.ID)' }); $.ajax({ "dataType": 'json', "type": "POST", "url": sSource, "data": aoData, "success": function (data) { fnCallback(data); } }); }, "aoColumns": [ { "sName": "FileStatus", "sClass": "left", "sWidth": "100px" }, { "sName": "Crdt", "sClass": "left", "sWidth": "100px", "sType": "date" }, { "sName": "FileName", "sClass": "left" }, { "sName": "BankName", "sClass": "left", "sWidth": "100px" }, { "sName": "Crid", "sClass": "left", "sWidth": "150px" }, { "sName": "filepath", "sClass": "left", "sWidth": "10px", "bVisible": false }, { "sName": "summarypath", "sClass": "left", "sWidth": "10px", "bVisible": false }, { "sName": "", "sWidth": "100px", "bSearchable": false, "bSortable": false, "fnRender": function (oObj) { var urlreturn = ''; if ($.trim(oObj.aData[5]).length > 0 || $.trim(oObj.aData[6]).length > 0 || $.trim(oObj.aData[2]).length > 0) { if ($.trim(oObj.aData[5]).length > 0) { urlreturn = '<a href="' + urlroot + oObj.aData[5] + '" target="_blank" >LOG</a>&nbsp;&nbsp;'; } if ($.trim(oObj.aData[6]).length > 0) { urlreturn = urlreturn + '<a href="' + urlroot + oObj.aData[6] + '" target="_blank" >SUMMARY</a>&nbsp;&nbsp;'; } if ($.trim(oObj.aData[0]) == 'NEW' && $.trim(oObj.aData[2]).length > 0) { urlreturn = urlreturn + '<a href="#" onclick="DeleteFile(\\'' + $.trim(oObj.aData[2]) + '\\');" >DELETE</a>&nbsp;&nbsp;'; } } else { urlreturn = '<span>&nbsp;&nbsp;</span>'; } urlreturn += " | <a href='@("/BankPaymentDetail/BankPaymentListing".UrlResolve())? ' >view</a>"; // ?id= return urlreturn; } } ], "fnPageingChange": function (a) { alert(a); } }); }); </script> 

Answer 1

In your first table you add an action link. In parameter of this action link you add the id of the object. The action link points to a controller method that will load the second page (passing the model as a parameter of the view). Your second page/view will just display the model passed in parameter.

[EDIT]

In your first table view, where you want to add a link to show your second table you use :

@Html.ActionLink("View details", "MethodToShowTheView", "ControllerThatWillHandleTheQuery", null, new { @id = [Here you put the ID of the object displayed in the first table]});

In your "ControllerThatWillHandleTheQuery" you have to create a method called "MethodToShowTheView":

[HttpGet]
public ActionResult MethodToShowTheView(string id)
{
    var guid = //Convert string to GUID
    var model = //Look for the Details for this id and load in this variable
    return View("YourSecondView", model);
}

You must have a second view called "YourSecondView". In it, you must set the type of model passed using this line in the header of the view :

@model [TypeOfTheModel];

Then in your page you just have to display the data using the variable Model. For example:

@{
    @Html.Raw(Model.Id);
}

[Edit2]

    urlreturn += " | <a href='@("/BankPaymentDetail/BankPaymentListing".UrlResolve())?id=" + oObject.aData[indexOfTheId] + "' >view</a>";

It will call you method BankPaymentListing in the Controller BankPaymentDetail passing the id in the url. Then you can use your controller to get the detailed data to display and call the second view with the detailed data in the model.

Maybe I don't understand well the problem.

I can lead you to see javascript MVC Grid wich I use to format and display data.