I have a Bootstrap Modal in ASP.Net with MVC 5 which I use to edit an entry on a FullCalendar javascript plugin.
_Edit.cshtml:
#model Models.CalendarEntry
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Edit Calendar Entry</h4>
</div>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="modal-body">
<div class="form-horizontal">
<h4>#Model.Title</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
#Html.HiddenFor(model => model.CalendarEntryId)
#Html.HiddenFor(model => model.PostId)
<div class="form-group">
#Html.LabelFor(model => model.Title, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Title, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Title, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.EntryDateTime, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div class="input-group" id="datetimepicker">
#Html.EditorFor(model => model.EntryDateTime, new { htmlAttributes = new { #class = "form-control" } })
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
#Html.ValidationMessageFor(model => model.EntryDateTime, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Length, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Length, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Length, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.EntryStatus, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EnumDropDownListFor(model => model.EntryStatus, htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.EntryStatus, "", new { #class = "text-danger" })
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" type="button">Cancel</button>
<input class="btn btn-primary" type="submit" value="Save" />
</div>
<script>
$(document).ready(function ()
{
$("#datetimepicker").datetimepicker();
});
</script>
}
For some reason two things are happening that I cannot figure out why.
Firstly, the glyphicon-calendar does not sit next to the input:
Secondly, when the Modal Form load, all the other fields except for the datetime field gets populated with data, until I click the calendar glyphicon, then the datetime field gets populated with the current date and time. The value from the model never gets displayed.
Web interfaces are not my forté and would appreciate any assistance.
When you create a new MVC project, it comes with a default css file(Site.css) which has some predefined css styles in it. By default, it has input field's max-width defined as 280px. That is the reason, your input groups are not working as expected.
If you remove/make adjustments to this css class in your ~/Content/Site.css, You css problem will be resolved.
turns out, that I needed to set options for the datetimepicker, more specifically, a default value it would seem like:
<script>
$(document).ready(function ()
{
$("#datetimepicker").datetimepicker(
{
defaultDate: '#Model.EntryDateTime',
showTodayButton: true,
format: 'YYYY-MM-DD HH:mm',
showClose: true,
showClear: true,
toolbarPlacement: 'top',
stepping: 15
});
});
</script>
Would you try to put an attribute:
[DataType(DataType.DateTime)]
public DateTime EntryDateTime {get; set;}
and comment the JS script?
Example
Another quick solution is to also format the date like this in your javascript:
defaultDate: '#Model.EntryDateTime.ToString("yyyy-MM-dd HH:mm")'
The solution of using the [DisplayFormat] as an attribute is just as valid if not a better solution.
<div class="container">
<div class="row">
<div class='col-md-12'>
<div class="form-group">
<span col-sm-6> #Html.Label("Date of Birth", htmlAttributes: new { #class = "control-label col-md-2" })</span>
<div class='input-group date col-sm-3' id='datetimepicker1'>
#Html.EditorFor(model => model.DateOfBirth, new { htmlAttributes = new { #class = "form-control" } })
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
#Html.ValidationMessageFor(model => model.DateOfBirth, "", new { #class = "text-danger" })
</div>
</div>
</div>
</div>
</div>
Related
How can I change the background color in main layout its now dark
and I cannot find it with navbar
I need to change the body I cannot find it
is it in the bootstrap file ?
Also how to change the text fields size and colors as well ?
This is the layout code :
<!DOCTYPE html>
<html>
<head>
<title> store system </title>
#RenderSection("head", required: false)
<meta charset="utf-8">
<title></title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="keywords">
<meta content="" name="description">
<!-- Favicon -->
<link href="img/favicon.ico" rel="icon">
<!-- Google Web Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Heebo:wght#400;500;600&family=Nunito:wght#600;700;800&display=swap" rel="stylesheet">
<!-- Icon Font Stylesheet -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.4.1/font/bootstrap-icons.css" rel="stylesheet">
<!-- Libraries Stylesheet -->
<link href=#Url.Content("/Contents/lib/animate/animate.min.css") rel="stylesheet">
<link href=#Url.Content("/Contents/lib/owlcarousel/assets/owl.carousel.min.css") rel="stylesheet">
<!-- Customized Bootstrap Stylesheet -->
<link href=#Url.Content("/Contents/css/bootstrap.min.css") rel="stylesheet">
<!-- Template Stylesheet -->
<link href=#Url.Content("/Contents/css/style.css") rel="stylesheet">
</head>
<body style="background-color:darkgray ">
<div id="spinner" class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
<div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<!-- Spinner End -->
<!-- Navbar Start -->
<nav class="navbar navbar-expand-lg bg-white navbar-light shadow sticky-top p-0">
<a href="#" class="navbar-brand d-flex align-items-center px-4 px-lg-5">
<h2 class="m-0 text-primary"><i class="fa fa-book me-3"></i>Store System</h2>
</a>
<button type="button" class="navbar-toggler me-4" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav ms-auto p-4 p-lg-0">
Home
About
Quantity
<div class="nav-item dropdown">
Setup
<div class="dropdown-menu fade-down m-0">
Our Team
Testimonial
404 Page
</div>
</div>
Contact
</div>
Join Now<i class="fa fa-arrow-right ms-3"></i>
</div>
</nav>
<i class="bi bi-arrow-up"></i>
<!-- JavaScript Libraries -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js"></script>
<script src=#Url.Content("/Contents/lib/wow/wow.min.js")></script>
<script src=#Url.Content("/Contents/lib/easing/easing.min.js")></script>
<script src=#Url.Content("/Contents/lib/waypoints/waypoints.min.js")></script>
<script src=#Url.Content("/Contents/lib/owlcarousel/owl.carousel.min.js")></script>
<!-- Template Javascript -->
<script src=#Url.Content("/Contents/js/main.js")></script>
#RenderBody()
</body>
</html>
see the image please :
enter image description here
this is the VIEW code :
#model warehouse.Models.ITEMS_STOCK
#{
ViewBag.Title = "Create";
Layout = "~/Views/Shared/_LayoutDashboard.cshtml";
}
<h2>Create</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>ITEMS_STOCK</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.BATCH_NO, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.BATCH_NO, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.BATCH_NO, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.PROD_DATE, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.PROD_DATE, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.PROD_DATE, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.EXPIRY_DATE, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.EXPIRY_DATE, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.EXPIRY_DATE, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.QUANTITY, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.QUANTITY, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.QUANTITY, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.RECEIVEDBY, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.RECEIVEDBY, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.RECEIVEDBY, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.SENDBY, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.SENDBY, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.SENDBY, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.SUPPLYERID, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.SUPPLYERID, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.SUPPLYERID, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.SUPPLYID, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.SUPPLYID, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.SUPPLYID, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.DATE, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.DATE, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.DATE, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.USER_ID, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.USER_ID, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.USER_ID, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.item_code_id, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.item_code_id, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.item_code_id, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
UPDATE :
I run the view then select inspect and select body there is one line in style.css body part :
/* background: linear-gradient(#141e30, #243b55);
I changed it in the file style.css but always show this line in inspect and no changes ?
Can I save changes from inspect ?
and why not reading changes from style.css ?
I checked the source from where its reading and changed it but its always so same color see the image please its source style.css line 443
I removed it and save but when run the view its still there !!
enter image description here
1- Try to copy the file style.css
2- paste it then change the color
<body style="background-color:red;">
3- read from new file style1.css
<!-- Template Stylesheet -->
<link href=#Url.Content("/Contents/css/style1.css") rel="stylesheet">
4- build the solution.
Try to force the coloring:
body{background-color:red !important;}
At best directly in the html, which is highest prio:
...
<body style="background-color:red !important;">
...
Put simply: I want to move the "Email" text to the right side of the textbox because my language is Persian. Therefore after writing the Persian equivalent of email, still I have problems with moving the text to the right side of the textbox.
The solutions I have tried include: moving these lines:
#Html.LabelFor(m => m.Email, new { #class = "col-md-2 control-label" })
down and bringing these lines up before them:
<div class="col-md-10">
#Html.TextBoxFor(m => m.Email, new { #class = "form-control" })
</div>
It is the only solution that works so far. But are there better and more convenient solutions?
I already have tried using dir="rtl" in both html tag and also inside p and div tags but it does not work.
Thanks
#model Website_File_Store.Models.RegisterViewModel
#{
ViewBag.Title = "Register";
}
<h2>#ViewBag.Title.</h2>
#using (Html.BeginForm("Register", "Account", FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
#Html.AntiForgeryToken()
<h4>Create a new account.</h4>
<hr />
#Html.ValidationSummary("", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(m => m.Email, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.TextBoxFor(m => m.Email, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.Password, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.PasswordFor(m => m.Password, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.ConfirmPassword, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.PasswordFor(m => m.ConfirmPassword, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" class="btn btn-default" value="Register" />
</div>
</div>
}
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
solved it by adding a css style in css style file:
.control-label {
float: right;
}
I have an MVC application that allows customers to log in and submit any queries they are experiencing, they enter their name and describe their issue.This query is then sent to our support email address via our server email, in doing so I need to include the user's logged in email address as a string in the email. I've tried a few ways but I experience run time error as the email field returns null.
My controller:This is in my controller method for the email
Email.Body = $"<p><b>Name:</b> {support.UserNameSurname}</p> <p><b>Email:</b> {support.Email=User.Identity.GetUserName()}</p> <p><b>Message:</b> {support.SupportMessage}</p>";
The View
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="col-sm-offset-3 col-sm-6">
<div class="form-horizontal">
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.UserNameSurname, "Full Name" , htmlAttributes: new { #class = "control-label col-md-3" })
<div class="col-md-9">
#Html.EditorFor(model => model.UserNameSurname, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.UserNameSurname, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.SupportMessage,"Describe Issue", htmlAttributes: new { #class = "control-label col-md-3" })
<div class="col-md-9">
#Html.TextAreaFor(model => model.SupportMessage, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.SupportMessage, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Request Help" class="btn btn-default" style="background-color: #0a9dbd;-webkit-text-fill-color: white; border-color: #0a9dbd; height: 40px; float:right;" />
</div>
<div>
#Html.ActionLink("Back to List", "CustomerView")
</div>
</div>
</div>
</div>
}
If i had to put what i wrote as an answer, you can go
public static string GetUserEmail(this HttpSessionState session)
{
if(Session["Email"] != null)
{
Session["email"] = ..Set Session email here
}
return session["Email"]
}
then you can either create a set session method or just use the Session["key"] to set the value, then you will have access to your email.
I have this in my View:
<div class="form-group">
#Html.LabelFor(model => model.Q7, new { #class = "control-label col-md-4" })
<div class="col-md-5">
#Html.EditorFor(model => model.Q7)
#Html.ValidationMessageFor(model => model.Q7)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Q8, new { #class = "control-label col-md-4" })
<div class="col-md-5">
#Html.EditorFor(model => model.Q8)
#Html.ValidationMessageFor(model => model.Q8)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Q9, new { #class = "control-label col-md-4" })
<div class="col-md-5">
#Html.EditorFor(model => model.Q9)
#Html.ValidationMessageFor(model => model.Q9)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Q10, new { #class = "control-label col-md-4" })
<div class="col-md-5">
#Html.EditorFor(model => model.Q10)
#Html.ValidationMessageFor(model => model.Q10)
</div>
</div>
The user will enter this values and I have to sum all the values and show the result in another control, how can I do this in my View? Do i have to use Javascript or can i do it in a different way?
Thanks
You can invoke jquery's .focusout() for each editor, as all your editors will have their model property name id.
> $("#Q7").focusout(function() {
> // access the values of each textbox through $( "#Qn" ).text()
// cast, validate and add
> })
I am trying to create a Modal Confirmation dialog that displays the text entered into a text box for them to review before submitting.
I have it all 'working' except for displaying the Text in the Modal. Below is my View. Notice the #Model.UserName field. That shows nothing even though, if I click Submit on that page, it has a value once it get's back to the Controller.
So, how do I display the value of that Property or the Text box that contains it?
#model HelpDeskSupportRequestor.Models.SupportRequest
<h2>IT Support Request</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.UserName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.UserName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.UserName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.EmailAddress, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.EmailAddress, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.EmailAddress, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.RequestDetails, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.RequestDetails, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.RequestDetails, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.RequestPriority, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.RequestPriority)
#Html.ValidationMessageFor(model => model.RequestPriority, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="button" data-toggle="modal" data-target="#myModal" value="Submit Request" class="btn btn-default" />
</div>
</div>
</div>
<div class="modal" id="myModal">
<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">Confirm IT Support Request</h4>
</div>
<div class="modal-body">
<p>#Model.UserName</p>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel" />
<input type="submit" class="btn btn-primary" value="Confirm" />
</div>
</div>
</div>
</div>
}
Sounds to me like you're expecting the typed in username to exist in the model (and hence the modal in the view).
Try using javascript to do that:
<script type="text/javascript">
$('#UserName').on('input', function () {
var username = $("#UserName").val();
$(".modal-body").html('<p>'+username+'</p>');
});
</script>
EDIT
In response to your comment, as you're using bootstrap and editting multiple fields,
may as well do:
$('#myModal').on('shown.bs.modal', function (e) {
var username = $("#UserName").val();
var email = $("#EmailAddress").val();
var priority = $("#RequestPriority").val();
var request = $("#RequestDetails").val();
$(".modal-body").html('<p>User Name: '+username+'</p>' +
'<p>Email Address: '+email+'</p>' +
'<p>Requested Priority: '+priority+'</p>' +
'<p>Request Details: '+request+'</p>'); });
})