I'm sure there are multiple ways of accomplishing this and I'm open to any suggestions but at the moment I'm trying to find a way to dynamically change a Bootstrap alert based on the CSS I'm passing in the ViewBag.
When I try the following it doesn't display the Bootstrap alert at all. Basically what I'm looking to do is have a generic alert at the top of a View. Then I'll look at the ViewBag for a message and if that is not Null I will display it. If it's displayed I would like to look at the CSS so that way I can either pass an error message or a success message. I can see the ViewBag results with the following code but it doesn't show the Bootstrap alert at all.
This is in the Controller
ViewBag.ResultMessage = "Just testing.";
ViewBag.ResultMessageCss = "alert-danger";
This is in my View
#if (ViewBag.ResultMessage != null)
{
<div class="alert alert-dismissible #ViewBag.ResultMessageCss;">
<button type="button" class="close" data-dismiss="alert">&close;</button>
#ViewBag.ResultMessage;
</div>
}
Your code is going to render the below HTML.
<div class="alert alert-dismissible alert-danger;">
<button type="button" class="close" data-dismiss="alert">close</button>
Just testing.;
</div>
The last CSS class name you have is alert-danger; That is not a valid bootstrap class name. It should be alert-danger. So if you remove the unnecessary semicolon, it will properly render the bootstrap message box.
#if (ViewBag.ResultMessage != null)
{
<div class="alert alert-dismissible #ViewBag.ResultMessageCss">
<button type="button" class="close" data-dismiss="alert">close</button>
#ViewBag.ResultMessage
</div>
}
Related
Currently I'm using a Model that after posting back from a Form I look at a model property to display an Alert. However I now need to have a Modal displayed instead. I know I need a Modal div at the bottom of my page to display but I can't figure out how to call that from the Razor Model.
Researching ideas all I've found is where a button click or some click event would call some JS and show the modal. I can't find anything on how to just open it from the View.
The concept is that the end user will click a button do basically do like a Time Stamp into the database. In the controller I set a MessageType property and then based on that I would show say a Bootstrap Error Alert if there was an error or Success Alert if everything was okay. Now instead of calling the Success Alert I need to open a Modal.
Here is how I'm doing it now with an Alert. This is in my MVC View. Is there a way to do the same but instead of Alert open a Modal?
#if (Model.MessageType == "PUNCH")
{
<div class="alert alert-success">
<h3>Punch accepted at <strong>#Model.CurrentTime.</strong></h3>
</div>
}
Similar to what you did, you may execute the javascript code which shows the modal dialog.
Assuming you have the required bootstrap files loaded to your page,
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
#section Scripts
{
#if (Model.MessageType == "PUNCH")
{
<script>
$('#myModal').modal();
</script>
}
}
I am developing MVC application where people can sign up. After signing up, a page will display confirmation message using bootstrap modal. The modal block on the view is checking a session variable first, if the session is not null, then it will be displayed:
#if (Session["signUpName"] != null)
{
<!-- Modal start -->
<script type="text/javascript">
$(window).load(function(){
$('#signUpModal').modal('show');
});
</script>
<div class="modal fade" id="signUpModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data- dismiss="modal">×</button>
<h4 class="modal-title">Registration Confirmation</h4>
</div>
<div class="modal-body">
<p>Dear #Session["signUpName"]</p>
<p>Thank you ......</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data- dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal end -->
}
My issue is after signing up, I can't get rid of the modal window!! I tried to make the session equals to null inside the if statement with no luck.
Any ideas?
Don't use Session for this. The whole point of MVC is to use Models for your views.
So, create a model class to hold whatever data you need for the view. The moment you start using session and think about clearing it in the view you've gone as far away from MVC as you can get. This isn't webforms or classic asp, you need to think in a different way.
So, you could create your model from Session values. If you need to clear the session, do it in the controller, before you load the view. Keep your view as dumb and as simple as possible as you can.
public class UserModel {
public string Username { get set }
}
in the controller you take care of populating the model
public ActionResult SomeAction()
{
model = new UserModel { Username = Session["someSession"] == null ? "" : Session["someSession"].ToString() }
return View(model);
}
In your view I would not combine razor and Javascript like that. You can assign values to JavaScript variables from a model
so, in JavaScript you could do something like this:
var username = '#Model.Username';
now you can continue with your js code and check if you have a value or not.
Previously to create Accordion controls I used to use this piece of code:
<div class="panel-group" id="accordionMessagesSetup">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionMessagesSetup" href="#collapseMessagesSetup">
<span class="glyphicon glyphicon-chevron-up"></span>
Message Setup
</a>
</h4>
</div>
<div id="collapseMessagesSetup" class="panel-collapse collapse in">
<div>
<p style="background-color: red"> Someting ELSE in here</p>
<p style="background-color: red"> Someting ELSE2 in here</p>
</div>
</div>
</div>
</div>
or as seen here: Bootplay Live Demo
Now I still want to use my example but in this page I have a for-each loop so I need to create these at run-time.
The items I need to put variables there in order for this to work are
id="accordionMessagesSetup"
data-parent="#accordionMessagesSetup"
href="#collapseMessagesSetup"
id="collapseMessagesSetup"
How can I initialize those in a for-each loop a mode using Razor?
Imagine you have whatever property you like to do it in the model.
The biggest issue you are/will likely run into is Razor parsing. When you try to use a Razor variable in the middle of some bit of text, often Razor cannot determine where the variable name ends. For example, if you were to do something like:
<div id="accordion#Model.IdMessageSetup">
Razor thinks it needs to look for a property on the model named IdMessageSetup, when actually, you just wanted Id. The easiest way to fix this is to wrap the variable in paranthesis:
<div id="accordion#(Model.Id)MessageSetup">
Now, it's clear which part is the variable. As far as adding the # sign goes, I'm not really sure what the confusion is there. You just put it where it needs to go:
<a href="#collapse#(Model.Id)MessagesSetup">
Nothing special required.
I would like to show div tag based on TempData["flag"], which comes from controller.
Code 1:
<div class="error_text">
<div id="loginError" style="visibility:" +#TempData["flag"] class="errortext">
incorrect data
</div>
</div>
Code 2:
I tried with if condition as below. Its working, but I would like to go with the above code.
#if ((bool)TempData["flag"])
{
<div class="error_text">
<div id="loginError" class="errortext">
incorrect data
</div>
</div>
}
How can TempData be handled in the div tag (code 1)
You can integrate the razor code straight into the html attribute.
<div class="error_text">
<div id="loginError" style="visibility:#(((bool)TempData["flag"]) ? "visible" : "hidden")" class="errortext">
incorrect data
</div>
</div>
EDIT I just noticed based on your second code section that the flag is just a bool value in your program, so I updated the code sample above to account for this.
I am trying to render the outcome of an action into a modal (twitter bootstrap). Unfortunately I do not get this to work.
Before I was generating a link within an each iterator:
<g:link action="perform" id="${exerciseInstance.id}">
<h2>${fieldValue(bean: exerciseInstance, field: "title")}: (${exerciseInstance.questions.size()} Questions)</h2>
</g:link>
Instead of rendering a complete new site I rather want the quiz to be presented in a modal. Therefore I tried a simple twitter bootstrap modal example:
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">${fieldValue(bean: exerciseInstance, field: "title")}</a>
<div id="myModal" class="modal hide fade" style="display: none; ">
<div class="modal-header">
<h3>Test</h3>
</div>
<div class="modal-body">
--> This is where the content should go <--
</div>
<div class="modal-footer">
Close
</div>
</div>
What is the best way to achieve this?
Asking for the "best way" on SO is a dangerous game. There probably isn't a best. Just different approaches. I'll give you one that I use utilizing jQuery's $.load() function.
$("#myModal .modal-body").load(url);
It really is that simple. Obviously, adjust your load() function if you need to pass in parameters, provide a callback function, etc. Your controller's action would just render a template containing the HTML you want in your modal-body. This isn't really even Grails specific. This approach would work with any server side tech.