0

in my partial view i have a foreach loop to show up a table

like this

 <table id="tableid">
    <thead>
<tr>
    <th>column1</th>
    <th>column2</th>
    <th>column3</th>
</tr>
    </thead>
    <tbody>
    foreach(mymodel item in ineumerable<mymodel>)
    {
    <tr onclick=getdetails(this)><td>@item.coloumn1value</td>
    <td>@item.coloumn2value</td>
    <td>@item.coloumn3value</td></tr>
    }

this is in a partial view inside a view which i am populating with ajax call

now in my .js - i have to get the a dom element with rows so that i can make the whole table a json result and send it controller action again to show up but

when doing doucment.all.tableid.rows[] - its rows are always 0 . so not able to get the row wise information and do some manupulation and send it to controller

1st qs - is there any way to get the rows of this table ??

doucment.all.tableid.innerHTML has the whole data like

'\n<thead> coulmn1 \r\n\r\n .......</tbody> with all data

and doucment.all.tableid.outerHTML has the whole data with tag

now how to make this to a dom element or how to make it a jsonobject or complex object so that i cn manupulate each row and send this whole table as a object to controller

when i click on any row , another partial view load in the bottom page with all three text boxes with each property of that single row and a button called save 

 @Html.TextBoxFor(m => m.coloumn1value)

 @Html.TextBoxFor(m => m.coloumn2value)

 @Html.TextBoxFor(m => m.coloumn3value)
 <input type="button" value="save" onclick="savechanges()">

here they can edit it and if they click on the button save it will immediately show up in the above table

Now in my parent view there are are two divs

table placeholder is getting populated by an ajax call like this 

var details = {
            _ID: ID,

        }
        $.ajax({
            url: "/MyController/GetTheTableForThisID",
            type: "POST",
            dataType: "html",
            data: details,
            success: function (data) {
                $('#tablePlaceHolder').html(data);

            }
        });

where ID i am getting from preious page and _ID is model property

  public PartialViewResult GetTheTableForThisID(MyModel model)
{

        //loading the values in Ienumerable of this class to ietrate

return PartialView("tablepartialviewname",model)   ;

 }

when clicking in each row i am loading one row as ajax call 

var details = {
 _rowID         
}
$.ajax({
    url: "/MyController/GetDetailsForOneRow",
    type: "POST",
    dataType: "html",
    data: details,
    success: function (data) {
        $('#editOneRowPlaceHolder').html(data);

    }
});

in my controller its hiting 

public partialViewresult GetDetailsForOneRow(MyModel model)
{

   model._rowID =//doing some manupulation and getting all the three values 

return PartialView("partialViewforOneRowDetails",model)

}
tripathy
  • 375
  • 2
  • 6
  • 23
  • `document.all` died a _long_ time ago. http://stackoverflow.com/questions/2408424/document-all-vs-document-getelementbyid . First switch to standard methods and check again if it works. Other than that, there's no such property as "rows" for a table element, unless it's been added by some plugin that you're using. Where did you get the idea for this from? Try reading the HTML documentation. You need to loop all the `` elements within it to get the rows, then read each `` to get the individual data items. This sounds like an X-Y problem though. Why do you need to postback a whole table? – ADyson Apr 24 '17 at 08:24
  • because the edited value i have to pass to action method to controller . on the edited values , i have to do another manupulation and show the table again . – tripathy Apr 24 '17 at 08:30
  • If it was me I would try recording the values directly from the input elements into a JSON object when they are changed (you can pre-create the object to mirror the table structure), and then post that object. You can handle "change", "keyup" events as appropriate on the form elements to process this. Much easier than trying to parse the table HTML. – ADyson Apr 24 '17 at 08:35
  • can you give the code example or anywhere it is applied – tripathy Apr 24 '17 at 08:58
  • At the moment, your HTML as per the example is invalid - you require `` within each `` to wrap round the content. And the content appears to be static, not editable. Please show how the rows are edited - do you dynamically populate it with form elements? Once that's clear, it might be possible to make an example. – ADyson Apr 24 '17 at 09:36
  • "when i click on any row , another partial view load in the bottom page with all three text boxes with each property of that single row and a button called save". Show this part as well, please. Read https://stackoverflow.com/help/mcve to understand how to create an example with all the necessary information. – ADyson Apr 24 '17 at 09:57
  • @ADyson hi i edited all . please check now sir – tripathy Apr 24 '17 at 10:13
  • where are you getting `_rowID` from? I would suggest that, rather than trying to update the whole table in one ajax call, you update the database with ajax every time `savechanges()` runs. Also, what is the code of `savechanges()` currently? – ADyson Apr 24 '17 at 10:34
  • For `/MyController/GetDetailsForOneRow` I would return JSON, not HTML - keep a static HTML form there, and just change the values in it, rather than replace the whole contents. That would be my approach - a data-based API rather than markup-based one. That would be a bigger re-write for you, but I think you would get more flexibility in the longer term. – ADyson Apr 24 '17 at 10:35

0 Answers0