0

I am trying to take data from a hidden element and post it to a database. the hidden element looks like this:

<input id="page-order" type="hidden" value="9,0|10,0|11,0|12,0|14,0|15,0|">

As you can see the data is displayed like this, it tracks the changes in an unordered list of items the first value in the pair separated by a comma is the MenuID the second value in the pair the ParentID.

Some Background information: This is part of a CMS website, I am currently adding a new page which allows the user to drag around unordered list items which represent pages in his website and change the order of the pages in the navigation menu, you also have the ability to nest a page within another by dragging it inside a border below a page.

Here is a picture to showcase:

enter image description here

From this picture you can tell that order test is nested within anchor page.

Ok so back to the main question. I need to save these changes which are recorded in the input hidden field to my database. I have some Pseudo code for the [HttpPost] below:

[HttpPost]
[Authorize(Roles = "Admin")]
public ActionResult Reorder(FormCollection col)
{
    //col["SiteId"]
    //col["page-order"]

    //Reorder
    var pageOrders = "1,0|2,0|3,2|4,2|5,0";
    var pages = pageOrders.Split('|');
    var allPages = PageDataService.LoadPagesForSite(1); //TODO unhardcode site
    for (int i = 1; i <= pages.Length; i++)//1 to 5
    {
        var menuID = int.Parse(pages[i - 1].Split(',')[0]);
        int? parentMenuID = int.Parse(pages[i - 1].Split(',')[1]) == 0 ? (int?)null : int.Parse(pages[i - 1].Split(',')[1]);

        var page = allPages.FirstOrDefault(p => p.MenuID == menuID);
        if (page != null)
        {
            //Setting the parentID and Ordinal  and save to database
        }


    }


}

The recording of the data in the input hidden field happens on the click of the save button. Here is the code for that:

$("#SaveOrderPage").on("click", function () {
    var pageOrders = '';
    $('.list-group-item').each(function () {
        pageOrders += $(this).data('menuid');
        if ($(this).parent().parent().hasClass('list-group-item')) {
            pageOrders += ',';
            pageOrders += $(this).parent().parent().data('menuid');

        } else {
            pageOrders += ',0';
        }
        pageOrders += "|";
    });

    $('#page-order').val(pageOrders);
});

Any help is greatly appreciated

0 Answers0