_Layout styles not applied to Partial View rendered in a popup

Question

I am loading a partial view in the popup using following code:

<div id="Mydiv" title="Modify" class="ModifyRule" style="overflow: hidden" />
    <script type="text/javascript">
        $(document).ready(function () {
            //define config object
            var dialogOpts = {
                title: "Modify Rule",
                modal: true,
                autoOpen: false,
                height: 300,
                width: 700,
                open: function () {
                    //display correct dialog content
                    $("#Mydiv").load("Modify", { SelectedRow: $('#MyParam').val() });
                }
            };
            $("#Mydiv").dialog(dialogOpts);    //end dialog

            $('#Modify').click(
            function () {
                $("#Mydiv").dialog("open");
                return false;
            }
        );

        });


    </script>

Here is the code from partial view:

@Code

    Using (Html.BeginForm())
    @<div id="Master">
        <table>
                          <tr>
                <td>
                    @Html.LabelFor(Function(model) model.InputAuthorityGridDetail.TcmAccount)
                </td>
                <td>@Html.EditorFor(Function(model) model.InputAuthorityGridDetail.TcmAccount)
                </td>
                <td>
                    @Html.LabelFor(Function(model) model.InputAuthorityGridDetail.Amount)
                </td>
                <td>@Html.EditorFor(Function(model) model.InputAuthorityGridDetail.Amount)
                </td>
            </tr>
                          <tr align="right">
                <td>
                    <input name="button" type="submit" value="Save" class="btn" />
                </td>
            </tr>
        </table>
             </div>    
    End Using

End Code

the controller method modify returns a partial view named _Modify, the view is rendered correctly in the popup but I notice that the CSS styles are not applied to the controls in the partial view can someone help me?

Answer 1

When a partial is loaded into a layout page, the layout page contain the reference to the css that is used by the partial view.

However, from what I gather here (my javascript is not that great), you are loading the partial directly into a popup display and not using the layout page? If this is correct then your partial will not know about the css. And to correct this you would need to add a reference to the css at the top of the partial.

Answer 2

My partial views dont start with @Code and dont end with End Code. Try removing them and see if it works then.