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.
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)
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
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)
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>© @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?
(Donald Knuth)
Visit my blog
Microsoft Community Contributor 2011-12
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.
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?
(Donald Knuth)
Visit my blog
Microsoft Community Contributor 2011-12
Naom
All-Star
36004 Points
7901 Posts
Re: Loading modal form
Dec 11, 2012 07:40 PM|LINK
Any more help, please?
(Donald Knuth)
Visit my blog
Microsoft Community Contributor 2011-12