DataTable Editor - With ASP.Net MVC

DataTable Editor - With ASP.Net MVC

Ali AdnanAli Adnan Posts: 47Questions: 18Answers: 1

Dear all,
I am trying to use DataTable Editor (Paid version- Trial) in ASP.Net MVC web application,
I am getting raw Json response instead of view, can you please help me

My Controller Code is

``` [AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]
public ActionResult CDB_SERVER()
{
var formData = HttpContext.Request.Form;
string Result = string.Empty;
DataHelper dal = new DataHelper();
OraConn Connection = new OraConn();

        string strDbType = "oracle";
        string strDbConnection = Connection.ConnectionString("PROJECTS");

        using (var db = new Database(strDbType, strDbConnection))
        {
            var response = new Editor(db, "cdb_contractors", "cont_id")
                     .Model<ContractorModel>()
                     .Field(new Field("cdb_contractors.cont_id")
                         .Set(false)
                         .Validator(Validation.NotEmpty())
                         .Validator(Validation.Numeric())
                     )
                     .Process(formData)
                     .Data();

return Json(response, JsonRequestBehavior.AllowGet);

        }
    }``` 

and .cshtml

@{
    ViewBag.Title = "Tender & Contract - Contractor Database - Server Side";
}
<div id="content">
    <!-- widget grid -->
    <section id="widget-grid" class="">
REMOVE HTML MARKUP for VISIBILITY

                            <div class="demo-html"></div>
                            <table id="example" class="display" cellspacing="0" width="100%">
                                <thead>
                                    <tr>
                                        <th>Contractor ID</th>
                                        <th>Contractor Code</th>
                                        <th>Contractor Name</th>
                                        <th>Contractor Name Arabic</th>
                                        <th>Contractor Grade</th>
                                        <!--<th>Commercial Reg Info</th>
                <th>Tender Board Reg Info</th>
                <th>Chamber of Commerce Reg Info</th>
                <th>DCRP Reg Info</th>-->
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr>
                                        <th>Contractor ID</th>
                                        <th>Contractor Code</th>
                                        <th>Contractor Name</th>
                                        <th>Contractor Name Arabic</th>
                                        <th>Contractor Grade</th>
                                        <!--<th>Commercial Reg Info</th>
                <th>Tender Board Reg Info</th>
                <th>Chamber of Commerce Reg Info</th>
                <th>DCRP Reg Info</th>-->
                                    </tr>
                                </tfoot>
                            </table>

    </section>
</div>
@section pagespecific {
    <script type="text/javascript" language="javascript" class="init">
        var editor; // use a global for the submit and return data rendering in the examples
        $(document).ready(function () {
            var editor = new $.fn.dataTable.Editor({
                ajax: "/TENDERCONTRACT",
                table: "#example",
                fields: [{
                    label: "Contractor Id:",
                    name: "cdb_contractors.cont_id"
                }, {
                    label: "Contractor Code:",
                    name: "cdb_contractors.cont_code"
                }, {
                    label: "Contractor Name English:",
                    name: "cdb_contractors.cont_desc"
                }, {
                    label: "Contractor Name Arabic:",
                    name: "cdb_contractors.cont_desc_ar"
                }, {
                    label: "Contractor Grade:",
                    name: "cdb_contractors.g_id",
                    type: "select",
                    placeholder: "Select a Grade"
                }, {
                    label: "Contractor Email:",
                    name: "cdb_contractors.cont_email"
                }, {
                    label: "Contractor Status:",
                    name: "cdb_contractors.is_active"
                }, {
                    label: "Contractor Website:",
                    name: "cdb_contractors.website"
                }, {
                    label: "PO Box:",
                    name: "cdb_contractors.pobox"
                }, {
                    label: "Postal Code:",
                    name: "cdb_contractors.postal_code",
                    type: "select",
                    placeholder: "Select a Postal Code"
                },
                {
                    label: "Commercial Registration #:",
                    name: "cdb_contractors.cr_num"
                }, {
                    label: "CR Expiry Date:",
                    name: "cdb_contractors.cr_exp_date",
                    "type": "datetime",
                    "format": "DD\/MM\/YY"
                }, {
                    label: "Tender Board Registration #:",
                    name: "cdb_contractors.tb_reg_num"
                }, {
                    label: "TBR Expiry Date:",
                    name: "cdb_contractors.tb_exp_date",
                    "type": "datetime",
                    "format": "DD\/MM\/YY"
                }, {
                    label: "Chamber of Commerce Reg#:",
                    name: "cdb_contractors.coc_cert_no"
                },
                {
                    label: "DCRP Registration #:",
                    name: "cdb_contractors.dcrp_reg_num"
                }, {
                    label: "DCRP Expiry Date:",
                    name: "cdb_contractors.dcrp_exp_date",
                    "type": "datetime",
                    "format": "DD\/MM\/YY"
                }, {
                    label: "Created By:",
                    name: "cdb_contractors.crt_by"
                }, {
                    label: "Created Date:",
                    name: "cdb_contractors.crt_dtm"
                    ,
                    "type": "datetime",
                    "format": "DD\/MM\/YY HH:mm"
                }, {
                    label: "Modified By:",
                    name: "cdb_contractors.edt_by"
                }, {
                    label: "Modified Date:",
                    name: "cdb_contractors.edt_dtm"
                    ,
                    "type": "datetime",
                    "format": "DD\/MM\/YY HH:mm"
                }, {
                    "label": "Category:",
                    "name": "cdb_category[].cat_id",
                    "type": "checkbox"
                }
                ]
            });

            $('#example').DataTable({
                dom: "Bfrtip",
                ajax: {
                    url: '/TENDERCONTRACT',
                    type: 'POST'
                },
                columns: [
                    { data: "cdb_contractors.cont_id" },
                    { data: "cdb_contractors.cont_code" },
                    { data: "cdb_contractors.cont_desc" },
                    { data: "cdb_contractors.cont_desc_ar" },
                    { data: "cdb_contractor_grade.g_desc" }
                ],
                select: true,
                buttons: [
                    { extend: "create", editor: editor },
                    { extend: "edit", editor: editor },
                    { extend: "remove", editor: editor }
                ]
            });
        });
</script>
}

I am getting only Json response like

{"draw":null,"data":[{"DT_RowId":"row_144","cdb_contractors":{"cont_id":"144","cont_email":null,"website":"www.sevenseasinfotech.com","pobox":"2648","g_id":null,"postal_code":"112","cr_exp_date":"08/08/16","tb_exp_date":"10/06/17","dcrp_exp_date":null,"crt_dtm":"02/10/15 18:59","edt_dtm":"04/04/16 12:02","cont_code":null,"supp_id":null,"cont_desc":"SEVEN SEAS INFOTECH","cont_desc_ar":"البحار السبع لتقنية المعلومات ش م م","is_active":"Y","cr_num":"1117659","tb_reg_num":"00002047","coc_cert_no":"14342","dcrp_reg_num":null,"crt_by":"MZS0680","edt_by":"MZS0680"},"cdb_postcode":{"area_ename":"Ruwi"},"cdb_contractor_grade":{"g_desc":null},"cdb_category":[{"cat_id":"1","crt_by":"MZS0680","crt_dtm":"01/10/2015 4:15:54 PM","category_desc":"ARCHIVE","edt_by":null,"edt_dtm":null},{"cat_id":"22","crt_by":"MZS0680","crt_dtm":"01/10/2015 4:15:54 PM","category_desc":"OTHERS","edt_by":null,"edt_dtm":null}]},

data continue
data continue
data continue

Answers

  • Ali AdnanAli Adnan Posts: 47Questions: 18Answers: 1

    I solved this by a workaround I am not sure is this a right way but its solved my problme

    in MVC controller I am simply return (view), then in view "doument ready" function I call web api to return data and feed html.

    from the above code I change only

     [AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]
    public ActionResult CDB_SERVER()
    {
        return View();
    }
    }
    

    and .cshtml

                  var editor = new $.fn.dataTable.Editor({
                        ajax: "/api/TENDERCONTRACT/Contractors",
                        table: "#dt_contractors",
                        fields: [{
    
                   var table = $('#dt_contractors').DataTable({
                        ajax: {
                            url: "/api/TENDERCONTRACT/Contractors",
                            type: 'POST'
                        },
    

    only ajax url changed

    hope it will help someone

This discussion has been closed.