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")
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.
I have implemented a modal popup using bootstrap and include the jquery autocompletebox in it. However when i type something in text box, the suggestion text will appear behind the modal popup box but not 'inside' it. Is there anything i done wrong? Please advise, thanks alot!
My Razor view cshtml:
<div class="modal fade" id="impersonation" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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="myModalLabel"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Impersonation</h4>
</div>
<div class="modal-body">
<div class="form-horizontal">
#Html.Label("Impersonate", htmlAttributes: new { #class = "control-label col-md-4" })
#Html.TextBox("UserName", null, htmlAttributes: new { #class = "form-control" })
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<a class="btn btn-danger btn-ok" id="impersonate" data-dismiss="modal">Start Impersonation</a>
</div>
</div>
</div>
</div>
My javascript:
$('#impersonation').on('show.bs.modal', function (e) {
$(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
$(this).find('.btn-ok').attr('custom', $(e.relatedTarget).data('custom'));
});
$(document).ready(function () {
$("#UserName").autocomplete({
source: '#Url.Action("AutoCompleteUser","UserRoles")'
});
})
Found out solution by modify as below:
$(document).ready(function () {
$("#UserName").autocomplete({
source: '#Url.Action("AutoCompleteUser","UserRoles")',
appendTo: $('.modal-body')
});
})
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
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.