this is action links code in mvc 5. I need to add images instead of text. how to do it
#Html.Raw("<a onclick='MergeCustomer(" + item.customer_id + ", " +
TempData["NewCustomerID"] + ")'>Merge</a>")
<span style=" color:black">|</span>
#Ajax.ActionLink("Compare", "_CompareCustomerDetails",
new { ExistingCustomerId = item.customer_id, NewCustomerId = TempData["NewCustomerID"]},
new AjaxOptions()
{
HttpMethod = "Get",
UpdateTargetId =divCustomerCompare",
InsertionMode = InsertionMode.Replace
}, new { id = "lnkCompare"})}
You can't. #Html.ActionLink only works on text.
In this instance your best bet is to use the #Url.Action() helper method, like so:
<img src="yourimage.jpg"/>
Related
I have a WebView in my project. It can have dynamic html content. For now i have given fixed width and height to WebView and it scrolls. But i want to remove scroll by increasing height of WebView dynamically.
Is there any way like by creating custom renderer or something?
Sample code
var webvw = new Webview();
var htmlSource = new HtmlWebViewSource();
htmlSource.Html = #"<html>" +
"<head>" +
"<style type=\"text/css\">" +
"#font-face {" +
"font-family: Roboto-Medium;" + fntsrc + "}" +
"html,body{margin:0px;}" +
"body {" +
"font-family: Roboto-Medium;" +
"font-size: 12px" +
"text-align: left;" +
"color: #acacac;" + "}" +
"body :first-child{" +
"font-family: Roboto-Medium;" +
"font-size: 12px" +
"font-weight: 300;" +
"line-height: 24px;" +
"text-align: left;" +
"color: #ffffff;" + "}" +
"</style>" +
"</head>" +
"<body style=\"background-color: transparent;\" >" +
dynamicContent + "</body>" + "</html>";
webvw.Source = htmlSource;
webvw.WidthRequest = 500;
webvw.HeightRequest = 500;
SatackLayout webContnet=new StackLayout{
VerticalOptions=LayoutOption.FillAndExpand,
Orientation=StackOrientation.Vertical
};
There is a way but it is complicated. The WebView won't automatically size to its content, so the only way you could do it is if the content notifies your code how big it is.
To do this you will need to Invoke C# from Javascript.
Its a mildly complex procedure and you will need a CustomRenderer and also setup properties in each of the native projects. Follow the link above for a step by step guide on how to do it.
The Javascript you invoke something like this to get the height
var body = document.body,
html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
Then when its returned back, set your WebView to that height. You may also need to wait until the NavigationCompleted Event is raised before doing this to ensure the contents have loaded in your WebView.
ok here is my "if it looks stupid but works it ain't stupid"-answer.
i run into the same problem and searched for a way to get the possible height.
my solutions is now to create a lable with costum renderes to convert the html code. the label has a property for height and width ;)
so i create the label, put it in a StackLayout(it needs to be rendered), get the size to the WebView, remove the label from the StackLayout and add now the WebView with a perfect size :)
webView = new WebView();
var htmlSource = new HtmlWebViewSource();
htmlSource.Html = htmlCode;
webView.Source = htmlSource;
tmpLable = new HyperLinkLabel {
Text = htmlCode,
};
stackLayout.Children.Add(tmpLable);
webView.WidthRequest = tmpLable.Width;
webView.HeightRequest = tmpLable.Height;
stackLayout.Children.Remove(text);
stackLayout.Children.Add(web);
I have two inputs.
I want the two inputs to have the same look and feel see below:
The first input use autocomplete and allows the user to select a list of terms => I use p:autocomplete (see Primefaces documentation on autocomplete)
This input works fine.
For the second input, I would like to have the same display but without any autocompletion : the user just enter a list of terms with no autocompletion at all.
I tried to have a fake autocomplete that return the value given by the user but it is too slow and the behaviour is not correct when the user quit the input.
Any idea is welcome.
After a quick look at the PrimeFaces javascript code of the autoComplete and a few hours experimenting with it, I came up with a solution. It involves overriding the bindKeyEvents and in it deciding to call the original one or not, adding detection for the space key ('selecting a tag') and when pressed, add the tag and fire the selectionEvent (if ajax is used). Place the following code in your page or in an external javascript file
<script>
//<![CDATA[
if(PrimeFaces.widget.AutoComplete) {
PrimeFaces.widget.AutoComplete = PrimeFaces.widget.AutoComplete.extend ( {
bindKeyEvents: function() {
if (this.input.attr('data-justTags')) {
var $this = this;
this.input.on('keyup.autoComplete', function(e) {
var keyCode = $.ui.keyCode,
key = e.which;
}).on('keydown.autoComplete', function(e) {
var keyCode = $.ui.keyCode;
$this.suppressInput = false;
switch(e.which) {
case keyCode.BACKSPACE:
if ($this.cfg.multiple && !$this.input.val().length) {
$this.removeItem(e, $(this).parent().prev());
e.preventDefault();
}
break;
case keyCode.SPACE:
if($this.cfg.multiple) {
var itemValue = $this.input.val();
var itemDisplayMarkup = '<li data-token-value="' +itemValue + '"class="ui-autocomplete-token ui-state-active ui-corner-all ui-helper-hidden">';
itemDisplayMarkup += '<span class="ui-autocomplete-token-icon ui-icon ui-icon-close" />';
itemDisplayMarkup += '<span class="ui-autocomplete-token-label">' + itemValue + '</span></li>';
$this.inputContainer.before(itemDisplayMarkup);
$this.multiItemContainer.children('.ui-helper-hidden').fadeIn();
$this.input.val('').focus();
$this.hinput.append('<option value="' + itemValue + '" selected="selected"></option>');
if($this.multiItemContainer.children('li.ui-autocomplete-token').length >= $this.cfg.selectLimit) {
$this.input.css('display', 'none').blur();
$this.disableDropdown();
}
$this.invokeItemSelectBehavior(e, itemValue);
}
break;
};
});
} else {
//console.log("Original bindEvents");
this._super();
}
}
});
}
//]]>
</script>
For deciding on when to call the original one or not, I decided to use a passThrough attribute with a data-justTags name. e.g. pt:data-justTags="true" (value does not matter, so pt:data-justTags="false" is identical to pt:data-justTags="true"). A small html snippet of this is:
<p:autoComplete pt:data-justTags="true" multiple="true" value="#{myBean.selectedValues}">
And do not forget to add the xmlns:pt="http://xmlns.jcp.org/jsf/passthrough" namespace declaration.
I found a component that could do the job : http://www.butterfaces.org/tags.jsf
I want to send the value of textbox to the Action Method for searching the technology for that i want to get the value of textbox in Action.
I have the following code :-
#Html.TextBox("technologyNameBox", "", new { id = "technologyName", #class = "form-control", #placeholder = "Search For Technology" })
<span class="input-group-btn" style="text-align:left">
<a class="btn btn-default" id="searchTechnology"
href="#Url.Action("SearchTechnology", "Technology",
new {technologyName="technologyName",projectId=ProjectId })">
<span class="glyphicon glyphicon-search "></span>
</a>
</span>
Question :- How to get the value of textbox "technologyNameBox" in Action ?
Please help me out. Thanks in Advance!
You'd have to append the value to the URL via JavaScript before directing the user. Using jQuery (since that generally comes packaged with ASP.NET), it might look something like this (with a good bit of manual conditional checks for blank values or query string parameters):
$('#searchTechnology').click(function (e) {
e.preventDefault();
var url = '#Url.Action("SearchTechnology", "Technology", new { projectId=ProjectId })';
var technologyName = $('#technologyName').val();
if (technologyName.length < 1) {
// no value was entered, don't modify the url
window.location.href = url;
} else {
// a value was entered, add it to the url
if (url.indexOf('?') >= 0) {
// this is not the first query string parameter
window.location.href = url + '&technologyName=' + technologyName;
} else {
// this is the first query string parameter
window.location.href = url + '?technologyName=' + technologyName;
}
}
return false;
});
The idea is that when the user clicks that link, you would fetch the value entered in the input and append it to the URL as a query string parameter. Then redirect the user to the new modified URL.
I am trying to Maximize/Minimize a Document list Web Part.
I used the following code from http://blog.pathtosharepoint.com/2008/10/25/expandcollapse-buttons-for-your-web-parts/
and it works for my first two Web Parts but not my other two. All I did was include their titles within my coding as a change. Therefore, there shouldn't be any issue with the display.
Any suggestions on what can cause this?
The only changes I made after the first 2 were working was I added 2 more title1 to include the other 2 Web Parts.
As you can see, the bottom 2 don't fully minimize on page load
fYI: inside the coding.. the titles are changed to "... Orders" but the ... is in place of the actual name
<script type="text/javascript">
// Expand/Collapse Buttons
function WPToggle(thisId, ImageId)
{
if (document.getElementById(thisId).style.display=="none")
{
document.getElementById(thisId).style.display="";
document.getElementById(ImageId).src = "/_layouts/images/minus.gif";
}
else
{
document.getElementById(thisId).style.display="none";
document.getElementById(ImageId).src = "/_layouts/images/plus.gif";
}
}
function ExpandCollapseBody()
{
var i = 1;
var WPid = "WebPartWPQ1" ;
var WPtitleid = "WebPartTitleWPQ1" ;
var Toggleid = "ToggleImage1" ;
do
{
try
{
title1 = document.getElementById(WPtitleid).getAttribute("title");
if (title1 == "... Orders" || title1 == "... Orders" || title1 =="... Orders" || title1 == "... Orders")
{
document.getElementById(WPtitleid).innerHTML = '<IMG id="' + Toggleid + '" onClick="WPToggle(\'' + WPid + '\',\'' + Toggleid +
'\')" alt="Expand/Collapse" style="margin:6px 5px 0px 2px; float:left; cursor:pointer;" src="/_layouts/images/minus.gif" />' +
document.getElementById(WPtitleid).innerHTML ;
document.getElementById(Toggleid).src = "/_layouts/images/plus.gif";
}
}
catch(err) {}
i = i + 1;
WPid = "WebPartWPQ" + i ;
WPtitleid = "WebPartTitleWPQ" + i;
Toggleid = "ToggleImage" + i;
} while (document.getElementById(WPid))
}
_spBodyOnLoadFunctionNames.push("ExpandCollapseBody()");
</script>
I guess I see that by default, the more I add more webparts they start at expanded rather than collapse....
I see. I need the following condition of Chrome: minimize for the Web Part
On first sign I have the following code:
Accounts.onCreateUser(function(options,user){
if (typeof(user.services.facebook) != "undefined") {
user.services.facebook.picture = "http://graph.facebook.com/" + user.services.facebook.id + "/picture/?type=large";
}
return user;
});
Which results in the following URL string
http://graph.facebook.com/[myfacebookid]/picture/?type=large
Yet when it renders that url and returns
<img scr="http://graph.facebook.com/[myfacebookid]/picture/?type=large" alt="My Name">
All I see is a broken image. How can I pull this in so that it renders the facebook profile picture?
I use a helper function based off of the Facebook ID of the user to grab the image on the server. I notice my url has /picture? and your has /picture/? Hope this helps.
userPicHelper: function() {
if (this.profile) {
var id = this.profile.facebookId;
var img = 'http://graph.facebook.com/' + id + '/picture?type=square&height=160&width=160';
return img;
}
},
I don't know how I missed this before, but is this the src attribute on the image tag is actually written as scr:
<img scr=
Should be...
<img src=
You have http instead of https.
So:
"https://graph.facebook.com/" + id + "/picture/?type=large";
This was my problem.