This project is read-only.

Regarding Popup to Edit and Add records

Jul 10, 2013 at 1:24 PM
Edited Jul 10, 2013 at 1:25 PM
Hi Bukharin,

I am displaying records very well with the your Grid. But When I click on the Edit record I would like to edit in a modal popup. Can you kindly advise me, how I can go about it please.

This is the way my .cshtml which renders the grid and edit link for each row.
@model IEnumerable<DataAccess.Models.CustomerViewModel>
 
@using GridMvc.Html
@{
    ViewBag.Title = "Customers List";
}
@Html.Grid(Model).Columns(columns =>
                        {

                            columns.Add(m => m.CustomerName).Titled(" Name ").Sortable(true).SortInitialDirection(GridMvc.Sorting.GridSortDirection.Ascending).Filterable(true);
                            columns.Add(m => m.Address).Titled("Address").Sortable(true).Filterable(true);
                            columns.Add(m => m.ContactName).Titled("Contact Name").Sortable(true).Filters.ToString();
                            columns.Add(m => m.Email).Titled("Email Address").Sortable(true).Filterable(true);
                            columns.Add(m => m.ReferenceNumber).Titled("Reference Number").Sortable(true).Filterable(true);
                            columns.Add(m => m.ModifiedOn).Titled("Modified On").Filterable(true).Sortable(true);
                            columns.Add(m => m.CustomerId)
                               .Titled("Edit")
                               .Sanitized(false)
                               .Encoded(false)
                               .RenderValueAs(o => Html.ActionLink("Edit", "EditCustomer", "Customer", new { CustomerId = o.CustomerId }, new { title = "Please click here to edit the record", @class="Test" }).ToHtmlString());
                        }).WithPaging(4)
<br />
<br />
@Html.ActionLink("Click to Add Customer", "AddCustomer", "Customer", null)
And at the bottom there is add customer Link. When I click them, it should me popup window to add records.

Please advise me, what changes I need to make?

Thank you
Jul 10, 2013 at 4:45 PM
Hi, it depends which modal component you want to use.
For example you can use twitter bootstrap modal component - http://twitter.github.io/bootstrap/javascript.html#modals
  1. Reference bootstrap.min.js script and styles on your page
  2. Create modal layout on the page:
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>Loading…</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>
<script>
    //this script reset modal each time when you click on the link:
    $(function () {
        $(".modal-link").click(function (event) {
            event.preventDefault();
            $('#myModal').removeData("modal");
            $('#myModal').modal({ remote: $(this).attr("href") });
        });
    })
</script>
And renderan edit link in the grid:
.RenderValueAs(d =>
                    @<b>
                        @Html.ActionLink("Edit", "Index", new { id = d.Id }, new { @class = "modal-link" })
                    </b>)
Ensure that your Edit and Create controoller methods returns PartialViewResult without any common layout, because this methods need to return layout for displaying in the modal.
Jul 10, 2013 at 7:05 PM
Hello Bukharin,

Many thanks for the Suggestion. I have taken your approach and my functionality for editing is half achieved. When I click on the Edit Link, Twitter Kind of popup comes up smoothly. It saves well, when there are no validation errors. But if there are any validation errors, it redirects me to a plain Customer Edit New Link with errors being rendered there. How can I display my validations errors in the popup dialog?


This is my Grid where I display all records CustomerList.cshtml.
@model IEnumerable<DataAccess.Models.CustomerViewModel>
<link href="@Url.Content("~/Content/Gridmvc.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/gridmvc.min.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/js/bootstrap.min.js")" type="text/javascript"> </script>
<link href="@Url.Content("~/Content/bootstrap/css/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/bootstrap/css/bootstrap-responsive.min.css")" rel="stylesheet" type="text/css" />
@using GridMvc.Html
@{
    ViewBag.Title = "Customers List";
}
@Html.Grid(Model).Columns(columns =>
                        {

                            columns.Add(m => m.CustomerName).Titled(" Name ").Sortable(true).SortInitialDirection(GridMvc.Sorting.GridSortDirection.Ascending).Filterable(true);
                            columns.Add(m => m.Address1).Titled("Address1").Sortable(true).Filterable(true);
                            columns.Add(m => m.ContactName).Titled("Contact Name").Sortable(true).Filters.ToString();
                            columns.Add(m => m.Email).Titled("Email Address").Sortable(true).Filterable(true);
                            columns.Add(m => m.ReferenceNumber).Titled("Reference Number").Sortable(true).Filterable(true);
                            columns.Add(m => m.ModifiedOn).Titled("Modified On").Filterable(true).Sortable(true);
                            columns.Add(m => m.CustomerId)
                               .Titled("Edit")
                               .Sanitized(false)
                               .Encoded(false)
                               //.RenderValueAs(o => Html.ActionLink("Edit", "EditCustomer", "Customer", new { CustomerId = o.CustomerId }, new { title = "Please click here to edit the record", @class = "modal-link" }).ToHtmlString());
                            .RenderValueAs(d => Html.ActionLink("Edit", "EditCustomer", "Customer", new { CustomerId = d.CustomerId }, new { @class = "modal-link" }));
                    
                        }).WithPaging(4)
<br />
<br />

@Html.ActionLink("Click to Add Customer", "AddCustomer", "Customer", new { @class = "modal-link" })

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Edit Customer</h3>
    </div>
    <div class="modal-body">
        <p>Loading…</p>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>     
    </div>
</div>
<script type="text/javascript">
    //this script reset modal each time when you click on the link:
    $(function () {
        $(".modal-link").click(function (event) {
            event.preventDefault();
            $('#myModal').removeData("modal");
            $('#myModal').modal({ remote: $(this).attr("href") });
        });
    })
</script>
Controller for CustomerList
  /// <summary>
        /// Brings List Of Customers
        /// </summary>
        /// <returns></returns>
        [HttpGet]
        public ActionResult CustomerList()
        {
            CustomerListViewModel custList = new CustomerListViewModel();
            List<CustomerViewModel> custVMList = new List<CustomerViewModel>();
            custVMList = custRepository.GetCustomers();
            custList.customers = custVMList;
            return View(custList);
        }
Controller for Editing Customer
 /// <summary>
        /// Brings a Specific Customer
        /// </summary>
        /// <param name="CustomerId"></param>
        /// <returns></returns>
        [HttpGet]
        public ActionResult EditCustomer(Guid CustomerId)
        {
            CustomerViewModel cusVM = custRepository.GetCustomer(CustomerId);
            return View(cusVM);

        }

        /// <summary>
        /// Editing Customer
        /// </summary>
        /// <param name="cusVM"></param>
        /// <returns></returns>
        [HttpPost]
        public ActionResult EditCustomer(CustomerViewModel cusVM)
        {
            if (ModelState.IsValid)
            {
                custRepository.EditCustomer(cusVM);
                return RedirectToAction("Demo", "Customer");
            }
            else
            {
                return PartialView(cusVM);
            }
        }

        /// <summary>
        /// Customer Edit Confirmation Screen 
        /// </summary>
        /// <param name="CustomerId"></param>
        /// <returns></returns>
        public ActionResult EditConfirmation(Guid CustomerId)
        {
            ViewBag.CustomerId = CustomerId;
            return View();
        }
This is EditCustomer.cshtml
@model DataAccess.Models.CustomerViewModel
@{
    Layout = null;
}
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>       
        <div class="editor-label">
            @Html.LabelFor(model => model.CustomerName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.CustomerName)
            @Html.ValidationMessageFor(model => model.CustomerName)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Address1)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Address1)
            @Html.ValidationMessageFor(model => model.Address1)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.ContactName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ContactName)
            @Html.ValidationMessageFor(model => model.ContactName)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div>
        <div>
            @Html.HiddenFor(model => model.CustomerId)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.ReferenceNumber)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ReferenceNumber)
            @Html.ValidationMessageFor(model => model.ReferenceNumber)
        </div>
        <p>
            <input type="submit" value="Save" class="btn btn-primary" />
        </p>
    </fieldset>
}
My problem is when the validation fails, the errors should display in the same popup dialog. Please advise.
Jul 11, 2013 at 3:42 AM
The base way in this case to create client and server side validation - post you dialog data to the server via ajax.
But simplest way - is enable client validation only: try to reference jquery validation scripts to you layout page (CustomerList.cshtml):
<script src="@Url.Content("~/scripts/jquery.validate.min.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"> </script>
Jul 11, 2013 at 1:51 PM
Thanks Bukharin. The Server Side validations are triggering. The problem is when the validation failure's occurring, the page is redirecting to EditCustomer page with validation errors. I want to display the validation errors in the same popup dialog. I can put screen shots of what happening. But how do I upload those images to this question.

I have almost completed this question. I can save it nicely when no validation errors happens and popup goes out smoothly. __But only left with validation failure .
problems not reflecting the errors in the same Popup.__


Please let me know, how I can show you the screen shots of my errors. I just need to finish the last bit, that's it Grid.MVC is complete with add, edit with Popup dialog.

Thank you
Jul 11, 2013 at 4:20 PM
Yes, I mean this problem in my previous post.

In your case I recommend you to look toward ASP.NET WebApi technology to create REST Api interface for creating and editing your customers. This method required from you some javascript code.

In MVC you can done this with ApiController.

When user press submit button - you need to serialize your form data and send it, using ajax, to the server (for example POST /api/customers/{id}).

Server recieve this data in api controller Post method nad validate it. If server side validation fails - controller return 400 Http code (bad request) with collection of errors. You can read more about it on StackOverflow thread

On the client side you can parse server response and display error messages or in success case - refresh page.
Aug 13, 2013 at 6:27 PM
Hi,
I tried to do the same thing right now. But I am getting Uncaught TypeError: Object [object Object] has no method 'modal' error. Everything looks same. I included the bootstrap.min.js.

Do you have any suggestion?

Thanks.
Aug 14, 2013 at 5:06 AM
Hi,

It's difficult to say what happens on your page. You need to use browser developer tools like web inspector, firebug etc. to debug client side.
Ensure that bootstrap.min.js reference before modal method invocation.
Nov 29, 2013 at 1:19 PM
The example in the GridMVC project the model window is not working for me. Then i try model on my pc for an Index page but still not able to get it working.

here is the code which it generates. any idea on why i am getting this wrong. please help.
<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Test Application 6</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/bootstrap-responsive.css" rel="stylesheet"/>
<link href="/Content/font-awesome.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>

    <script src="/Scripts/modernizr-2.6.2.js"></script>


    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="/Content/IE9FixScripts"></script>

    <![endif]-->
    <script src="/Scripts/jquery-2.0.3.js"></script>

</head>
<body>
    <div id="wrap">
        <div class="container">
            <!-- Navbar
      ================================================== -->
            <div class="navbar navbar-default navbar-fixed-top">
                <!--<div class="logosmall pull-left"></div> -->
                <div class="container">

                    <div class="navbar-header">

                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>

                        <a class="navbar-brand" href="/"><i class="fa fa-home fa-lg"></i></a>

                    </div>
                    <div class="navbar-collapse collapse navbar-responsive-collapse">
                        <ul class="nav navbar-nav">
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-cog fa-lg"></i> Admin<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="/User"><i class="fa fa-user"></i> Users</a></li>
                                    <li><a href="/Role"><i class="fa fa-group"></i> Roles</a></li>
                                </ul>
                            </li>
                        </ul>

                        <ul class="nav navbar-nav navbar-right">
                            <li class="navbar-text">Paracetemol\Adamstritator</li>
                        </ul>
                    </div>
                    <!-- /.nav-collapse -->
                </div>
                <!-- /.container -->
            </div>
            <!-- /.navbar -->

            <!-- Main content  any sections which need to be filld in and then body -->
            <div class="container">

                    <div>
                        
   
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>Loading…</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>

                    </div>
                
 <p class="pull-right">
    <a class="btn btn-default btn-sm modal-link" title="" href="/User/Create" 
        data-original-title="Create New User" data-toggle="modal" 
        data-target="#myModal"
        data-placement="left">Create <i class="fa fa-user fa-lg"></i>
    </a>
</p>
<script>
        $(function () {
            $(".modal-link").click(function (event) {
                event.preventDefault();
                $('#myModal').removeData("modal");
                $('#myModal').modal({ remote: $(this).attr("href") });
            });
        })
    </script>

     

            </div>

        </div>
    </div>


    <script type="text/javascript">
        $(document).ready(function () {
            $('[data-toggle="tooltip"]').tooltip();
            $('[data-toggle="popover"]').popover();

        });

        $(document).ready(function () {
            var url = window.location.pathname;
            var substr = url.split('/');
            var urlaspx = substr[substr.length - 1];
            $('.nav').find('.active').removeClass('active');
            $('.nav li a').each(function () {
                if (this.href.indexOf(urlaspx) >= 0) {
                    $(this).parent().addClass('active');
                }
            });
        });
    </script>

    <script src="/Scripts/jquery.validate.js"></script>
        <script src="/Scripts/jquery.validate.unobtrusive.js"></script>
    <script src="/Scripts/bootstrap.js"></script>

    
</body>
</html>
Dec 3, 2013 at 2:54 AM
Hi, bhushanvinay

It seem all right. But the best way understand what really happens - use client debugging, using browser developer tools (F12). Try to debug you scripts, see console for script errors etc.
Jul 10, 2014 at 7:55 PM
Edited Jul 10, 2014 at 8:29 PM
I have the same problem as that of bhushahvinay,

The example in the GridMVC project the model window is not working for me.

Here is my code
i tried putting the script in two different places
this is my

Configs.cshtml.
@using GridMvc.Html
@model Admin.ConfigurationViewModel
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    //Layout = null;

    ViewBag.Title = "ConfigLogs";
}

<meta name="viewport" content="width=device-width" />

@using (Html.BeginForm("ConfigLogs", "Home"))
{
    if (Model != null)
    {
        <div class="col-md-offset-0">

            <h3>Config Logs</h3>
            <table>
                <tr>
                    <td align="left" style="padding-right: 50px">Start Date:</td>
                    <td>@Html.EditorFor(m => m.StartDate, new { style = "width: 500px;" })</td>
                </tr>
                <tr>
                    <td align="left" style="padding-right: 50px">End Date:</td>
                    <td>@Html.EditorFor(m => m.EndDate, new { style = "width: 500px;" })</td>
                </tr>
            </table>
        </div>
    }
    <input type="submit" value="View" />
  
    @Html.Grid(Model.Configs).Columns(columns =>
        {
            if (Model.CanEditConfig)
            {
                columns.Add(U => U.ConfigurationID)
                    .Titled("Edit")
                    .Encoded(false)
                    .Sanitized(false)
                    //.RenderValueAs(l => Html.ActionLink("Edit", "EditConfig", "Home", new { ConfigurationID = l.ConfigurationID }, new { @class="modal-link" }));
                    .RenderValueAs(l => Html.ActionLink("Edit", "EditConfig", "Home", new { ConfigurationID = l.ConfigurationID }, new { @class = "modal-link" }).ToHtmlString());
            }
            columns.Add(U => U.KeyName).Titled("KeyName").Filterable(true);
            columns.Add(U => U.KeyValue).Titled("KeyValue").Filterable(true);
            columns.Add(U => U.ConfigurationDataTypeID).Titled("ConfigurationDataTypeID ").Filterable(true);
            columns.Add(U => U.CreateDts).Titled("CreateDts").SetWidth("300px").Filterable(true);
            columns.Add(U => U.UpdateDts).Titled("UpdateDts").Filterable(true);
            columns.Add(U => U.CreateSource).Titled("CreateSource").SetWidth("250px");
            columns.Add(U => U.UpdateSource).Titled("UpdateSource").Filterable(true);
            columns.Add(U => U.TypeName).Titled("TypeName");
        }).WithPaging(50).Sortable(true).WithMultipleFilters()


    @*<script type="text/javascript">
        //this script reset modal each time when you click on the link:

        $(function () {
            $(".modal-link").click(function (event) {
                event.preventDefault();
                $('#myModal').removeData("modal");
                $('#myModal').modal({ remote: $(this).attr("href") });
            });
        })
    </script>*@


    <br />
    <br />

    <!-- Modal -->
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                ×
            </button>
            <h3 id="myModalLabel">
                Edit Customer
            </h3>
        </div>
        <div class="modal-body">
            <p>
                Loading…
            </p>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">
                Close
            </button>
        </div>
    </div>


    @* <script type="text/javascript">
        //this script reset modal each time when you click on the link:

        $(function () {
            $(".modal-link").click(function (event) {
                event.preventDefault();
                $('#myModal').removeData("modal");
                $('#myModal').modal({ remote: $(this).attr("href") });
            });
        })
        </script>*@

}

Jul 10, 2014 at 8:28 PM
Edited Jul 10, 2014 at 8:30 PM
Here is the Layout.Cshtml

Why am I not getting Edit popup :(
<!DOCTYPE html>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

<html>
<head>
    <title>@ViewBag.Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/Gridmvc.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/gridmvc.datepicker.css" rel="stylesheet" />
    <link href="~/Content/jquery.treeview.css" rel="stylesheet" type="text/css">
    <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <link href="~/Content/Site.css" rel="stylesheet" />

    <link href="~/Content/SyntaxHighlighter/shCore.css" rel="stylesheet" />
    <link href="~/Content/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" />
    
    <!-- SCRIPTS -->
    <!--[if lt IE 9]>-->
    <script src="~/Scripts/jquery-1.9.1.js"></script>
    <script src="~/Scripts/jquery-1.9.1.min.js"></script>
    <![endif]-->
    <!--[if gte IE 9]><!-->
    <script src="~/Scripts/jquery-2.1.0.js"></script>
    <script src="~/Scripts/jquery-2.1.0.min.js" type="text/javascript"> </script>
    <!--<![endif]-->
   
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/jquery.treeview.js" type="text/javascript"></script>

    <script src="~/Scripts/jquery-popup.js"></script>
  
    <script src="~/Scripts/jquery-ui-1.10.4.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.10.4.js"></script>
   

        <script src="~/Scripts/gridmvc.js" type="text/javascript"> </script>

    <script src="~/Scripts/gridmvc.lang.ru.js" type="text/javascript"> </script>
    
 </head>

<body>   
    <div class="navbar navbar-inverse navbar-fixed-top"  role="navigation">  
                  <div class="container">
                <div class="col-lg-1">
                    <img src="~/Images/logo-small.png" />
                 </div>
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    @Html.ActionLink("File Transfer Admin", "Index", "Home", null, new { @class = "navbar-brand" })
                </div>
                <div class="navbar-collapse navbar-ex5-collapse collapse">                
                    <ul class="nav navbar-nav">
                       <li class="@(ViewBag.Title ==  "Home" ? "active" : string.Empty)">@Html.ActionLink("Home", "Index", "Home")</li>
                        <li class="@(ViewBag.Title == "UpStatus" ? "active" : string.Empty)">@Html.ActionLink("UpStatus", "UpStatus", "Home")</li>
                        <li class="@(ViewBag.Title == "AppStatus" ? "active" : string.Empty)">@Html.ActionLink("AppStatus", "AppStatus", "Home")</li>
                        <li class="@(ViewBag.Title == "MonoStatus" ? "active" : string.Empty)">@Html.ActionLink("MonoStatus", "MonoStatus", "Home")</li>
                        <li class="@(ViewBag.Title == "DDUStatus" ? "active" : string.Empty)">@Html.ActionLink("DDUStatus", "DDUStatus", "Home")</li>
                        <li class="@(ViewBag.Title == "REventLogs" ? "active" : string.Empty)">@Html.ActionLink("REventLogs", "REventLogs", "Home")</li>
                        <li class="@(ViewBag.Title == "PEventLogs" ? "active" : string.Empty)">@Html.ActionLink("PEventLogs", "PEventLogs", "Home")</li>
                        <li class="@(ViewBag.Title == "MViewer" ? "active" : string.Empty)">@Html.ActionLink("MViewer", "MViewer", "ManifestViewer")</li>
                        <li class="@(ViewBag.Title == "ConfLogs" ? "active" : string.Empty)">@Html.ActionLink("ConfLogs", "ConfLogs", "Home")</li>
                    </ul>
                </div>
            </div>
</div>
    <div id="main" class="container body-content">
        @RenderBody()
    </div>
</body>
</html>