ASP.NET

Loading modal form RSS

3 replies

Last post Dec 11, 2012 07:40 PM by Naom

‹ Previous Thread|Next Thread ›

Naom

All-Star

36004 Points

7901 Posts

Loading modal form

Nov 16, 2012 08:40 PM|LINK

Hi everybody,

I am trying to figure out what may be the problem with my validations, etc. and I think it may be due to the scripts not loading since I am using a partial view.

I have the following Layout.schtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/themes/base/css")
   @* @Styles.Render("~/Content/jquery.DataTables/css")*@

    @Styles.Render("~/Content/themes/FlexiGrid/css")

</head>
<body>
    <header>
        <div class="content-wrapper">
            @*<div class="float-left">
                    <p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>
                </div>*@
            <div class="float-right">
                <section id="login">
                    @Html.Partial("_LoginPartial")
                </section>
                <nav>
                    <ul id="menu">
                        <li>@Html.ActionLink("New Order", "Index", "ClientOrder", null, new { title = "Create New Order for Selected Client" })</li>
                        <li>@Html.ActionLink("Clients", "Client", "Client", null, new { title = "Clients Maintenance" })</li>
                        <li>@Html.ActionLink("Operators", "Index", "Operator", null, new { title = "Operators Maintenance" })</li>
                        <li>@Html.ActionLink("History", "History", "ClientOrder", null, new { title = "View Clients Orders History" })</li>
                        <li>@Html.ActionLink("About", "About", "Home")</li>

                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <div id="body">
        @RenderSection("featured", required: false)
        <section class="content-wrapper main-content clear-fix">
            @RenderBody()
        </section>
    </div>
    <footer>
        <div class="content-wrapper">
            <div class="float-left">
                <p>&copy; @DateTime.Now.Year - Card Numbers</p>
            </div>
        </div>
    </footer>
    
    @Scripts.Render("~/bundles/jquery")
      <script type="text/javascript">
          if (typeof jQuery == 'undefined') {
              var e = document.createElement('script');
              e.src = '@Url.Content("~/Scripts/jquery-1.8.2.js")';
                e.type = 'text/javascript';
                document.getElementsByTagName("head")[0].appendChild(e);

            }
        </script>

    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/bundles/jqueryval")

    @Scripts.Render("~/bundles/flexigrid")

    @*@Scripts.Render("~/bundles/jquery.dataTables")*@

    @Scripts.Render("~/bundles/modernizr")
    

@*http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification*@
    <script src ="@Url.Content("~/Scripts/Shared/CardNumbers.js")" type = "text/javascript"></script>
    @RenderSection("scripts", required: false)
</body>
</html>

In the Clients view I have the following:

@model CardNumbers.Objects.Client

@{
    ViewBag.Title = "Clients";
}

@section scripts {
    <script src="@Url.Content("~/Scripts/Clients.js")" type="text/javascript" ></script>
}

<form id="frmClientsSearch">
    <label for="clientNo">Client No: </label>
    <input type="number" name="searchClientNo" class="numericOnly" /><br />
    <label for="clientName">Client Name: </label>
    <input type="text" size="25" value="Please enter the search value" class="SelectOnEntry"
        name="searchClientName" />

    <input type="button" id="btnClientsSearch" value="Find / Refresh" />
</form>
<div style="padding-left: 150px; padding-top: 50px; padding-bottom: 50px;" id="ClientsResults">
    <table id="flexClients" style="display: none">
    </table>
</div>

<div id="editor" style="visibility: hidden">   

        Html.Partial("_ClientForm", Model);
    }

</div>

And this is the code that invokes the modal form in the Clients.js file

                var url = '/Client/Edit/' + id;            
                $("#sform").load(url).dialog({ modal: true, width: 1000, height: 600 });

And in the client controller this is what I have for Edit

public ActionResult Edit(int id)
        {
            var client = Db.GetClientById(id);
 
            return PartialView("_ClientForm",client);
        }

while _ClientForm.cshtml being

@using WebDemo.Helper
@model CardNumbers.Objects.Client
   @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "sform", title = "Client Info" }))
   { 
<fieldset>
    <legend>Client Info</legend>

    @Html.ValidationSummary(true)

    <input type="hidden" id="fntype" name="fntype">
    @Html.HiddenFor(model => model.Id)
    @Html.EditorFor(model => model.Number, EditorTemplate.TextBox)

    @Html.EditorFor(model => model.Name, EditorTemplate.TextBox)

    @Html.EditorFor(model => model.Address, EditorTemplate.EditBox)
        
    <div id="ContactsInfo">        
        
        <div id="Contact1">
            
         @Html.EditorFor(model=>model.Contact1)
         
        </div>
        
        <div id="Contact2">
            
           @Html.EditorFor(model => model.Contact2)
        </div>
    </div>
  
    <div id="SaveCancel" class="float-right">
        <button type="Submit" id="btnSave">Save</button>
        <button type="reset" id="btnCancel">Cancel</button>
    </div>
</fieldset>
}

Now, in Google Chrome the grid does not show at all. In FireFox or IE the grid shows and when I click on Edit button, in IE I get this error

http://www.universalthread.com/Thread%20photos/2012/01557481.jpg

In FireFox the form seems to load, but validations don't work. When I type garbage in email, I only see red border.

Typing long text (longer than defined max length) in Phone or extension does not produce an error as well as typing garbage in Phone also does not work, although I've tested it before and it was working.

Do you see what am I missing?

Beware of bugs in the above code; I have only proved it correct, not tried it.
(Donald Knuth)

Visit my blog

Microsoft Community Contributor 2011-12

Edited by Naom on Nov 16, 2012 08:42 PM

- Reply
CPrakash82

All-Star

18270 Points

2839 Posts

Re: Loading modal form

Nov 16, 2012 11:12 PM|LINK

You are missing jquery references for cleint side validation

<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>

Also, you need to use ValidationMessageFor along with EditorFor to display the message.

@Html.EditorFor(m=> m.Number, EditorTemplate.TextBox)

@Html.ValidationMessageFor(m=> m.Number)

try to avoid 'Model' word inside the EditorFor to any confusion.

http://cprakash.com

Naom

All-Star

36004 Points

7901 Posts

Re: Loading modal form

Nov 18, 2012 02:31 AM|LINK

I've been able to make it partially work. In my controller's code I now return the Edit view. This is a normal view but it uses a special _PopupLayout which doesn't have menu or footer.

Anyway, I still have troubles.

1. The new modal window has a tiny x at the top, however, clicking on it does absolutely nothing (the form does not close).

2. I also can not figure out how to properly close the form and save or not save data and return back.

Here is the code I currently have in Clients.js file

function edit(com, grid)
{
        $('.trSelected', grid).each(function () {
          
                var id = $(this).attr('id');
                id = id.substring(id.lastIndexOf('row') + 3);
                currentId = id;
                $('#fntype').val('Edit');
                var url = '/Client/Edit/' + id;
                $("#editor").load(url).dialog({ modal: true, width: 1000, height: 750 });

        });

    }

function clearForm() {

    $("#sform input").val("");
}

$(function () {
    $('#btnSave').click(function () {
   //     addFormData();
        $('#flexClients').flexOptions({ url: '/Client/Edit/'+ currentId }).flexReload();
        clearForm();
        $('#sform').dialog('close');
        return false;
    });
});

$(function () {
    $('#btnCancel').click(function () {

        //clearForm();
        $('#sform').dialog('close');
        return;
    });
});

And this is my _ClientForm.schtml

@using WebDemo.Helper
@model CardNumbers.Objects.Client
   @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "sform", title = "Client Info" }))
   { 
<fieldset>
    <legend>Client Info</legend>

    @Html.ValidationSummary(true)

    <input type="hidden" id="fntype" name="fntype">
    @Html.HiddenFor(m => m.Id)
    @Html.EditorFor(m => m.Number, EditorTemplate.TextBox)

    @Html.EditorFor(m => m.Name, EditorTemplate.TextBox)

    @Html.EditorFor(m => m.Address, EditorTemplate.EditBox)
        
    <div id="ContactsInfo">        
        
        <div id="Contact1">
            
         @Html.EditorFor(m=>m.Contact1)
         
        </div>
        
        <div id="Contact2">
            
           @Html.EditorFor(m => m.Contact2)
        </div>
    </div>
  
    <div id="SaveCancel" class="float-right">
        <button  id="btnSave">Save</button>
        <button  id="btnCancel">Cancel</button>
    </div>
</fieldset>
}

I am wondering how can I make my form to invoke the post Edit method first and then return back to the main client view with a grid? And also, what to change to make the close button work correctly?

Beware of bugs in the above code; I have only proved it correct, not tried it.
(Donald Knuth)

Visit my blog

Microsoft Community Contributor 2011-12

- Reply
Naom

All-Star

36004 Points

7901 Posts

Re: Loading modal form

Dec 11, 2012 07:40 PM|LINK

Any more help, please?

Beware of bugs in the above code; I have only proved it correct, not tried it.
(Donald Knuth)

Visit my blog

Microsoft Community Contributor 2011-12

‹ Previous Thread|Next Thread ›

Loading modal form RSS

3 replies

Naom

Loading modal form

CPrakash82

Re: Loading modal form

Naom

Re: Loading modal form

Naom

Re: Loading modal form

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft