Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →

I am working on the following :-

  • asp.net mvc5 web application.
  • dataTable jQuery plugins version 1.10.4

but i have noted that i can not benefit from these asp.net mvc features , if i use the dataTable plugin:-

  • I can not use html helpers.

  • The data annotation applied will have no effect.

For example I have the following Script to implement the dataTable plugin:-

<script type="text/javascript">
        $(document).ready(function () {

            $('#myDataTable').dataTable({
                "serverSide": true,
                "ajax": "Home/AjaxHandler",
                "processing": true,
                "columns": [
                            { "data": "FName" },
                            { "data": "LName" },
                            { "data": "BDate" }
                ]
            });
        });
    </script>

And the following action method:-

 public ActionResult AjaxHandler(jQueryDataTableParamModel param)
            {
                var allCompanies = t.Emps;

                var result = allCompanies.Select(c=> new {c.FName, c.LName, c.BDate});
                           //  select new[] {  };

                return Json(new
                {
                    sEcho = param.sEcho,
                    iTotalRecords = allCompanies.Count(),
                    iTotalDisplayRecords = allCompanies.Count(),
                    aaData = result
                },
                                JsonRequestBehavior.AllowGet);
            }

And the following view:-

@{
    ViewBag.Title = "Home Page";
}





<table id="myDataTable" class="display">
    <thead>
        <tr>
            <th>FName</th>
            <th>LName</th>
            <th>BDate</th>

        </tr>
    </thead>
    <tbody></tbody>
</table> 

And the following model:-

namespace testplugins.Models
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;

    public partial class Emp
    {
        public int EmpID { get; set; }
       [Display(Name = "First Name")]
        public string FName { get; set; }
        [Display(Name = "Last Name")]
        public string LName { get; set; }
        public Nullable<int> DeptID { get; set; }
        [DataType(DataType.Date)]
        public Nullable<System.DateTime> BDate { get; set; }

        public virtual Dept Dept { get; set; }
    }
}

Now for example I can not use Html.DisplayNameFor(a=>a.FName) and get the name as defined inside the data annotation. and instead of that i need to manually write the html table headers labels.

Also for the Bdate the value inside the dataTable will be displayed as “/Date(315536524000)/” so I even can not benefit from DataType.Date data annotation, also if I am going to edit the records using the dataTable plugin then data annotation such as Required, stringlenght will also have no effect.

So can anyone advice on this please? and can i modify the dataTable plugin to be more asp.net mvc oriented ? or i am doing things wrongly in my above code ?

share|improve this question
    
you can follow the approach shown here – Aminul Jan 5 '15 at 16:51
    
@Aminul i already read this link and it basically caused me to write this question, after i test it. because as you see from the example there is no way to use html helpers or benefit from the data annotations... – john G Jan 5 '15 at 17:45

Here's one way you could accomplish this...

This is just creating a little template string, putting it into a JS variable, and using the render function to output that string with the data inside the value attribute.

Razor:

@model testplugins.Models.Emp


<table id="myDataTable" class="display">
    <thead>
        <tr>
            <th>FName</th>
            <th>LName</th>
            <th>BDate</th>

        </tr>
    </thead>
    <tbody></tbody>
</table> 

<script type="text/javascript">
    var fnameTextBox = '@Html.TextBoxFor(m => m.FName)';
</script>

JS

<script type="text/javascript">
    $(document).ready(function () {

        $('#myDataTable').dataTable({
            "serverSide": true,
            "ajax": "Home/AjaxHandler",
            "processing": true,
            "columns": [
                    { "data": "FName" },
                    { "data": "LName" },
                    { "data": "BDate" }
            ],
            "render": function( data, type, row, meta ){
                 return fnameTextBox.replace('value=""', 'value="' + data + '"');
            }
         });
    });
</script>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.