I have an application in Umbraco MVC 7, I have a button that call for Modal popup to open the login form. here is the modal code placed on partial view.
#inherits UmbracoTemplatePage
#using System.Web.Mvc.Html
#using ClientDependency.Core.Mvc
#using Umbraco.Web
#using Umbraco.Web.Models
#using Umbraco.Web.Controllers
#{
var loginModel = new LoginModel();
Html.EnableClientValidation();
Html.EnableUnobtrusiveJavaScript();
Html.RequiresJs("/umbraco_client/ui/jquery.js");
Html.RequiresJs("/umbraco_client/Application/JQuery/jquery.validate.min.js");
Html.RequiresJs("/umbraco_client/Application/JQuery/jquery.validate.unobtrusive.min.js");
}
#Html.RenderJsHere()
<div class="modal fade bs-example-modal-sm" id="login" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Login</h4>
</div>
#using (Html.BeginUmbracoForm<UmbLoginController>("HandleLogin", null, new { #class = "form-horizontal", role = "form" }))
{
<div class="modal-body">
<div class="form-group">
<div class="col-sm-12 formError">
#Html.ValidationSummary()
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
#Html.TextBoxFor(m => loginModel.Username, new { #class = "form-control", placeholder = "Username" })
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
#Html.PasswordFor(m => loginModel.Password, new { #class = "form-control", placeholder = "Password" })
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Login</button>
</div>
}
</div>
</div>
</div>
So when I don't type anything and clicks submit it keeps the modal open and display the validation error, all good, however if I type a wrong credentials its close the modal popup, instead I would like to keep open and display the returned error. I know it is not submitting because if I try to refresh the browser, it asks me to resend the form.
Any suggestion on what do I need to do to fix it?
Thanks a lot
When there is no validation errors the form get submitted hence a page reload happens that's why the modal popup gets closed.
Solution :- You need to submit the login form using AJAX, so that only that part of the page will get submitted.
Related
I am kinda new to this. How do you populate a TextBoxFor with a value from a TextBoxFor on buttonclick?
I am creating a confirmation modal wherein the user input data in the TextBoxFor and when submit button is clicked, a confirmation dialog should pop-up with his credentials submitted. The problem is no value is showing in the modal TextBoxFor
Parent TextBoxFor
<div class="col-md-10">
#Html.TextBoxFor(model => model.name, new { htmlAttributes = new { #class = "form-control", #id = "name" } })
#Html.ValidationMessageFor(model => model.name, "", new { #class = "text-danger" })
</div>
<button type="button" id="submitBtn" class="btn btn-primary" data-toggle="modal" data-target="#login-modal" data-backdrop="static" data-keyboard="false">Submit</button>
Modal TextBoxFor
<div id="login-modal" tabindex="-1" role="dialog" aria-hidden="true" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Confirm Submit
<button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button>
</div>
<div class="modal-body">
Are you sure you want to submit the following details?
<br/>
<br/>
<table class="table">
<tr>
<th>Queue Number</th>
<td>#Html.TextBoxFor(model => model.name, new {htmlAttributes = new {#class = "form-control", #id = "namee"}})</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
Submit
</div>
}
</div>
</div>
Script
$('#submitBtn').click(function () {
$('#namee').text($('#name').val());
var x = document.getElementById("name").value;
document.getElementById("namee").innerHTML = x;
});
I also tried changing the Parent TextBoxFor with an <input type> but still doing nothing.
Thanks in advance.
As a user tries to register, I want a modal to pop up with some terms before the registration is accepted. Everything seems to work until the user accepts the terms shown on the modal. When the user presses the button (submitBtn2) it doesn't react. I have tried testing with an alarm to see if my submition was the issue, but not even the alarm isn't shown - what am i doing wrong?
Registration form
#using (Html.BeginForm("Register", "Account", FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
<div align="center" class="w3-black w3-opacity" id="register">
<br />
#Html.AntiForgeryToken()
<h4>Register</h4>
<hr />
#Html.ValidationSummary("", new { #class = "text-danger" })
<div class="form-group" id="lastname">
#Html.LabelFor(m => m.Email, new { #class = "control-label" })
<div>
#Html.TextBoxFor(m => m.Email, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.Password, new { #class = "control-label" })
<div>
#Html.PasswordFor(m => m.Password, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.ConfirmPassword, new { #class = "control-label" })
<div>
#Html.PasswordFor(m => m.ConfirmPassword, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
<button class="w3-button w3-light-grey w3-section" type="submit" value="Register">
<i class="fa fa-user"></i>Create user
</button>
<input type="button" name="ConfirmRegBtn" value="Submit" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" class="w3-button w3-light-grey w3-section" />
</div>
</div>
}
JQuery
$('#submitBtn2').click(function () {
/* when the submit button in the modal is clicked, submit the form */
window.alert("sometext");
//$('#Register').submit();
});
Modal
<!--legal data-stuff-->
<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header w3-center">
<h1>Before you create your user</h1>
</div>
<div class="modal-body scroll">
Some stuff from database
Lorem ipsum...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
Submit
</div>
</div>
</div>
</div>
You need to give an Id to the form. You can specify that in your htmlAttributes parameter of the BeginForm helper method.
#using (Html.BeginForm("Register", "Account", FormMethod.Post,
new { #class = "form-horizontal", role = "form" , #id= "Register" }))
{
<!-- Your form elements/existing code goes here -->
}
This will generate the form tag with Id attribute value Register
<form action="/" class="form-horizontal" id="Register" method="post" role="form">
<!-- Your form elements goes here -->
</form>
And use this Id attribute value in your jQuery selector get the form element and submit the form.
$(document).ready(function () {
$('#submitBtn2').click(function () {
$('#Register').submit();
});
});
That is one way of doing it. Another approach is to keep the modal dialog inside the form and when the button in modal is clicked, find the closest container form tag and submit it. jQuery closest method will be handy. But the Id selector will be faster (hopefully better than o(n) solution)
I'm obviously missing something in being able to display a modal dialog with a url action link.
I know how to display a bootstrap dialog from a jQuery click event, but what I was hoping to do was the following:
I have an Index page with a url.action link on it. When the user clicks on the link, I link to the appropriate controller action method (Edit) with no problems (seen during debugging) in the hope of displaying the bootstrap modal popup dialog. However, no modal dialog pops up.
If I include a data-target on the action link, the link doesn't even work. If I remove it, it gets to the View, but no modal dialog pops up because there is nothing on the link that says what the data target is. I'm hoping I have the syntax incorrect on the link for the target of the modal popup. I'm hoping that if I include the proper bootstrap attributes for the dialog, it will pop up.
I really could use some help here and would be much appreciated.
Here is the link on my Index page (with the data target included). Note again that if I exclude the "data-toggle" and "data-target" from the below code snippet, I get to the View, but no dialog pops up.
data-toggle="modal", data-target="#categoryEditModal"
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>Edit
Here is my destination View. I can verify that while debugging, the Model.CategoryID and Model.CategoryDescription are populated in the Model.
<div class="modal" id="categoryEditModal" tabindex="-1" role="dialog" aria-labelledby="categoryModal-label" 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>
<h4 class="modal-title" id="categoryModal-label">Category Description</h4>
</div>
<div class="modal-body">
<div class="form-group">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.CategoryDescription, htmlAttributes: new { #class = "control-label required col-md-2 col-sm-2 col-xs-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CategoryDescription, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CategoryDescription, "", new { #class = "text-danger" })
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" id="btnSaveCategory">Save</button>
</div>
</div>
</div>
</div>
Code edit on Index page to bring up the dialog box
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>Edit
In your view have
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>Edit
<div id='myModal' class='modal fade in'>
<div class="modal-dialog">
<div class="modal-content">
<div id='myModalContent'></div>
</div>
</div>
</div>
Add jquery:
$(function () {
$.ajaxSetup({ cache: false });
$("a[data-modal]").on("click", function (e) {
$('#myModalContent').load(this.href, function () {
$('#myModal').modal({
/*backdrop: 'static',*/
keyboard: true
}, 'show');
});
return false;
});
});
And in your controller return the partial view:
Return PartialView("partialviewname")
The latest version of Bootstrap modal options says that remote function is deprecated and will be removed in Bootstrap 4.
So i'm trying to load a page with jQuery load. But how does this work? I can't find any example of this.
What I want is a modal that loads a page that I created as well. When you click a link in that page (the link is an url of an image), the href value must be returned to the textbox (ImageUrl) in the parent page.
<div class="input-group">
#Html.EditorFor(model => model.ImageUrl, new { htmlAttributes = new { #class = "form-control" } })
<span class="input-group-btn">
<button class="btn btn-default browsefiles" type="button" data-toggle="modal" data-target="#myModal"><i class="fa fa-search"></i></button>
</span>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Image</h4>
</div>
<div class="modal-body">
External page must be loaded here
</div>
</div>
</div>
</div>
I didn't knew that jQuery.load returned only html and that it will paste the html in the div that you have specified. So when you want to "return" something, the destination is on the same page. So you could set the return value directly in the page.
I am performing registration inside bootstrap 3 modal components.I create a partial view for registration and render that inside bootstrap modal. I am performing validation there also.Problem is that if I submit wrong data or empty data modal disappers on submit button click . I want that it stays there if data is not valid and show validation errors there.How I customize that?
Here is my partial view
#using (Html.BeginForm("", "", FormMethod.Post, new { #class = "form-signin" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary()
<fieldset>
<legend class="form">Registration Form</legend>
#Html.TextBoxFor(m => m.UserName, new { #class = "form-control", placeholder = "Email Address" })
#Html.PasswordFor(m => m.Password, new { #class = "form-control", placeholder = "Password" })
#Html.PasswordFor(m => m.ConfirmPassword, new { #class = "form-control", placeholder = "Confirm Password" })
<input type="submit" value="Register" style="margin-top:10px;" class="btn btn-lg btn-primary btn-block" />
</fieldset>
}
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
and here is the modal
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Registration</h4>
</div>
<div class="modal-body">
#Html.Partial("_Register")
</div>
</div>
</div>
</div>
You have to use Ajax.BeginForm(). Here is the way how can you achieve it.
Using Ajax.BeginForm with ASP.NET MVC 3 Razor