Modal Dialog not appearing

Mar 21, 2014 at 7:34 PM
I have tried to implement a modal dialog to edit records. The page is graying and GET /Account/EditAccount controller method fires, however the, modal window does not appear. here is my code:

Accounts.cshtml
@model IEnumerable<PhysicalAccessWeb.USER>
@using GridMvc.Html

@{
    ViewBag.Title = "Accounts";
    Layout = "~/Views/Shared/_Layout.cshtml";
    <script src="@Url.Content("~/Scripts/gridmvc.min.js")" type="text/javascript"></script>
    <link href="@Url.Content("~/Content/Gridmvc.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/bootstrap.min.js")" type="text/javascript"></script>
    <link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
}

@helper RenderAccountEdit(USER item)
{
    <a href="@Url.Action("EditAccount", "Account", new { UserId = item.USERID })"> <img src='~/Images/edit24.png' align='left'></a>
}

@helper RenderAccountPopUpEdit(USER item)
{
    <b> @Html.ActionLink("Edit", "EditAccount", "Account", new { id = item.USERID }, new { @class = "modal-link" }) </b>
}

<h2>Accounts</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>

<hr />
<div style="width:500px;">
    @Html.Grid(Model).Columns(columns =>
    {
        //columns.Add(c => c.USERID)
        //    .Titled("Edit")
        //    .Sanitized(false)
        //    .Encoded(false)
        //    .RenderValueAs(c => RenderAccountEdit(c));
        columns.Add(c => c.USERID)
            .Titled("Edit")
            .Sanitized(false)
            .Encoded(false)
            .RenderValueAs(c => RenderAccountPopUpEdit(c));
        columns.Add(c => c.USERNAME).Titled("User Name").Filterable(true);
        columns.Add(c => c.PERSON.LASTNAME).Titled("Last Name");
        columns.Add(c => c.PERSON.FIRSTNAME).Titled("Frist Name");
        columns.Add(c => c.PERSON.MIDDLENAME).Titled("Middle Name");
        columns.Add(c => c.ISAPPROVED).Titled("Is Approved?");
        columns.Add(c => c.ISLOCKEDOUT).Titled("Is Locked Out?");
    }).WithPaging(20).Sortable(true)
</div>



<!-- Modal -->
<div id="myEditModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myEditModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myEditModalLabel">Edit User</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>
</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();
            $('#myEditModal').removeData("modal");
            $('#myEditModal').modal({ remote: $(this).attr("href") });
        });
    })
</script>
EditAccount.cshtml
@model PhysicalAccessWeb.USER

@{
    Layout = null;
}

@using (Html.BeginForm()) {
    
    @Html.ValidationSummary(true)
    
    <fieldset>
    
        @Html.HiddenFor(model => model.USERID)
    
        <div class="editor-label">
            @Html.LabelFor(model => model.USERNAME)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.USERNAME)
            @Html.ValidationMessageFor(model => model.USERNAME)
        </div>
    
        <div class="editor-label">
            @Html.LabelFor(model => model.PASSWORD)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.PASSWORD)
            @Html.ValidationMessageFor(model => model.PASSWORD)
        </div>
    
        <div class="editor-label">
            @Html.LabelFor(model => model.PERSONID)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.PERSONID)
            @Html.ValidationMessageFor(model => model.PERSONID)
        </div>
    
        <div class="editor-label">
            @Html.LabelFor(model => model.ROLEID)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ROLEID)
            @Html.ValidationMessageFor(model => model.ROLEID)
        </div>
    
        <div class="editor-label">
            @Html.LabelFor(model => model.ISLOCKEDOUT)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ISLOCKEDOUT)
            @Html.ValidationMessageFor(model => model.ISLOCKEDOUT)
        </div>
    
        <div class="editor-label">
            @Html.LabelFor(model => model.ISAPPROVED)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ISAPPROVED)
            @Html.ValidationMessageFor(model => model.ISAPPROVED)
        </div>
    
        <div class="editor-label">
            @Html.LabelFor(model => model.ADDDATETIME)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ADDDATETIME)
            @Html.ValidationMessageFor(model => model.ADDDATETIME)
        </div>
    
        <div class="editor-label">
            @Html.LabelFor(model => model.LASTLOGINDATE)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.LASTLOGINDATE)
            @Html.ValidationMessageFor(model => model.LASTLOGINDATE)
        </div>
    
        <div class="editor-label">
            @Html.LabelFor(model => model.LASTLOCKEDOUTDATE)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.LASTLOCKEDOUTDATE)
            @Html.ValidationMessageFor(model => model.LASTLOCKEDOUTDATE)
        </div>
    
        <p>
            <input type="submit" value="Save" class="btn btn-primary" />
        </p>
    </fieldset>
}
AcountController.cs
   // GET /Account/EditAccount
        [AcceptVerbs(HttpVerbs.Get)]
        public ActionResult EditAccount(string id)
        {
            USER usr = null;
            try
            {
                
                 if (!_provider.IsUserLoggedOn())
                {
                    return RedirectToAction("LogOn", "Account");
                }

                 usr = UserRespository.GetUser(id);
            }
            catch (Exception ex)
            {
                ModelState.AddModelError("", ex.Message);
            }
            if (usr == null)
            {
                usr = new USER();
            }
            return PartialView(usr);
        }

        // POST: /Account/EditAccount

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult EditAccount(USER editUser)
        {
            if (ModelState.IsValid)
            {
                UserRespository.EditUser(ref editUser);
                return RedirectToAction("Account", "Accounts");
            }
            else
            {
                return PartialView(editUser);
            }

        }
Coordinator
Mar 22, 2014 at 10:51 AM
Hi

Ensure that you reference all nessesary client scripts (jquery, bootstrap)
Try to inspect you code for client errors, using developer tools
Mar 24, 2014 at 7:26 PM
I ran it through IE with Shift+F12, FireFox with FireBug, and Chrome with Developer tools. No javascript errors are being displayed in the console.
Coordinator
Apr 5, 2014 at 7:12 AM
Sorry, I can't say what happens on your page. Try to set breakpoint at click function and try to understand what happens.
Apr 7, 2014 at 1:31 PM

Hi Bukharin,

I found if take the sortable(true) property of the grid and set the sortable(false) and filterable(true) on each columns I want to filter that filtering works.

Example:

@Html.Grid(Model).Columns(columns =>

{

columns.Add(c => c.USERID)

.Titled("Edit")

.Sanitized(false)

.Encoded(false)

.Filterable(false)

.Sortable(false)

.RenderValueAs(c => RenderAccountEdit(c));

columns.Add(c => c.PERSON)

.Titled("Biometrics")

.Sanitized(false)

.Encoded(false)

.Filterable(false)

.RenderValueAs(c => RenderPersonBiometrics(c.PERSON));

columns.Add()

.Titled("Delete")

.Sanitized(false)

.Encoded(false)

.Filterable(false)

.Sortable(false)

.RenderValueAs(c => RenderAccountDelete(c));

columns.Add(c => c.USERNAME).Titled("User Name").Sortable(false).Filterable(true);

columns.Add(c => c.PERSON.LASTNAME).Titled("Last Name").Sortable(false).Filterable(true);

columns.Add(c => c.PERSON.FIRSTNAME).Titled("Frist Name").Sortable(false).Filterable(true);

columns.Add(c => c.PERSON.MIDDLENAME).Titled("Middle Name").Sortable(false).Filterable(true);

columns.Add(c => c.ISAPPROVED).Sortable(false).Filterable(true)

.Titled("Is Approved?")

.RenderValueAs(c => RenderIsApproved(c)).Sortable(false).Filterable(true);

columns.Add(c => c.ISLOCKEDOUT).Titled("Is Locked Out?")

.Titled("Is Locked Out?")

.RenderValueAs(c => RenderIsLockedOut(c)).Sortable(false).Filterable(true);

}).WithPaging(20)

Of course I can’t sort then but for me the ability for filter is more important.

Thank you,

Marc Oden