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
Related
I have a bootstrap model in an .NET MVC5 app. My client side validation is working (jquery unobtrusive in MVC) but the problem is that my modal keeps closing even if there are errors. How can I prevent the model from closing and just display the errors? In the javascript that I have, it prevents the modal from closing but it doesn't show any of the errors. I can only seem to get it to show errors if the modal closes. I need it to stay open if there are validation errors.
Here is my html:
<div class="modal" id="createMessageModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
#using (Html.BeginForm("Dashboard", "App", null, FormMethod.Post, new { #id = "frmSendMessage", #name = "frmSendMessage" }))
{
<div class="modal-header">
<h5 class="modal-title">Send Message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<table>
<tbody>
<tr>
<th style="padding-bottom:15px">From:</th>
#Html.HiddenFor(model => model.messageSenderID)
<td style="padding-bottom:15px;">#ViewBag.Name</td>
</tr>
<tr>
<th style="padding-bottom:15px">To:</th>
<td style="width:100% !important; padding-bottom: 15px;">
#Html.DropDownListFor(model => model.messageRecipientID, Model.messageRecipientsDropdown, "Select A Recipient", new { #id = "recipient", #name = "recipient", #class = "form-control" })
#Html.ValidationMessageFor(model => model.messageRecipientID, "", new { #class = "text-danger" })
</td>
</tr>
<tr>
<th>Subject:</th>
<td style="width:100% !important">#Html.TextBoxFor(model => model.messageSubject, new { #class = "form-control", #name = "messageSubject", #id = "messageSubject" })</td>
<td>#Html.ValidationMessageFor(model => model.messageSubject, "", new { #class = "text-danger" })</td>
</tr>
</tbody>
</table>
<br />
#Html.TextAreaFor(model => model.messageBody, new { rows = "15", style = "resize:none; min-width:100%;", id = "messageBody", name = "messageBody" })
#Html.ValidationMessageFor(model => model.messageBody, "", new { #class = "text-danger" })
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Send Message</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
}
</div>
</div>
</div>
This is my jquery:
$(document).ready(function() {
$("#frmSendMessage").submit(function() {
Recipient = $("input[name='recipient']").val();
MessageSubject = $("input[name='messageSubject']").val();
MessageBody = $("input[name='messageBody']").val();
return false;
})
});
In your case either there might be some other code interfering with your form submission/modal or the form is getting submitted somehow and reloading the same page. These are the only two reason I can think of.
Below is an example of doing validation from jquery using your code as base.
Its a simple search query submission to SO. You can see that modal remains open if search text is not entered.
Please note the comment inside $("#frmSendMessage").submit
$(document).ready(function() {
$("#frmSendMessage").submit(function() {
var query = document.getElementById('myQuery');
if (query.value == "") {
$('#vmsg').html("Please enter your search query")
return false; //form will not submit and modal will remain open
}
return true; //form will get submitted and modal will close due to page being changed/reloaded
})
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#formModal">
Show Form
</button>
<div id="formModal" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="frmSendMessage" method="get" action="https://stackoverflow.com/search">
<input type="text" id="myQuery" name="q" placeholder="your search query here">
<div id="vmsg"></div>
<button type="submit" name="button">Search Now</button>
</form>
</div>
</div>
</div>
</div>
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")
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.