I am trying to build my own mailer controller to handle custom email generation.
I have a default layout mailer that handles all the common parts of the mail template.
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>#ViewBag.Title</title>
</head>
<body>
<header style="width: 100%; height: auto; padding: 20px 20px 10px 20px; border-collapse: collapse; border-spacing: 0; background-color: #eee; color: #555 !important; ">
<h1 style="margin-top: -10px; margin-bottom: 0;height:80px; ">
<img style="float:left;" src="https://mylogoimage" alt="logo" />
<span style="padding: 30px 0 0 10px; float: left; color: #555 !important; font-size: 28px;"> Confirm Registration</span>
<a style="padding: 35px 40px 0 0; float: right; color: #555 !important; font-size: 14px;" href="#">View in Browser</a>
</h1>
</header>
<div id="emailbodytext">
#RenderBody()
</div>
<footer style="background-color: #eee; color: #555 !important; height:50px;padding-top:10px;">
<p style="margin-left:25px;">
<strong><span style="font-size:1em;font-style:italic;">You are receiving this email because you registered an account at TraderToolkit.com</span></strong>
<img style="float:right;margin-right:25px;padding-bottom:10px;" src="https://mylogoimage" alt="logo" /><br />
</p>
</footer>
</body>
</html>
I created a Registration view that uses the layout shown above. Which VS generates as;
#{
Layout = "~/Views/Mailers/_LayoutMailer.cshtml";
}
I then add my model to reference
#model EmailViewModels.RegistrationConfirmOutputViewModel
VS2015 is fine with all that. Then I add the html for the view.
<section style="font-size:1.1em;">
<h3 style="margin-left: 10px;">Greetings #model.FullName,</h3>
<p style="margin-left: 25px;">
You (or someone else) entered this email address to register an account at #model.ApplicationName.<br /><br/>
The request was sent from this IPAddress -- <span style="font-size:1.15em;font-weight:bold;">#model.IpAddress</span>.
<br />
The approximate geographic location from where this request was sent is <span style="font-size:1.15em;font-weight:bold;">#model.IpLocation</span>.
<br /><br />
If you sent the request and wish to confirm your registration please click the button below to complete your registration
<br />
#Html.ActionLink("Confirm Registration", "ConfirmRegistration", "Account", new { parameters = #model.UserId }, null)
<br /><br />
If you feel your email account has been compromised please take the appropriate steps to secure your account.<br />
Please click the button below so we can remove this registration request.<br />
#Html.ActionLink("Delete Request", "ChangePassword","Account",new { parameters = #model.UserId },null)
<br /><br />
Thank you.<br />
The staff at #model.ApplicationName
</p>
And this is where it falls apart. Layout, in the declaration is now red as are every reference to #model. Error now says :
Cannot resolve symbol Layout
None of the #model properties exist in current context.
Is there something about views that use a layout that cannot use a model reference? I am new to learning MVC and not sure how to proceed.
Also, am I using the Html.ActionLink properly because #Html is in red as well.
Update
I tried recreating the view by referencing the viewmodel in the view create dialog (referencing the application ocntext too) by that wouldnt create the view saying there was no key defined in the entity (RegistrationConfirmationOutputViewModel). Why would a viewmodel need a key? Does that view create dialog only reference Domain models?
Related
I'm sending an html formatted responsive email to my clients after they sign up from my .net MVC app. My problem is that the picture which in this case is my logo doesn't get centered no matter what css or bootstrap class I apply to it. It looks fine when rendering on a computer or even in another different mail client on ios. The problem seems to be the default mail app. Here is how it is showing. The first picture is how it appears on the mail app and the second picture is how it appears on a desktop which displays correctly. Please note that the white text is the picture. The purple background is just a div that I made purple.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Welcome To Church Musician!</title>
<style>
.header {
background-color: darkviolet;
height: 200px;
max-width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.container{
background-color: white !important;
}
body{
background-color: whitesmoke !important;
}
</style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container" >
<div class="header">
<img class="img-fluid"src="cid:id1" />
</div>
<hr />
<p>This is a test</p>
</div>
</body>
</html>
I created a custom css button class in my site.css file in an asp.netcore mvc web application. For some reason, this styling does not show up when I try to use it in a cshtml view. I've tried adding the link, and I've tried adding the style to the Layout page, neither of them work? What am I missing?
My site.css file has this custom button class.
.custom-button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
This is what my view looks like.
#{
ViewData["Title"] = "PlaylistBuilder";
}
<head>
<link rel="stylesheet" href="~/css/site.css" />
</head>
<center>
<h2>PlaylistBuilder</h2>
<input type="button" class="custom-button" value="Create Playlist with your top songs" onclick="location.href='#Url.Action("TopSongCreator", "Playlist")'" />
<input type="button" class="custom-button" value="Create Playlist with recently played songs" class="btn" onclick="location.href='#Url.Action("RecentlyPlayed", "Playlist")'" />
</center>
Tried the first comment, still doesn't work. This is what my view looks like now. Do I need to change something in the layout file?
#{
ViewData["Title"] = "PlaylistBuilder";
}
<link rel="stylesheet" href="#(Url.Content("~/css/site.css"))" />
<center>
<p style="font-family:'Arial'; font-size:72px; font-weight:bold">
Playlist Builder
</p>
<input type="button" value="Create Playlist with your top songs" class="custom-button" onclick="location.href='#Url.Action("TopSongCreator", "Playlist")'" />
<input type="button" value="Create Playlist with recently played songs" class="custom-button" onclick="location.href='#Url.Action("RecentlyPlayed", "Playlist")'" />
</center>
That view is inserted into the middle of the body element somewhere. It would malform the HTML to place a head element there, and as such the link doesn't act like you are expecting it to.
In addition, the tilde (~) is relevant to razor's helper, and doesn't mean relative to the project's top scope in normal href attributes. You should still use the helper here.
Remove the <head> element definition and just use the link. Use the helper.
<link rel="stylesheet" href="#(Url.Content("~/css/site.css"))" />
I am using the bootstrap wsywyg editor but I am having problems in .net getting its values. I am Running the editor in my asp.net webpage with materpage with the following markup
<div class="box">
<div class="box-header">
<h3 class="box-title">Bootstrap WYSIHTML5 <small>Simple and fast</small></h3>
<!-- tools box -->
<div class="pull-right box-tools">
<button class="btn btn-default btn-sm" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
<button class="btn btn-default btn-sm" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>
</div><!-- /. tools -->
</div><!-- /.box-header -->
<div class="box-body pad">
<textarea id="txtDescription" name="txtDescription" class="textarea" placeholder="Place some text here" style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
</div>
</div>
</div>
Howver I have treid the following to gain access to the text behind code
Request.Form["txtDescription"] But the Value is null baring in mind my entire page is wrap in the following code.
<form id="main" runat="server">
<asp:ContentPlaceHolder ID="cptUniteCmsContent" runat="server">
</asp:ContentPlaceHolder></form>
Just wondering if anyone else new how to gain access to it. Must I referance my masterpage some how as If I try to use find control it does not work.
You need to indicate runat="server" for each of your controls.
For instance:
<textarea id="txtDescription" name="txtDescription" class="textarea" placeholder="Place some text here" style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
Needs to be changed to:
<textarea id="txtDescription" name="txtDescription" class="textarea" placeholder="Place some text here" style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;" runat="server"></textarea>
Im converting a large MVC 2 application to MVC 4. I dont necessarily want to use Razor right now, i just want to migrate it and deal with the Razor subsequently. I can change this a bit of the time.
However, i have a problem with the forms:
<%# Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body style="padding-top: 50px">
<% using (Html.BeginForm())
{ %>
<div id="LoginContainer" style="margin: auto; width: 960px;">
<div style="margin: auto; width: 400px">
<img src="/Content/Images/logo.png" width="400" alt=""
style="margin-top: 50px; margin: auto" />
</div>
<table style="width: 310px; margin: auto;">
<tr>
<td>
<div style="font-family: Verdana; font-size: small; color: #333333">
Username</div>
<input type="text" name="username" style="border: 1px solid #333333; padding: 5px;
background-color: #ffffff; width: 300px;" />
</td>
</tr>
<tr>
<td>
<div style="font-family: Verdana; font-size: small; color: #333333">
Password</div>
<input type="password" name="password" style="border: 1px solid #333333; padding: 5px;
background-color: #ffffff; width: 300px;" />
</td>
</tr>
<tr>
<td>
<%= Html.CheckBox("rememberMe")%>
<label style="font-family: Verdana; font-size: small" for="rememberMe" class="logintext">
Remember me?</label><br />
<input class="loginbutton" type="submit" value="Log On" style="padding: 5px; width: 100px;
background-image: url('/content/images/button_bg.png'); border: 1px solid gray;
color: White" />
</td>
</tr>
</table>
</div>
<div id="LoginControl">
</div>
<div style="width:500px;margin:auto;color:#666;font-size:xx-small;text-align:center;font-family:verdana;margin-top:50px;">
</div>
<%if (ViewData["LoginError"] != null)
{ %>
<div id="LoginError" style="margin-top:50px;">
<%= Html.ValidationSummary("Login was unsuccessful. Please correct the errors and try again.")%>
</div>
<%}
} %>
</body>
</html>
The Html.BeginForm(), and in fact all the controls, reports the following errors:
'System.Web.Mvc.HtmlHelper<object>' does not contain a definition for 'ValidationSummary' and no extension method 'ValidationSummary' accepting a first argument of type 'System.Web.Mvc.HtmlHelper<object>' could be found (are you missing a using directive or an assembly reference?)
'System.Web.Mvc.HtmlHelper<object>' does not contain a definition for 'CheckBox' and no extension method 'CheckBox' accepting a first argument of type 'System.Web.Mvc.HtmlHelper<object>' could be found (are you missing a using directive or an assembly reference?)
'System.Web.Mvc.HtmlHelper<object>' does not contain a definition for 'BeginForm' and no extension method 'BeginForm' accepting a first argument of type 'System.Web.Mvc.HtmlHelper<object>' could be found (are you missing a using directive or an assembly reference?)
When i check out the "HTML" helper i dont see the methods i refer at all in the method list. What am I missing?
I'm having a difficult time finding a solution to my problem that relates to asp:Menu control and centering in a page. I'm really surprised all the solutions I search on Google are either not using asp:Menu control or just using lists or tables only.
I know margin:0 auto` and adding a width works but when I put it for the menu control I can't get it working.
This is my master page:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server"></asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div id="PageWrapper">
<header></header>
<nav>
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" StaticEnableDefaultPopOutImage="false" DataSourceID="dsSiteMap" CssClass="MainMenu" />
<asp:SiteMapDataSource runat="server" ID="dsSiteMap" ShowStartingNode="false" />
</nav>
<section id="MainContent">
<asp:ContentPlaceHolder id="cpMainContent" runat="server"></asp:ContentPlaceHolder>
</section>
<footer></footer>
</div>
</form>
</body>
</html>
CSS:
body
{
margin: 0;
background-color: gray;
}
#PageWrapper
{
width: 1366px;
background-color: white;
margin: auto;
}
nav
{
width: 1366px;
height: 36px;
background-color: seagreen;
}
nav a
{
color: #fff;
}
.MainMenu
{
border: 1px solid #999999;
width: 1366px;
height: 19px;
background-color: #555555;
}
ul.level1
{
display: block;
width: 300px;
text-align: center;
margin: 0 auto;
}
Sitemap:
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="~/">
<siteMapNode url="~/Default.aspx" title="Home" description="Go to the homepage" />
<siteMapNode url="~/NewTicket.aspx" title="New Ticket" description="Create a new ticket" />
<siteMapNode url="~/Search.aspx" title="Search" description="Search tickets" />
</siteMapNode>
</siteMap>
Funny thing is when I create a label and place it in a placeholder, margin: 0 auto and width: auto works in centering.
Thank you everyone.
I finally was able to figure it out.
I edited the styling to my nav parent element:
nav{
clear: both;
text-align: center;
display: table;
margin: 0 auto;}
So instead of having it displayed as a block I set it as a table. Funny thing is it is still rendered as a list.
I have it to clear because I have elements before it that was floated to the left.
I definitely learned a lot more about CSS with this issue.
Kind of crazy for so much trouble just for one styling. Surprised
I don't remeber the generated markup for asp:menu but I think the problem is in your .MainMenu selector, you are defining it with width: 1366px; what maches the nav width, so even if you set margin-right/left auto it won't work.
To center it you can or you set a width smaller than its parent's or you can set display: inline-block; for the menu and text-align:center; in the nav.
Example for the two options: http://jsfiddle.net/T9SvT/
I duplicated your example above. #PageWrapper is 1366px wide and centered on the page. It contains the Menu control which is also 1366px wide and its cells are spaced evenly across the width. I tested this in Chrome and IE9. I only have 3 items in my sitemap, however. That may be related to your problem: how wide is the menu?
Keep in mind that asp:Menu renders as an HTML table, so when you apply a style to it, that is basically what you are working with. I would recommend sizing the <nav> area to where you want the Menu to be and simply making the Menu fill that space with Width="100%".
Certainly "float" should not be necessary.