DataTable Editor - With ASP.Net MVC
DataTable Editor - With ASP.Net MVC
Ali 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
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
and .cshtml
only ajax url changed
hope it will help someone