datatable.select in cshtml with javascript parameter

Question

my model code

public class viewCase
{
  public List<string> lstCategory   { get; set; }
  public DataTable dtWrkTsk { get; set; }
}

my controller code

string query = "SELECT WorkFlowID,Subject,Category FROM CMSTasksWorkFlow" 

objcase.dtWrkTsk   = objdataclas.ExecuteDataTable(query);

return View("../ViewCases/CasesScreen",objcase);

my cshtml code

 function getCaption() {

var cat=    $("#layout option:selected").text();  //variable for select condition

var arr =  @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(
Model.dtWrkTsk.Select("Catagory='" + cat + "'") ));  //<- error here
}

its giving me error 'cat ' does not exist in current context

and if i try

function getCaption() {

      var cat=    $("#layout option:selected").text();  //variable for select condition
     var arr =  @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(
       Model.dtWrkTsk.Select("Catagory='" +@<text> cat </text> + "'") ));}  //<- error here

CS1660: Cannot convert lambda expression to type 'string' because it is not a delegate type

<div id="addTask" class="modal fade " aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content round">
                <div class="modal-header"><h4>New Task </h4></div>
                <div id="tbody" class="modal-body" style="height:20%">
                    @Html.DropDownList("layout", Model.lstCategory.Select(m => new SelectListItem { Text = m, Value = m }), "All", new { onclick = "getCaption()" })
                    <div id="dtask" style="width: 80%; overflow: scroll; ">

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn btn-primary"  >OK</button>
                    <button type="button" data-dismiss="modal" class="btn">Cancel</button>
                </div>
            </div>
        </div>
    </div>

i am trying to keep datatable disconnected from server so whenever user changes value in Html.DropDownList function getCaption() is called

i only need select condition in datatable where i select category with javascript varible passing

how do i pass my javascript variable in datatable.select

are you using you JS code inside `$(document).ready()`? also provide more details about your code. — Elmer Dantas, Mar 01 '17 at 14:07
your question is not clear and you don't answer my question but, if I undestood what you want, just check [this](http://stackoverflow.com/questions/12683537/mvc-dropdownlist-onchange) or [this](http://stackoverflow.com/questions/25056508/onchange-event-for-html-dropdownlist) and choose what fits best for you — Elmer Dantas, Mar 01 '17 at 14:42
what i am trying to do here is i have one datatable and dropdownlist when user changes value in dropdown i need to filter data from my datatable using datatable.select("category='" + javascriptvar + "'") but issue here is this datatable.select is in my cshtml file and its giving me error since datatable is from model and yes getCaption is my javascript function — Dandy, Mar 01 '17 at 14:50
why are you trying to filter a DataTable in client-side? Sorry for doesn't make any sense for me doing what you want to do. — Elmer Dantas, Mar 01 '17 at 14:59

score 0 · Accepted Answer · answered Mar 01 '17 at 22:48

0

The @Html.Raw() in var arr = @Html.Raw(...) is razor code which is parsed on the server before its sent to the view. It includes a .Select() query that uses a javascript variable which does not exist at that point - its not in scope.

You need to assign the collection to a javascript variable, and the filter the resulting array in javascript based on the selected option.

The following assumes dtWrkTsk is a collection of a model containing a property string Category, and you want to filer the collection to return only objects whose Category value matches the selected option

@Html.DropDownList("layout", Model.lstCategory.Select(m => new SelectListItem { Text = m, Value = m }), "All")

or

@Html.DropDownList("layout", new SelectList(Model.lstCategory), "All")

<script>
    // Assign the collection to a javascript array
    var arr = @Html.Raw(Json.Encode(Model.dtWrkTsk))
    $('#layout').change(function() {
        var selectedCategory = $(this).val();
        // Return all objects in the collection that match
        var result = $(arr).filter(function(index, item) {
            return item.Category === selectedCategory;
        });
        .... // do something with the results
    });
</script>

Additional suggest reading - Unobtrusive JavaScript

answered Mar 01 '17 at 22:48

var arr = @Html.Raw(Json.Encode(Model.dtWrkTsk)) gives me serialization error – Dandy Mar 02 '17 at 08:20
What is the error? And I assume its a circular reference in which case you need to change your view model. – Mar 02 '17 at 08:23
yes circular reference error what do i change in my view model – Dandy Mar 02 '17 at 09:03
Easy enough to fix. But you need to edit your question and show the main model and the model for `dtWrkTsk` and indicate which of the properties of `dtWrkTsk` you want to be able to access in the view. – Mar 02 '17 at 09:07
Serializing a `DataTable` is always an issue. Create a view model, say `CMSTasksWorkFlowVM` containing the 3 properties (`WorkFlowID`, `Subject`, `Category`) and project your `DataTable` into a collection of that view model, so that the property in the main model becomes `public IEnumerable dtWrkTsk { get; set; }` – Mar 02 '17 at 09:17
yeah i understand the logic but not able to do this " project your DataTable into a collection of that view model, so that the property in the main model becomes public IEnumerable dtWrkTsk { get; set; }" ------------------ i have created CMSTasksWorkFlowVM containing the 3 properties (WorkFlowID, Subject, Category) – Dandy Mar 02 '17 at 09:44
Bit busy at the moment. Give me 45 min or so – Mar 02 '17 at 09:46
no issues, take your time, but please let me know solution once you are free – Dandy Mar 02 '17 at 09:47
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/137045/discussion-between-stephen-muecke-and-dandy). – Mar 02 '17 at 10:26

datatable.select in cshtml with javascript parameter

1 Answers1