Managing Row Data Within a Popup (cruds.cstml from cruds.csthml)

Sep 12, 2011 at 7:07 PM

Given a basic example of Sales Order Headers with Sales Order Detail:

I have a rows of Sales Order Headers (1 - n) presented using cruds.cshtml. From there, I have created a PopupActionLink ("details") which displays rows (1 - n) of related Sales Order Details.

What I would like to do is to delete rows (various Sales Order Detail rows) from within the Popup and have those rows fade from that grid. I have all of the controller functionality working to display and delete rows, yet I'm unable to update the UI to reflect those changes.

The success function within regForm is called yet $('#o' + d.Id) returns a null object. d is being passed and is populated with the correct value, yet the javascript is unable to find the object. Perhaps the popup is not registering the rows within the DOM or there is a naming conflict with table 'list'?

Ideally what I'm attempting to do is have a cruds.cshtml form (minus navigation/footer) popped up from the primary cruds.html.




Sep 13, 2011 at 12:21 PM
Edited Sep 13, 2011 at 12:21 PM

do a cruds inside an ascx

put the ascx in a aspx using renderpartial, check that everything works

after use the ascx with the html.MakePopup() not MakePopupForm()

Sep 13, 2011 at 9:02 PM

I created a crud_control.ascx (using cruds.cshtml as a guideline and making modifications as necessary) and placed it within a cruds2.aspx page. I tested the controller directly with the controller returning View("cruds2", detailData). All worked as expected.

I changed the controller so that I am returning View("cruds_control", data) along with the following cshtml changes


@(Html.MakePopup<OrderDetailController>(a => a.SearchDetail(null), "Detail", fullScreen: true))

Views/Order/Rows.cshtml contains the following for each row

Html.PopupActionLink<OrderController>(a => a.SearchDetail(o.OrderId), "Detail"))
the detail screen appears yet rows aren't being populated. It doesn't appear that the JS that populates the rows is firing.

I'm sure I'm missing something simple. Additional guidance is appreciated.

Sep 14, 2011 at 7:38 AM

use alerts, lots of them

and use firebug to see if there are any errors 

Sep 14, 2011 at 1:13 PM

o - Thanks for the guidance. Alerts did the trick.

Essentially, it's a conflict in id naming: id="list" on the main page and id="list" on the popup. To work around this, I decided to generate unique names for the items (see below). Once I did that everything worked great.

I did still keep the page in a control since I didn't want the full site (cruds.cshtml) in a popup.

Thanks again.


    var sform = "o" + Guid.NewGuid().ToString().Replace("-",string.Empty);     var list = "o" + Guid.NewGuid().ToString().Replace("-"string.Empty);     var more = "o" + Guid.NewGuid().ToString().Replace("-"string.Empty);
    function addStart(d) { $(d).css('opacity', 0).prependTo("#@list").animate({ opacity: 1 }, 600, 'easeInCubic'); }
    function addEnd(d) { $(d).css('opacity', 0).appendTo("#@list").animate({ opacity: 1 }, 300, 'easeInCubic'); }
function @(more)() {
        $.post('@Url.Action("search")'lfm + '&page=' + pagefunction (d) {
            if (d.more$('#@more').show(); else $('#@more').fadeOut('slow');            
            pagesize = $('#@list tr').length;
<form id="@sform" action="@Url.Action("search")" method="post">
Sep 14, 2011 at 2:46 PM

good, still a simple prefix would have been enough (Guids  as html ids are scary)