Hi I have two datatables on one partial in MVC 3, One displaying Table_1 and one at the bottom displaying Table_2. I would like to have functionality that, when i double-clicked datatables 1(at row) it will popup Datatables 2 formAddNewRow. Is there any possible way to do this? plus the Datatables 1 ID will be sent along to the popup forms.

Currently my partial view do have this:

<script type="text/javascript">
    $(document).ready(function () {
        $('#myItemPrice').dataTable({
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": '../AjaxItemPriceProvider?id=@ViewBag.ID',
            "sPaginationType": "full_numbers",
            "aoColumns": [
                                { "sName": "ID",
                                    "bSearchable": false,
                                    "bSortable": false,
                                    "bVisible": true
                                },
                                { "sName": "PDSID",
                                    "bSearchable": false,
                                    "bSortable": false,
                                    "bVisible": false
                                },
                                { "sName": "PID" },
                                { "sName": "EffDate" },
                                { "sName": "ExpDate" },
                                { "sName": "G140" },
                                { "sName": "AccID" },
                                { "sName": "CCID" }

                            ]
        });
    });

    $(document).ready(function () {
        $('#myTierPrice').dataTable({
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": '../AjaxTierPriceProvider?id=@ViewBag.ID',
            "sPaginationType": "full_numbers",
            "aoColumns": [
                                { "sName": "ID",
                                    "bSearchable": false,
                                    "bSortable": false,
                                    "bVisible": false
                                },
                                { "sName": "IPFID",
                                    "bSearchable": false,
                                    "bSortable": false,
                                    "bVisible": false
                                },
                                { "sName": "Quantity" },
                                { "sName": "Amount" },
                                { "sName": "Maximum Discount Percentage" },
                                { "sName": "Maximum Discount Amount" },
                                { "sName": "Tax 1" },
                                { "sName": "Tax 2" },
                                { "sName": "Commission" }

                            ]
        }).makeEditable({
            sUpdateURL: "../TierPriceUpdate",
            sAddURL: "../TierPriceAdd",
            sDeleteURL: "../TierPriceDelete"
        });
    });
</script>
<div class="clear">
</div>
<div id="itemPrice">
<h2>Item Pricing List</h2>
    <table id="myItemPrice" class="display">
        <thead>
            <th>
                ID
            </th>
            <th>
                PDSID
            </th>
            <th>
                PID
            </th>
            <th>
                Effective Date
            </th>
            <th>
                Expiry Date
            </th>
            <th>
                G140
            </th>
            <th>
                AccID
            </th>
            <th>
                CCID
            </th>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
            <th>
                ID
            </th>
            <th>
                PDSID
            </th>
            <th>
                PID
            </th>
            <th>
                Effective Date
            </th>
            <th>
                Expiry Date
            </th>
            <th>
                G140
            </th>
            <th>
                AccID
            </th>
            <th>
                CCID
            </th>
        </tfoot>
    </table>
</div>
<div class="clear"></div><br />
    <div id="itemPrice">
    <h2>Item Tier Price List</h2>
    <table id="myTierPrice" class="display">
    <thead>
        <th>ID</th>
        <th>IPFID</th>
        <th>Quantity</th>
        <th>Amount</th>
        <th>Maximum Discount Percentage</th>
        <th>Maximum Discount Amount</th>
        <th>Tax 1</th>
        <th>Tax 2</th>
        <th>Commission</th>
    </thead>
    <tbody>
    </tbody>
    <tfoot>
        <th>ID</th>
        <th>IPFID</th>
        <th>Quantity</th>
        <th>Amount</th>
        <th>Maximum Discount Percentage</th>
        <th>Maximum Discount Amount</th>
        <th>Tax 1&开发者_运维问答lt;/th>
        <th>Tax 2</th>
        <th>Commission</th>
    </tfoot>
    </table>
    </div>
    <div>
    <button id="btnAddNewRow" value="Ok">
        Add New Tier Price</button>
    <button id="btnDeleteRow" value="cancel">
        Delete Tier Price</button>
    </div>
    <form id="formAddNewRow" action="#" title="New Tier Price Settings">
<input type="hidden" name="ID" id="ID" value="-1" rel="0" />
<label>
    Price ID</label><br />
<input type="text" name="IPFID" id="IPFID" rel="2" /><br />
<br />
<label>
    Quantity</label><br />
<input type="text" name="Qty" id="Qty" rel="2" /><br />
<br />
<label>
    Amount</label><br />
<input type="text" name="Amt" id="Amt" rel="3" /><br />
<font color="green">Leave empty to use default pricing</font><br />
<br />
<label>
    Maximum Discount Percent</label><br />
<input type="text" name="MaxDiscPct" id="MaxDiscPct" rel="4" /><br />
<br />
<label>
    Maximum Discount Amount</label><br />
<input type="text" name="MaxDiscAmt" id="MaxDiscAmt" rel="5" /><br />
<br />
<table style="border-style:none;">
<tr><td>
<label>
    Tax 1</label><br />
<input type="text" name="Tax1" id="Tax1" rel="6" style="width:90px;" /><br />
<br /></td>
<td>
<label>
    Tax 2</label><br />
<input type="text" name="Tax2" id="Tax2" rel="7"  style="width:90px;" /><br />
<br /></td>
</tr>
</table>
<label>
    Commission</label><br />
<input type="text" name="Comm" id="Comm" rel="7" /><br />
<br />
</form>

Any tips and guide will be much appreciated. Thank you.

I spent a few hours(!) to rewrite the code for you. You can download it here

Environments

• Windows 7, 64 bits
• Developed in Visual Studio 2010 SP1
• Using ASP.NET 4.0 MVC 3.0
• Tested with Internet Explorer 9.0 and Firefox 7.0.1

Infrastructure

I have the following link and scripts inside my block of _Layout.cshtml.

<head>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
</head>

I added 3 folders to the project:

1. \Models\ which contains TierPrice.cs
2. \Services\ which contains: FakeRepository1.cs and FakeRepository2.cs
3. \Scripts\DataTables which contains jquery.dataTables.js and its related files

I left other folders and files as they were in the new ASP.NET MVC 3 project.

Note: I commented out .makeEditable() method (jquery.dataTables.editable plugin), cuz I've never worked with it.

TierPrice class

A simple class to represent TierPrice.

public class TierPrice
{
    public int ID { get; set; }
    public int IPFID { get; set; }
    public int Qty { get; set; }
    public int Amt { get; set; }
    public int MaxDiscPct { get; set; }
    public int MaxDiscAmt { get; set; }
    public int Tax1 { get; set; }
    public int Tax2 { get; set; }
    public int Comm { get; set; }
}

Fake Repositories

Two different fake repositories just to mimic two different databases.

Home Controller

The only controller in the project. Nothing very special about it.

Index Method

public ActionResult Index()
{
    ViewBag.ID = 1; // ID of table?
    return View();
}

AjaxItemPriceProvider and AjaxTierPriceProvider are two JsonResult methods that provides data for two dataTables in the view.

    public JsonResult AjaxItemPriceProvider (int id)
    {
        /* =======================================
         Description of parameters

         * INPUT PARAMETERS:
         iDisplayLength: Number of rows in each page 
         iDisplayStart: The Number of the row that will be shown from it to iDisplayLength
         sSearch: Seach phrase
         iSortCol_0 (_n): Name of Sort field
         sSortDir_0 (_n): Direction of the sort

         * OUTPUT PARAMETERS:
         sEcho: Number of calling this method via dataTables-AJAX (1-base: in first call sEcho is 1)
         iTotalRecords: Number of total records
         iTotalDisplayRecords: 
         aaData: Return data in string array format
        * =======================================
        */

        string[][] ItemPriceRows = FakeRepository1.GetAllItemPrices(id);

        Dictionary<string, object> result = new Dictionary<string, object>();
        result.Add("sEcho", Request["sEcho"]);
        result.Add("iTotalRecords", ItemPriceRows.Length);
        result.Add("iTotalDisplayRecords", ItemPriceRows.Length);
        result.Add("aaData", ItemPriceRows);

        JsonResult json = Json(result, JsonRequestBehavior.AllowGet);
        return json;
    }

    public JsonResult AjaxTierPriceProvider (int id)
    {
        string[][] TierPriceRows = FakeRepository2.GetAllTierPrices(id);

        Dictionary<string, object> result = new Dictionary<string, object>();
        result.Add("sEcho", Request["sEcho"]);
        result.Add("iTotalRecords", TierPriceRows.Length);
        result.Add("iTotalDisplayRecords", TierPriceRows.Length);
        result.Add("aaData", TierPriceRows);

        JsonResult json = Json(result, JsonRequestBehavior.AllowGet);
        return json;
    }

Note: Id (which is ViewBag.ID) is passed to these methods and methods pass it to fake repositories. But in this sample the repositories actually do not care about them and just return fake data.

Finally a simple method to accept new row (TierPrice), of course via POST action:

    [HttpPost]
    public String AjaxAddNewTierPrice(TierPrice newTierPrice)
    {
        // TierPrice calss is defined in Models\TierPrice.cs
        string addReult = FakeRepository2.AddTierPrice(newTierPrice);
        return addReult;
    }

View

The view may look a little complicated, but it's not.

Pay attention to how I describe AJAX path for dataTables:

"sAjaxSource": '@Url.Action("AjaxItemPriceProvider", new { id = ViewBag.ID })',

Then in myItemPrice dataTable, the first column is defined like:

{ "sName": "ID",
  "fnRender": function (oObj) { return renderAddNewRowLink(oObj); },
  "aTargets": [0],
  ...
},

and the renderAddNewRowLink() is as simple as:

function renderAddNewRowLink(obj) {
    var hyperlink = "<a href='javascript:void(0)' ";
    hyperlink += "onclick='showFormAddNewRow("
    hyperlink += obj.aData[0];
    hyperlink += ")'>";
    hyperlink += obj.aData[0];
    hyperlink += "</a>";
    return hyperlink;
}

Note: oObj is the container Object of dataTable plugin. It should be passed to renderAddNewRowLink(), so the function can have access to obj.aData array which contains data from AJAX call.

OK. We're almost there. showFormAddNewRow() is also very simple and straight forward. Take a look:

function showFormAddNewRow(id) {
    $('#divAddNewRow').show();
    $('#divCoverBg').show();
    $('#formAddNewRow #ID').val(id);
}

Note: $('#formAddNewRow #ID').val(id) is the key of passing ID from myItemPrice table to formAddNewRow form.

If you're familiar with Ajax.BeginForm, the rest is clear, if not, this is a good example: Using Ajax.BeginForm with ASP.NET MVC 3 Razor

Note: The following function forces myTierPrice dataTable to refresh itself (by calling AjaxTierPriceProvider) each time after a new TierPrice is added.

function addNewTierPriceCompleted(obj) {
    TierPriceTable.fnDraw();
}

I've also added 2 styles in site.css. The process of adding a new row needs those styles.