I am trying to send an email with a logo image.
But log is not displayed in outlook on browser.
But works on book-mail app (outlook). I can see the image on this application
And works fine in Gmail(both app & browser) too.
In outlook
<img blockedimagesrc="/mysite/image/logo.png"/>
It shows blockedimagesrc instead of src
This is my function to send mail
public void HandleSendMail(string subject, string body, string to)
{
var host = _config.GetSection("Email:HOST").Value;
var port = _config.GetSection("Email:PORT").Value;
var username = _config.GetSection("Email:Credentials:Username").Value;
var password = _config.GetSection("Email:Credentials:Password").Value;
var toEmail = to;
using var mm = new MailMessage("noreply#xyz.com", toEmail);
mm.Subject = subject;
mm.IsBodyHtml = true;
mm.Body += body;
using var smtp = new SmtpClient
{
Host = host,
Port = int.Parse(port),
EnableSsl = true,
Credentials = new NetworkCredential(username, password),
};
try
{
smtp.Send(mm);
}
catch (Exception ex)
{
Console.WriteLine("Exception caught in Creating Message(): {0}",
ex.ToString());
}
}
Image tag
<img id="logo" style="width:100px; height: 100px;" class="logo" src="https://ik.imagekit.io/something-/bfd72a78e706.png?tr=w-200,h-200" alt="whv-logo ">
Please help me to fix this.
Thanks in advance
I had to think really hard, where did I solve this problem you mention. You have to add linked resources to your mail message like this.
AlternateView alternateView = AlternateView.CreateAlternateViewFromString(GetHtmlNotification(), null, "text/html");
alternateView.LinkedResources.Add(GetLinkedResrouce($"{BaseDirectory}/content/images/logo/{School}/logo.png", "logo"));
alternateView.LinkedResources.Add(GetLinkedResrouce($"{BaseDirectory}/content/images/logo/wur/W_internet.png", "wlogo"));
mailMessage.AlternateViews.Add(alternateView);
/// <summary>
/// Get a Html Notification with header body and footer from a template
/// </summary>
private string GetHtmlNotification()
{
var fullTemplateName = Path.Combine(BaseDirectory, "EmailTemplates", $"{NotificationTemplateName}.cshtml");
var template = File.ReadAllText(fullTemplateName);
Engine.Razor.AddTemplate($"{School}layout", GetLayout());
var result = Engine.Razor.RunCompile(template, "key", null, this);
return result;
}
/// <summary>
/// Get the school specific layout for the email.
/// </summary>
private string GetLayout()
{
var fileName = Path.Combine(BaseDirectory, "EmailTemplates", "Layout", $"_{School}Layout.cshtml");
return File.ReadAllText(fileName);
}
And in our template
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="nl-NL" xml:lang="nl-NL" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="emailTemplateType" content="Your-Organization-NL" />
<meta name="emailTemplateVersion" content="3.4" />
</head>
<body style="width:100% !important;margin:0;padding:0;background-color:#ececec;font-family:Arial,Helvetica Neue,Helvetica,sans-serif;color:#333333;font-size:14px;line-height:18px">
<body>
<table cellpadding="0" cellspacing="0" align="center" border="0" width="640" style="border:1px solid #d6d6d6;background-color:#ffffff;margin-bottom:20px">
<tr>
<td>
<table>
<tr>
<td style="padding:20px">
<img src="cid:logo" height="55" style="outline:none;text-decoration:none;-ms-interpolation-mode:bicubic" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table style="width: 100%; background-color: #34B233; text-align: left;">
<tr>
<td style="padding-left: 8px; color: #FFFFFF;">
<h2>#Model.Subject</h2>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 8px;">
#Raw(Model.Body)
</td>
</tr>
<tr>
<td>
<table height="120px" style="height: 120px; width: 100%; background-color: #34B233; text-align: left;">
<tr>
<td style="padding:20px">
<a href="http://www.your.url" style="padding-left: 8px; color: #FFFFFF; text-align: left;">
<img title="Your organization" class="left logo" alt="Your organiaztion" src="cid:wlogo" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</body>
</html>
The images will be embedded in the email.
I'm trying to receive Business Account info through the rest API. I try with a filter and without the filter. It is using the default end point and the default BusinessAccount. The results of both runs are below after the code.
My code to get the Acumatica content
public async void GetCustomersActivitiesAsync(int top, string filterOperation, string filter)
{
string url = settings.url + settings.endpoint + "BusinessAccount";
string parametersFilter = "&$filter=BusinessAccount eq 'ABARTENDE'";
var uri = new Uri(url + parametersFilter);
try
{
var response = await client.GetAsync(uri);
if (response.IsSuccessStatusCode)
{
var content = await response.Content.ReadAsStringAsync();
}
else
{
err = await response.Content.ReadAsStringAsync();
try
{
ResponseMessage msg = JsonConvert.DeserializeObject<ResponseMessage>(err);
if (msg != null && msg.exceptionMessage != "") err = msg.exceptionMessage;
}
catch (Exception ex)
{
err = ex.Message;
}
}
}
catch (Exception ex)
{
Debug.WriteLine(#" ERROR {0}", ex.Message);
err = ex.Message;
}
}
When I run the filter it fails auto manically
When I do a filter it returns this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"><link href="/A000/Content/font-awesome.css?timestamp=636698449900000000" type="text/css" rel="stylesheet" /><link href="/A000/App_Themes/Default/00_Controls.css?timestamp=636698449900000000" type="text/css" rel="stylesheet" /><title>
Error Has Occurred
</title><meta http-equiv="content-script-type" content="text/javascript" />
<style type="text/css">
.main
{
padding-left: 40px;
padding-right: 20px;
padding-top: 30px;
font-family: Arial;
}
.errCode
{
padding-bottom: 20px;
font-family: Arial;
font-size: 15pt;
}
.errMsg
{
font-size: 12pt;
}
.img
{
float: left;
margin-right: 10px;
}
.nxtSt
{
margin-top: 30px;
font-family: Arial;
font-size: 15pt;
}
.navTo
{
margin-top: 10px;
margin-left: 20px;
}
.errPnl
{
padding: 10px;
padding-top: 15px;
}
.grayBox
{
border: solid 1px #CCC;
background-color: #F9F9F9;
padding-top: 20px;
padding-bottom: 25px;
padding-left: 10px;
padding-right: 20px;
}
.traceLnk
{
margin-top: 20px;
}
</style>
<style type="text/css">
.frmBottom_CaptionL { background-position:left top;width:5px; }
.frmBottom_CaptionR { background-position:right top;width:5px; }
.frmBottom_CaptionM { }
</style></head>
<body>
<form name="form1" method="post" action="./Error.aspx" id="form1">
<input type="hidden" name="__RequestVerificationToken" id="__RequestVerificationToken" value="Aq4LEYY5T50IzZfjFHxJWWVP0lq4kLBG-ljIPF3eUYBdBo3UHLHNgHdHF8YW9hpS3nHqiATSFrDybUkJvaXapM_ZItg1" />
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="frmBottom_state" id="frmBottom_state" value="" />
<input type="hidden" name="__SmartPanelVisible" id="__SmartPanelVisible" value="" />
<input type="hidden" name="L10nEditor_state" id="L10nEditor_state" value="" />
<input type="hidden" name="inputBox_state" id="inputBox_state" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="" />
<script type="text/javascript">
//<![CDATA[
var __appPath = '/A000/';var __nodePath="";var __nodeGuid="00000000-0000-0000-0000-000000000000";//]]>
</script>
<script src="/A000/PX.ScriptBatch.axd?d=cFBYLldlYi5VSXxQWC5XZWIuVUkuRXh00&t=636698318120000000" type="text/javascript"></script>
<script src="/A000/PX.ScriptBatch.axd?d=cFBYLldlYi5VSXxQWC5XZWIuVUkuQmFzZQ2&t=636698318120000000" type="text/javascript"></script>
<script src="/A000/PX.ScriptBatch.axd?d=cFBYLldlYi5VSXxQWC5XZWIuVUkuRWRpdA2&t=636698318120000000" type="text/javascript"></script>
<script src="/A000/PX.ScriptBatch.axd?d=cFBYLldlYi5VSXxQWC5XZWIuVUkuR3JpZA2&t=636698318120000000" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var __loadImgUri = "/A000/App_Themes/Default/Images/spinner.gif?imgTimeStamp=636698449900000000";
var __loadStr = "";
var _numbFormatInfo = {negativeSign:"-",currencySymbol:"$",percentSymbol:"%",number:{groupSeparator:",",decimalSeparator:".",groupSizes:[3],negativePattern:1,decimalDigits:2},currency:{groupSeparator:",",decimalSeparator:".",groupSizes:[3],positivePattern:0,negativePattern:0,decimalDigits:2},percent:{groupSeparator:",",decimalSeparator:".",groupSizes:[3],positivePattern:1,negativePattern:1,decimalDigits:2}};
var _dateFormatInfo = {am:"AM",pm:"PM",shortDate:"M/d/yyyy",shortTime:"h:mm tt",longDate:"dddd, MMMM d, yyyy",longTime:"h:mm:ss tt",timeSeparator:":",yearFix:0,monthNames:"January,February,March,April,May,June,July,August,September,October,November,December,",abbrMonthNames:"Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec,",dayNames:"Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday",abbrDayNames:"Sun,Mon,Tue,Wed,Thu,Fri,Sat"};
__createPxContext(window);
var __PXFormView = {maxFileSizeMsg:"The file exceeds the maximal allowed size (25000 KB).",allowedFiles:".als;.cer;.csv;.dat;.doc;.docx;.epl;.exe;.gif;.ico;.ics;.jpeg;.jpg;.js;.mdb;.msi;.ofx;.pdf;.pfx;.ppt;.pptx;.qbo;.qfx;.rar;.rtf;.sql;.swf;.txt;.xls;.xlsx;.xml;.zip;.zpl;.pbix;.png;.svg;.tif;.tiff",allowedFilesMsg:"Only the following file types are allowed: {0}.",callbacks:[{name:"Refresh",repaintControls:1,blockPage:1,postData:0},{name:"Search",repaintControls:1,blockPage:1},{name:"Save",repaintControls:1,blockPage:1,commitChanges:1},{name:"Delete",repaintControls:1,blockPage:1},{name:"AddNew",repaintControls:1,blockPage:1,postData:0},{name:"NoteShow",blockPage:1,postData:0},{name:"NoteSave",repaintControls:3,blockPage:1,postData:0},{name:"FilesMenuShow",blockPage:1,postData:0},{name:"ActivityShow",blockPage:1,postData:0},{name:"LinkShow",repaintControls:3,blockPage:1,postData:0},{name:"LinkUpdate",repaintControls:3,blockPage:1,postData:0},{name:"LinkSend",repaintControls:3,blockPage:1,postData:0},{name:"NotifyMenuShow",repaintControls:3,blockPage:1,postData:0},{name:"NotifyShow",repaintControls:3,blockPage:1,commitChanges:1,postData:0},{name:"CheckActivity",blockPage:1,postData:0},{name:"UploadFile",blockPage:1}],errorCss:"FormError",warningCss:"FormWarn",infoCss:"FormInfo",minHeight:63,filesMenuUrls:{filesDisplayUrl:"~/Frames/GetFile.ashx",fileInfoUrl:"~/Pages/SM/SM202510.aspx"}};
var _frmBottom = {allowCollapse:0,minHeight:0,autoSize:{enabled:1,container:1}};
var _confirmMsg = "Any unsaved changes will be discarded.";
var __PXSmartPanel = {callBackMode:{blockPage:1,postData:0}};
var _L10nEditor = {loadOnDemand:1,autoReload:1,commandName:"SaveLoc",autoCallBack:{behavior:{postData:0}}};
var __PXInputBox = {activeEnter:0,buttonCss:"MessageButton",autoAdjustSize:1,callBackMode:{blockPage:1,postData:0}};
var _inputBox = {};
//]]>
</script>
<div class="main">
<div name="frmBottom" id="frmBottom">
<div style="position:relative;">
<div class="errCode">
</div>
<div class="grayBox">
<div class="img">
<img id="frmBottom_imgMessage" tabindex="100" src="../App_Themes/Default/Images/Message/error2.gif" border="0" />
</div>
<div class="errMsg">
<span id="frmBottom_lblMessage" class="errMsg">We're sorry! An error has occurred while processing your request. A report has been generated for our technical staff to investigate the problem. Please try to repeat your request later. Thank you for understanding.</span>
</div>
</div>
<div class="traceLnk">
<a id="frmBottom_lnkTrace" tabindex="101" href="Trace.aspx"><u><font color="Blue" size="4">Show Trace</font></u></a>
</div>
<div class="nxtSt">
</div>
<div class="navTo">
</div>
</div>
</div>
</div>
<table name="L10nEditor" cellspacing="0" cellpadding="0" id="L10nEditor" tabindex="300" class="SmartPanel" style="display:none;">
<tr>
<td id="L10nEditor_cap" class="SmartPanelC" valign="middle"><div class="sprite-icon control-icon" icon="Close" mode="c" style="float:right;">
<div class="control-icon-img control-Close">
</div>
</div>Translations</td>
</tr><tr>
<td class="SmartPanelCN" id="L10nEditor_cont" width="0" height="0"><div class="panelContent">
</div></td>
</tr>
</table><table name="inputBox" cellspacing="0" cellpadding="0" id="inputBox" tabindex="400" class="SmartPanel" width="400" style="display:none;">
<tr>
<td id="inputBox_cap" class="SmartPanelC" valign="middle"><div class="sprite-icon control-icon" icon="Close" mode="c" style="float:right;">
<div class="control-icon-img control-Close">
</div>
</div>Copy to clipboard (Ctrl+C)</td>
</tr><tr>
<td class="SmartPanelCN" id="inputBox_cont" width="400" height="0"><table tabindex="400" border="0" width="100%">
<tr>
<td><input name="inputBox$ctl01" type="text" class="editor" /></td>
</tr><tr>
<td align="right"><button type="button" class="MessageButton Button">OK</button><button type="button" class="MessageButton Button">Cancel</button></td>
</tr>
</table></td>
</tr>
</table></form>
</body>
</html>
The query parameters, such as $filter, are separated from the path by ?. In your case that should give <base url>/BusinessAccount?$filter=<filter espression>.
can you tell me whats bad? I need only check on button select language to continue on next website.
HTML
<asp:Content ID="BodyContent" ContentPlaceHolderID="BodySite" runat="server">
<h1>Výběr jazyka:</h1>
<p>Choose language | Sprachauswahl</p>
<form method="post" action="index.aspx">
<div class="checkbox-test">
<table style="border-spacing: 5px; border-collapse: separate;">
<tr>
<td>
<input type="radio" name="check_lang" id="check_cz" class="css-checkbox" value="cz" />
<label for="check_cz" class="css-label"><img src="http://terquil.cz/images/cz.png" class="img-flag" alt="CZ" /></label>
</td>
<td><h2>CZ</h2></td>
</tr>
<tr>
<td>
<input type="radio" name="check_lang" id="check_en" class="css-checkbox" value="en" />
<label for="check_en" class="css-label"><img src="http://terquil.cz/images/uk.png" class="img-flag" alt="EN" /></label>
</td>
<td><h2>EN</h2></td>
</tr>
<tr>
<td>
<input type="radio" name="check_lang" id="check_de" class="css-checkbox" value="de" />
<label for="check_de" class="css-label"><img src="http://terquil.cz/images/de.png" class="img-flag" alt="DE" /></label>
</td>
<td><h2>DE</h2></td>
</tr>
</table>
</div>
<input Type="submit" id="language_btn" VALUE="Pokračovat | Continue | Andere" >
</form>
C# (i tried this but dont work)
protected void submit(object sender, EventArgs e)
{
string cz = "cz";
string de = "de";
string en = "en";
if (Request.Form["check_lang"] != null)
{
string selectLanguage = Request.Form["check_lang"].ToString();
if (selectLanguage == cz)
Response.Redirect("http://terquil.cz/cs/index.aspx");
if (selectLanguage == en)
Response.Redirect("http://terquil.cz/en/index.aspx");
if (selectLanguage == de)
Response.Redirect("http://terquil.cz/cs/index.aspx");
}
}
CSS group objects:
input[type=radio].css-checkbox {
position:absolute;
z-index:-1000;
left:-1000px;
overflow: hidden;
clip: rect(0 0 0 0);
height:1px;
width:1px;
margin:-1px;
padding:0;
border:0;
}
input[type=radio].css-checkbox + label.css-label {
padding-left:37px;
height:32px;
display:inline-block;
line-height:32px;
background-repeat:no-repeat;
background-position: 0 0;
font-size:32px;
vertical-align:middle;
cursor:pointer;
}
input[type=radio].css-checkbox:checked + label.css-label {
background-position: 0 -32px;
}
label.css-label {
background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_c1a4f40d98f1c23d1ad84d2af9c314be.png);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
I need make only that if someone select radio for his specify language and click on submit button so he will redirect to specify html page for his language.
Either use runat="server" to access it in c# code
Or use javascript, on change event of radio button you can store value in a hidden field which will be accessible into your c# code.
$(document).ready(function(){
$('#rdbEnglish').click(function(){
$('#hdn').val('English');
});
Context: I’m building a web application using WebMatrix and C# Razor. The application searches a database and returns the results to a WebGrid. Once the results are returned, you can click a Details link and view the details on a new browser tab.
Problem: The initial search, which returns all records, works fine. If I enter search words, the correct results are returned, but when I click on Details, I get details for the record that was in the selected row in the initial search.
Example: The initial search returns records 1-5. The subsequent search returns records 31, 65, 86,92, 101. If I click on Details for record 65, I get details for record 2 because record 2 occupied row 2 in the initial search.
Code:
#{
Layout = "~/_SiteLayout.cshtml";
Page.Title = "Home Page";
}
#{
var db = Database.Open("xyz");
var query = "select bg_bug_id [BUGID], BG_SUMMARY SUMMARY from [dbo].[BUG] where BG_SUMMARY like #0 and BG_SUMMARY like #1";
var input1 = "%" + Request["input1"] + "%";
var input2 = "%" + Request["input2"] + "%";
var data = db.Query(query, input1, input2);
var gridBug = new WebGrid(source: data, canPage: true, canSort: true, rowsPerPage: 10);
if(gridBug.HasSelection){
var recordIdInt = 0;
recordIdInt = gridBug.SelectedRow.Value.BUGID;
var recordId = recordIdInt.ToString();
var bugDescQuery = "select [BG_DESCRIPTION] from [dbo].[BUG] where [BG_BUG_ID] =" + recordId; // or [BG_BUG_ID] = 25001";
var bugDescResult = db.Query(bugDescQuery);
foreach(var item in bugDescResult){
var desc = item.BG_DESCRIPTION;
var modDesc = desc.Replace("<div align=\"left\">", "<div>").Replace("<font face=\"Arial\">", "<font>").Replace("<span style=\"font-size:8pt\">", "<span>");
<script>
$(document).ready(function(){
var x = '#Html.Raw(HttpUtility.JavaScriptStringEncode(modDesc))';
var win = window.open();
win.document.body.innerHTML = "Record ID: " + #recordId + " - -" + x;
})
</script>
}
}
}
<form method="post">
<input type="text" name="input1"/>
<input type="radio" id="and" name="operator" value="and" checked>And
<input type="radio" id="or" name="operator" value="or">Or
<input type="text" name="input2" />
<select>
<option value="Unresolved">Unresolved</option>
<option value="Resolved">Resolved</option>
</select>
<input type="submit" value="Search" />
#gridBug.GetHtml(
tableStyle: "grid",
headerStyle: "head",
alternatingRowStyle: "alt",
columns: gridBug.Columns(
gridBug.Column(header:"", format:#<text>#item.GetSelectLink("Details")</text>, style: "product2"),
gridBug.Column("BUGID", "BUGID", style: "product2"),
gridBug.Column("SUMMARY", "SUMMARY", style: "product")))
</form>
#section script{
<script type="text/javascript">
$(function(){
$('th a, tfoot a').live('click', function() {
$('form').attr('action', $(this).attr('href')).submit();
return false;
});
});
</script>
}
<style type="text/css">
.grid {
margin: 4px;
border-collapse: collapse;
width: 950px;
margin-left: 5px
}
.head {
background-color: #0094ff;
font-weight: bold;
color: #fff;
}
.grid th, .grid td {
border: 1px solid #c0c0c0;
padding: 5px;
}
.alt {
background-color: #e8e8e8;
color: #000;
}
.product {
width: 200px;
font-weight: normal;
}
.product2 {
width: 10px;
font-weight: normal;
}
</style>
SOURCE AFTER 2nd SEARCH:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Home Page</title>
<link href="/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<script src="/Scripts/jquery-1.8.2.min.js"></script>
<script src="/Scripts/jquery-ui-1.8.24.js"></script>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<meta name="viewport" content="width=device-width" />
<script type="text/javascript">
$(function(){
$('th a, tfoot a').live('click', function() {
$('form').attr('action', $(this).attr('href')).submit();
return false;
});
});
</script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">XXXX</p>
</div>
<div class="float-right">
<section id="login">
<ul>
<li>Register</li>
<li>Log in</li>
</ul>
</section>
<nav>
<ul id="menu">
<li>XXXX</li>
<li>XXXX</li>
<li>XXXX</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
<form method="post">
<input type="text" name="input1"/>
<input type="radio" id="and" name="operator" value="and" checked>And
<input type="radio" id="or" name="operator" value="or">Or
<input type="text" name="input2" />
<select>
<option value="Unresolved">Unresolved</option>
<option value="Resolved">Resolved</option>
</select>
<input type="submit" value="Search" />
<table class="grid">
<thead>
<tr class="head">
<th scope="col">
</th>
<th scope="col">
BUGID </th>
<th scope="col">
SUMMARY </th>
</tr>
</thead>
<tfoot>
<tr >
<td colspan="3">1 2 3 > </td>
</tr>
</tfoot>
<tbody>
<tr>
<td class="product2">Details</td>
<td class="product2">1655</td>
<td class="product">summary text for record 1655</td>
</tr>
<tr class="alt">
<td class="product2">Details</td>
<td class="product2">2516</td>
<td class="product">summary text for record 2516</td>
</tr>
<tr>
<td class="product2">Details</td>
<td class="product2">2639</td>
<td class="product">summary text for record 2639</td>
</tr>
<tr class="alt">
<td class="product2">Details</td>
<td class="product2">2643</td>
<td class="product">summary text for record 2643</td>
</tr>
<tr>
<td class="product2">Details</td>
<td class="product2">3493</td>
<td class="product">summary text for record 3493</td>
</tr>
<tr class="alt">
<td class="product2">Details</td>
<td class="product2">3746</td>
<td class="product">summary text for record 3746</td>
</tr>
<tr>
<td class="product2">Details</td>
<td class="product2">3864</td>
<td class="product">summary text for record 3864</td>
</tr>
<tr class="alt">
<td class="product2">Details</td>
<td class="product2">5172</td>
<td class="product">summary text for record 5172</td>
</tr>
<tr>
<td class="product2">Details</td>
<td class="product2">7156</td>
<td class="product">summary text for record 7156</td>
</tr>
<tr class="alt">
<td class="product2">Details</td>
<td class="product2">7532</td>
<td class="product">summary text for record 7532</td>
</tr>
</tbody>
</table>
</form>
<style type="text/css">
.grid {
margin: 4px;
border-collapse: collapse;
width: 950px;
margin-left: 5px
}
.head {
background-color: #0094ff;
font-weight: bold;
color: #fff;
}
.grid th, .grid td {
border: 1px solid #c0c0c0;
padding: 5px;
}
.alt {
background-color: #e8e8e8;
color: #000;
}
.product {
width: 200px;
font-weight: normal;
}
.product2 {
width: 10px;
font-weight: normal;
}
</style>
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© 2015 - XXXX</p>
</div>
</div>
</footer>
</body>
</html>
I'm having a bit of an issue with an Ajax form. I've probably done it a bit backwards no doubt. Basically, when I hit the submit button in the form, nothing at all happens. I've debugged however it doesn't appear to post to the action method. It literally does nothing.
Here is my code so far:
Basically I post information from a form with the model of DetailedBreakdownReportRequest. This model is being passed through fine as my page displays the list of initial unfiltered results.
DetailedBreakdownReport Action Method:
[HttpPost]
public ActionResult DetailedBreakdownReport(DetailedBreakdownReportRequest reportRequest, FormCollection formVariables)
{
return View(reportRequest);
}
DetailedBreakdownReport View
<%# Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Main.Master" Inherits="System.Web.Mvc.ViewPage<MyApp.Data.AdvancedReports.AdvancedReports.DetailedBreakdownReports.DetailedBreakdownReportRequest>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Detailed Breakdown Report
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script language="javascript" type="text/javascript" src="<%= ResolveUrl("~/Scripts/jquery-1.4.1.min.js")%>"></script>
<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<% using (Ajax.BeginForm("DetailedList", "Reports",
new AjaxOptions
{
UpdateTargetId = "panelBreakdownList",
InsertionMode = InsertionMode.Replace
},
new { id = "SearchForm" })) %>
<% { %>
<div style="position: absolute; top: 0px; height: 30px; right: -12px; margin-top: 8px;
width: 250px; padding-left: 00px; vertical-align: middle; display: inline-block;">
<input id="searchField" name="searchField" style="padding-left: 5px; position: relative;
float: left; top: 3px; margin: 0px; border: 1px solid #DDDDDD; height: 19px;
width: 200px;" />
<%: Html.HiddenFor(m => m.ToDate) %>
<%: Html.HiddenFor(m => m.FromDate) %>
<%: Html.HiddenFor(m => m.Currency) %>
<%: Html.HiddenFor(m => m.ReportType) %>
<!--<input type="image" src="/Content/Images/search-form-submit.png" style="border: 0px;
height: 27px; position: relative; left: -8px; margin: 0x; float: left;" />-->
<input type="submit" value="Search" style="border: 0px;
height: 27px; position: relative; left: -8px; margin: 0x; float: left;" />
</div>
<% } %>
<div id="panelBreakdownList" style="position: relative; z-index: 0;">
<% Html.RenderAction("DetailedList", new { ToDate = Model.ToDate, FromDate = Model.FromDate, Currency = Model.Currency, ReportType = Model.ReportType }); %>
</div>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="Header" runat="server">
<h1>Detailed Breakdown Report</h1>
<h2><%: Model.ToDate.ToString("dd-MMM-yyyy") %> to <%: Model.FromDate.ToString("dd-MMM-yyyy")%></h2>
</asp:Content>
Here is the DetailedList action that is called from the above page, and it's view:
[HttpPost]
public ActionResult DetailedList(DateTime ToDate, DateTime FromDate, string Currency, string ReportType, FormCollection formVariables)
{
DetailedBreakdownReportRequest reportRequest = new DetailedBreakdownReportRequest()
{
ToDate = ToDate,
FromDate = FromDate,
Currency = Currency,
ReportType = ReportType,
UserId = UserServices.CurrentUserId
};
DrilldownReportEngine re = new DrilldownReportEngine();
DetailedBreakdownReport report = null;
if (formVariables.HasKeys())
{
reportRequest.searchTerm = formVariables["searchField"];
report = re.GetDetailedBreakdown(reportRequest);
}
else
{
report = re.GetDetailedBreakdown(reportRequest);
}
return PartialView(report);
}
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<MyApp.Data.AdvancedReports.AdvancedReports.DetailedBreakdownReports.DetailedBreakdownReport>" %>
<% if (Model.HasData)
{ %>
<% if (Model.ShopBreakdown != null)
{ %>
<h2>Shop Breakdown Report</h2>
<p>Click on a shop's name to see additional information.</p>
<div id="shopGrid" style="float:left; width: 400px;">
<table width="400px">
<% foreach (var shop in Model.ShopBreakdown)
{ %>
<tr>
<td colspan="3"><h2><%: Html.ActionLink(shop.Shop.Name + " >>", "ShopDashboard", new { ShopId = shop.Shop.ShopID, Currency = Model.Currency, toDate = Model.ToDate.ToString(), fromDate = Model.FromDate.ToString(), percentageOfSales = shop.RevenuePercentageOfSales })%></h2></td>
</tr>
<tr>
<td><p class="labels">Units Sold:</p></td>
<td><b style="font-size:larger;"><%: shop.UnitsSoldPerShop%></b></td>
<td rowspan="2" align="center"><h2><%: String.Format("{0:0.0%}", shop.RevenuePercentageOfSales)%></h2> of Total Revenue</td>
</tr>
<tr>
<td><p class="labels">Revenue Earned:</p></td>
<td><b style="font-size:larger;"><%: String.Format("{0:0.00}", shop.TotalRevenuePerShop)%></b></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<% } %>
</table>
</div>
<% } %>
<% if (Model.ProductBreakdown != null)
{ %>
<% foreach (var product in Model.ProductBreakdown)
{ %>
<div id="ProductGrid" style="float:left; width: 500px;">
<div>
<h3><%: Html.ActionLink(product.Product.Name + " >>", "ProductDashboard", new { ProductId = product.Product.ProductID, Currency = Model.Currency, toDate = Model.ToDate.ToString(), fromDate = Model.FromDate.ToString(), percentageOfSales = product.RevenuePercentageOfSales })%></h3>
</div>
<div style="float:left; width: 200px;">
<p class="labels">Units Sold: </p><b style="font-size:larger;"><%: product.TotalUnitsSoldPerProduct %></b>
<br />
<p class="labels">Revenue Earned: </p><b style="font-size:larger;"><%: String.Format("{0:0.00}", product.OverallTotalRevenuePerProduct)%></b>
</div>
<div style="float: left; text-align: center;">
<h2><%: String.Format("{0:0.0%}", product.RevenuePercentageOfSales)%></h2> of Total Revenue
</div>
</div>
<% } %>
<div style="clear:both;" />
<br />
<% } %>
<% } %>
As I said above, on first load, the page displays fine, it displays an unfiltered view of the results. When I type in a value into the text box and click submit, nothing at all happens and I'm finding that hard to debug. At least if it did something I'd have something to work with. Can anyone see if I'm doing something wrong here?
As I see, you expect some not nullable variables in action detailedList which are expected from form.
[HttpPost]
public ActionResult DetailedList(DateTime ToDate, DateTime FromDate, string Currency, string ReportType, FormCollection formVariables)
{
......
}
But you just send searchfield in form collection. Where is the ToDate, FromDate, Currency variables in form?
I think you should create a formmodel forexample
DetailedListSearchModel
DateTime ToDate
DateTime FromDate
string Currency
string ReportType
string Searchfield
and make search a partialview. Just pass default values when partial view is rendered with default values then execute in form.
Then you will take this values in action like
[HttpPost]
public ActionResult DetailedList(DetailedListSearchModel model)
{
......
}
You can use this model in form like
<%= Html.LabelFor(m => m.Searchfield) %>
<%= Html.TextBoxFor(m => m.Searchfield, new { #class = "css classes", maxlength = "1000" })%>
<%= Html.ValidationMessageFor(m => m.Searchfield) %>
$(function() {
$('form#SearchForm').find('a.submit-link').click( function() {
$('form#SearchForm').trigger('submit');
}).show();
}
and change search button to a.
Search