I have a question , I have in my view a form, this form contains a list , this list contains four attributes , vendor , application , product and value , these 4 we display only two ( as seen in the code) would like to display in a modal product and the value of the order , the list is displayed in the same position already has such data , how do I display that data through an action of my button that has the action " getFornecedor " ( this action has not yet been implemented , I do not know if it is necessary because the elements are in the same position in the list )
View
#model Test.Models.Order
<head>
<meta charset="utf-8" />
<title>Teste</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css">
<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
#Styles.Render("~/Content/bootstrap.css")
#Scripts.Render("~/bundles/modernizr")
<style>
th {
height: 10px;
}
</style>
</head>
<body>
<div id="divbody">
<nav class="navbar navbar-inverse">
</nav>
#using (Html.BeginForm("Save", "Cab", FormMethod.Post))
{
<div class="table-responsive" id="table">
<table id="myTable" class="table table-striped" cellspacing="0">
<thead style="position:static">
<tr>
<th style="font-size:10px">SELECT</th>
<th style="font-size:10px">CONTACT</th>
<th></th>
<th style="font-size:10px">SUPPLY</th>
<th style="font-size:10px">ORDER</th>
</tr>
</thead>
#for (int i = 0; i < Model.listOrder.Count(); i++)
{
<tr>
<td align="center" height="2px">#Html.CheckBoxFor(m => m.listOrder[i].isEdit, new { #onclick = "habilit(" + i + ")", #id = "c" + i })</td>
<td colspan="2">
<a href="#Url.Action("getFornecedor", "MyController")" class="btn btn-xs btn-primary">
<i class="glyphicon glyphicon-phone-alt"></i>
</a>
<a href="#Url.Action("sendEmail", "MyController")" class="btn btn-xs btn-primary">
<i class="glyphicon glyphicon-envelope"></i>
</a>
</td>
<td height="2px"> #Html.TextBoxFor(m => m.listOrder[i].supply, new { #readonly = "readonly", #size = "18px", #class = "form-controlSupply" }) </td>
<td height="2px"> #Html.TextBoxFor(m => m.listOrder[i].order, new { #readonly = "readonly", #size = "75px", #class = "form-controlOrder" }) </td>
<td></td>
</tr>
}
</table>
</div>
<br />
<input type="submit" value="Salve" id="btn" disabled="disabled" class="btn btn-small btn-primary" />
}
</div>
</body>
</html>
MVC doesn`t have modal on fly .. (like control in web forms for example) i suggest you to use third party library , may be something like jquery UI .. You can see example here : https://jqueryui.com/dialog/
You just need client side event to show modal dialog. In that container you can put any data that you want.
Related
I need to add a login popup to the header of every page, so naturally I want to add it to the layout as a partial view.
The problem is, the layout doesnt have a pagemodel.
We do use a BasePageModel that every page inherits from, where I can add 2 strings for username/password. But how would the layout see those fields?
You can specify a model for the Layout page just as you would a standard content page:
#model BasePageModel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
...
Then your properties are accessible via the Model property of the Layout page. The BasePageModel will also be passed to any partials that you add to the layout (unless you specify a different model for the partial), so you can also access the properties in those.
I need to add a login popup to the header of every page, so naturally
I want to add it to the layout as a partial view.
According to your description, I do a demo for that situation. But I don’t use a BasePageModel that every page inherits from.
The demo as below, hoping it can help you.
1.Add a Login page with page model, and post method
Login.cshtml.cs:
public class LoginModel : PageModel
{
[BindProperty]
public string Username { get; set; }
[BindProperty]
public string Password { get; set; }
public string Msg { get; set; }
public void OnGet()
{
}
public IActionResult OnPost(string Username, string Password)
{
//do your other things...
return Page();
}
}
Login.cshtml:
#page
#model Login.Pages.LoginModel
#{
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Login</title>
</head>
<body>
<h3>Login Form</h3>
#Model.Msg
<form method="post" asp-page="Login">
<table>
<tr>
<td>Username</td>
<td><input type="text" asp-for="#Model.Username" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" asp-for="#Model.Password" /></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Login" /></td>
</tr>
</table>
</form>
</body>
</html>
Add the login form in the layout. Using name attribute: change input type="text" asp-for="#Model.Username" into input type="text" name="Username"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
</ul>
</div>
<div>
<fieldset>
<div class="container">
<div class="row">
<div class="col-xs-12">
<button id="btnShowModal" type="button"
class="btn btn-sm btn-default pull-left col-lg-11 button button4">
login
</button>
<div class="modal fade" tabindex="-1" id="loginModal"
data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
</div>
<div class="modal-body">
<form method="post" asp-page="Login">
<table border="0" cellpadding="2" cellspacing="2">
<tr>
<td>Username</td>
<td><input type="text" name="Username"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="Password"></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Login"></td>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2021 - Login - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
<script type="text/javascript">
$(document).ready(function () {
$("#btnShowModal").click(function () {
$("#loginModal").modal('show');
});
$("#btnHideModal").click(function () {
$("#loginModal").modal('hide');
});
});
</script>
</body>
</html>
Results:
I was trying to make an accordion in my page with this tutorial but nothing works. This is my view:
#model SGP.Models.Queries
#Scripts.Render("~/bundles/jqueryui")
<script type="text/javascript">
$(function () {
$("#accordion").accordion();
});
</script>
<div id="accordion">
<h3>Assiduidade</h3>
<div>
#using (Html.BeginForm())
{
<table>
<tr>
<th>
#Html.DisplayName("Nome")
</th>
...
</tr>
#foreach (var item in Model.query1)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Nome)
</td>
...
</tr>
}
</table>
}
</div>
<h3>Avaliação</h3>
<div>
#using (Html.BeginForm())
{
<table>
<tr>
<th>
#Html.DisplayName("Nome")
</th>
...
</tr>
#foreach (var item in Model.query2)
{
<tr>
...
</tr>
}
</table>
}
</div>
</div>
This is my _Layout.cshtml:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - SGP</title>
...
#Styles.Render("~/Content/fullcalendar")
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<header>
...
</header>
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© #DateTime.Now.Year
</div>
</div>
</footer>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#Scripts.Render("~/Content/themes/base/css", "~/Content/css")
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/bundles/fullcalendar")
#RenderSection("scripts", required: false)
</body>
</html>
But when i run my application, there is no accordion. I added the jQuery-ui.css and the code in the BundleConfig like it says in the tutorial but nothing works. What am i doing wrong? Thanks
All you need is to include jquery plugin and jquery-ui.css in your view.
Another solution is to set layout in top of view.
#{
Layout="~/your_layout_path";
}
Here is an example of working solution
how to replace the coding in the finePrint?
that large textArea i call "finePrint"...
this is my problem...i am confusing..
when i filled with HMTL's coding..with ${name} on gsp..
like this..
look the arrow...thats have a button submit at below finePrint..when i click that...
the g:textField of "Your Name" thats i fill with "Bobby"..it will be replace in the finePrint with ${name}..
this ini my gsp coding where i fill it to finePrint..
<table align="center" >
<tbody>
<tr style="border-spacing:0!important;border-collapse:collapse!important;color:#666666;background-color:#F8F8F8" align="center">
<td style="padding:35px 75px 60px 75px;background-color:#fafafa;">
<table style="border-spacing:0!important;border-collapse:collapse!important;color:#666666;" width="80%">
<tbody>
<tr>
<td>
<p align="center"><img alt="Tempo AI" border="0"/></p>
<h1 style="font-family:Arial,Helvetica,sans-serif;color:#ee710b;font-size:30px;font-weight:normal;width:450px">${name}, you requested to reset your Password</h1>
<p style="padding:0;margin:0 0 15px 0;">To reset your password, just click the link below.</p>
<p style="padding:0;margin:0 0 15px 0;">Reset Password</p>
<p style="padding:0;margin:0;">Best,</p>
<p style="padding:0;margin:0;color:#bcbcbc;font-size:20px;">Tempo Team</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="font-family:Arial, Helvetica, sans-serif;padding-top:15px;" align="center" >
<td style="font-family:Arial, Helvetica, sans-serif;padding-top:15px;" align="center">
<p style="margin-top:0;margin-bottom:10px;">
<a href="http://www.facebook.com" style="text-decoration:none;">
<img alt="Facebook" border="0"/>
</a>
<a href="http://www.twitter.com" style="text-decoration:none;">
<img alt="Twitter" border="0"/>
</a>
<a href="http://www.plus.google.com" style="text-decoration:none;">
<img alt="Google+" border="0"/>
</a>
<a href="http://www.mail.yahoo.com" style="text-decoration:none;">
<img alt="Email" border="0"/>
</a>
</p>
<p style="margin-top:0;margin-bottom:8px;font-size:12px;font-weight:bold;">
<a style="color:#666666;text-decoration:none;">
ABOUT
</a>
<a style="color:#666666;text-decoration:none;">
PRIVACY
</a>
<a style="color:#666666;text-decoration:none;">
TERM OF USE
</a>
</p>
<p style="padding:0;margin:0;font-size:10px;color:#999999;font-weight:bold;">
If you would like to change your email notification settings
<a style="color:#44b1d9;" href="www.w3school.com">click here</a>
</p>
<p style="padding:0;margin:0;font-size:10px;color:#999999;font-weight:bold;">
© 2012 Tempo
</p>
</td>
</tr>
</tbody>
</table>
and this is my SMTP coding when i click submit..it will send email to abc#yahoo.com
def send = {
sendMail {
multipart true
to params.email
from "s_yoshitsune#yahoo.com"
subject "Test Reset Password"
html params.finePrint
}
render params.finePrint
}
and the result when i received email..
i want the ${name} replaced by my name(Bobby) where i fill before
this is coding for submit email address..
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main"/>
<g:javascript src='jquery-1.6.2.min.js'/>
<g:javascript src='jquery.cleditor.min.js'/>
<g:javascript src='test.js'/> <%-- cara import file JavaScript/ JS --%>
<link rel="stylesheet" href="${resource(dir: 'css', file: 'cleditor/jquery.cleditor.css')}" type="text/css"> <%-- cara import file CSS --%>
<title>Reset Password</title>
</head>
<body>
<g:form action="send">
<table style="width:500px">
<tbody>
<tr>
<td>Your Email Address </td>
<%-- <td><input style="width:250px" name="email" /></td>--%>
<td><g:textField style="width:250px" name = "email"/></td>
</tr>
<tr>
<td>Your Name</td>
<td><g:textField style="width:250px" name = "user"/></td>
</tr>
<tr>
<td colspan="4">
<g:textArea name="finePrint"/>
</td>
</tr>
<tr>
<td><input type="submit"/></td>
</tr>
</tbody>
</table>
</g:form>
<div id="finePrintBlank" style="display:none;" title="${message(code: 'campaign.finePrint.label')}">
<p>${message(code: 'default.blank.message', args: [message(code: 'campaign.finePrint.label')])}</p>
</div>
</body>
</html>
In the gsp page, you can prepopulate finePrint with your html code like this,
<g:textArea name="finePrint">
<table align="center" >
<tbody>
...etc...
${name}, you requested to reset your password.
...rest of the data...
</tbody>
</table>
<g:textArea>
That will be processed on the server side and you should have your the name resolved before it reached the client.
...etc...
${domainInstance.name}, you requested to reset your password.
...rest of the data...
We just moved an ASP MVC intranet website onto a local server and are experiencing something weird with the pics used on one page. For some reason, the URL contains an extra subfolder. What's weird about this is that this is that it's a URL that's used in the "master template" page, yet no other page is displaying this oddity. This is
Theses are the two pics in question:
<img src="../../Content/images/Monet3.png" id="MonetSig" />
<img src="../../Content/images/TEST2body_top.png" id="topPic" alt="tag"/>
When I bring up the developer tools in Chrome I get the following error messages for both pics:
GET http://insideapps.dev.company.com/Monet/Monet/Content/images/Monet3.png 404 (Not Found)
GET http://insideapps.dev.company.com/Monet/Monet/Content/images/TEST2body_top.png 404 (Not Found)
Again, no other pages display this error.
Here is a copy of the master layout for the site:
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script language="javascript">
function DoFun() {
}
</script>
</head>
<body>
#using Monet.Common
<div class="page">
<header>
<div style="margin: 10px;" id="Logo">
<img src="../../Content/images/Monet3.png" id="MonetSig" />
</div>
#* </a>*#
#* <div id="logindisplay">
#Html.Partial("_LogOnPartial")
</div>*#
<nav>
<ul id="menu">
<li>#Html.MenuLink("Agents", "Index", "Agent")</li>
<li>#Html.MenuLink("Products", "Index", "Product")</li>
<li>#Html.MenuLink("Product Training", "Index", "Course")</li>
<li>#Html.MenuLink("Continuing Ed", "Index", "ContEdCourse")</li>
<li>#Html.MenuLink("Help", "About", "Home")</li>
</ul>
</nav>
</header>
<img src="../../Content/images/TEST2body_top.png" id="topPic" alt="tag"/>
<section id="main">
#RenderBody()
</section>
<footer>
</footer>
</div>
</body>
</html>
Just in case, here is the Index.cshtml for the page in question
#model IEnumerable<Monet.Models.FollowUpItems>
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="#Url.Content("~/Scripts/jquery.tablesorter.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#thetable").tablesorter();
}
);
function GetNotes(id) {
$('#' + id).dialog();
}
function GetMisc(id) {
var target = id + "Misc";
$('#' + target).dialog();
}
</script>
<h2>Follow Up Items</h2>
#using (Html.BeginForm())
{
<span id="searchBox" class="boxMe" >
<form method="post">
<select name="Table" title="Table" style="font-size:8pt;">
<option value="%">--Table Name--</option>
<option value="AgentContEd">CE</option>
<option value="AgentProductTraining">PT</option>
</select>
<select name="IssueType" style="font-size:8pt;">
<option value="%">--Issue Type--</option>
<option value="W">Warning</option>
<option value="E">Error</option>
</select>
<select name="Status" style="font-size:8pt;">
<option value="%">--Status Type--</option>
<option value="O">Open</option>
<option value="U">Under Review</option>
</select>
<input type="image" src="#Url.Content("~/Content/Images/Filter.bmp")" alt="Filter" style="padding-top: 0px;" />
</form>
</span>
<br />
<br />
<span id="programExplanation" style="width: 500px; float:left; padding: 5px; margin-left: 25px;"></span>
<span class="error" style="clear: both;">
#ViewBag.ErrorMessage
</span>
<span class="msg">
#ViewBag.Message
</span>
<br />
<br />
<br />
}
<table>
<tr>
<th>
Table
</th>
<th>
Issue
</th>
<th>
Status
</th>
<th>
Message
</th>
<th>
CreatedBy
</th>
<th>
CreatedOn
</th>
<th>
Key1
</th>
<th>
Key2
</th>
<th>
Notes
</th>
<th>
Misc.
</th>
<th></th>
</tr>
#foreach (var item in Model.Where(i => i.Status != "C" && i.IssueType != "S"))
{
var note = string.Empty;
if (!String.IsNullOrWhiteSpace(item.Notes))
{
note = item.Notes.ToString();
}
var id = item.Id;
var target = id + "Misc";
<tr>
<td>
#if (!String.IsNullOrWhiteSpace(item.TableName))
{
if (item.TableName.Equals("AgentContEd"))
{
#Html.Raw("CE");
}
else if (item.TableName.Equals("AgentProductTraining"))
{
#Html.Raw("PT");
}
else
{
#Html.DisplayFor(modelItem => item.TableName)
}
}
</td>
<td>
#Html.DisplayFor(modelItem => item.IssueType)
</td>
<td>
#Html.DisplayFor(modelItem => item.Status)
</td>
<td>
#Html.DisplayFor(modelItem => item.Message)
</td>
<td>
#Html.DisplayFor(modelItem => item.CreatedBy)
</td>
<td>
#Html.DisplayFor(modelItem => item.CreatedOn)
</td>
<td>
#Html.DisplayFor(modelItem => item.Key1)
</td>
<td>
#Html.DisplayFor(modelItem => item.Key2)
</td>
<td>
#if (!String.IsNullOrWhiteSpace(item.Notes))
{
<span id="notes" onclick='GetNotes(#id);'>
<img src="#Url.Content("~/Content/images/magnify.gif")" alt="Show Notes" />
</span>
}
<div id="#id" title="Notes" style="display:none;">
#Html.DisplayFor(modelItem => item.Notes)
</div>
</td>
<td>
#if (!String.IsNullOrWhiteSpace(item.LastUpdateBy) || !String.IsNullOrWhiteSpace(item.LastUpdateOn.ToString()))
{
<span id="misc" onclick='GetMisc(#id);'>
<img src="#Url.Content("~/Content/images/magnify.gif")" alt="Show Notes" />
</span>
}
<div id="#target" title="Misc" style="display:none;">
#Html.DisplayFor(modelItem => item.LastUpdateBy)
#Html.DisplayFor(modelItem => item.LastUpdateOn)
</div>
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.Id })
</td>
</tr>
}
</table>
Always use heleprs when dealing with urls in an ASP.NET MVC application and never hardcode them as you did.
So:
<img src="#Url.Content("~/Content/images/Monet3.png")" id="MonetSig" />
<img src="#Url.Content("~/Content/images/TEST2body_top.png")" id="topPic" alt="tag" />
and if you are using WebPages v2.0 (which is the default in ASP.NET MVC 4) you could do this:
<img src="~/Content/images/Monet3.png" id="MonetSig" />
<img src="~/Content/images/TEST2body_top.png" id="topPic" alt="tag" />
The Url helper will take care of generating proper url to the resource no matter where and how your application is hosted.
I have option of photo upload in my create.gsp page. I'm able to see the uploaded photo in my create page and able to upload my photo in database, but cannot see that photo in my show page.
This is create.gsp page
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="layout" content="billing-without-grid" />
<g:set var="entityName"
value="${message(code: 'skeletonBill.label', default: 'SkeletonBill')}" />
<title><g:message code="default.create.label"
args="[entityName]" /></title>
<script>
function showPhoto(imageFile) {
var fileReader = new FileReader();
var image = document.getElementById("uploadPhotoFile");
fileReader.onload = function(e) {
image.src = e.target.result;
}
fileReader.readAsDataURL(imageFile.files[0]);
}
</script>
</head>
<body>
<div class="body">
<div class="container-fluid">
<div class="row">
<div class="span6">
<img src="" name="uploadPhotoFile" id="uploadPhotoFile"
height="200" width="160" />
<table style="width: 25%">
<tbody>
<tr class="prop">
<td valign="top" class="name"><label for="uploadPhoto"><g:message code="uploadInformation.uploadPhoto.label" default="Upload Photo" /></label></td>
<td valign="top" class="value ${hasErrors(bean: uploadInformationInstance, field: 'uploadPhoto', 'errors')}">
<input type="file" id="uploadPhoto" name="uploadPhoto" onchange="showPhoto(this)" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html> '
Domain class that I created
class UploadInformation {
static constraints = {
uploadPhoto(nullable:true, maxSize: 16384 /* 16K */)
}
byte[] uploadPhoto
static transients = ["uploadPhoto"]
static mapping = {
uploadPhoto column:"uploadPhoto",sqlType: "blob"
}
}
Anuj.
The problem I see after quick look at your code is:
static transients = ["uploadPhoto"]
UploadPhoto will not be saved to database because it's declarated as transient.
See more details transient properties