html.partial with dynamic append using script (Razor) - asp.net

trying to do the below
$('#body').append('<div id=\"'+ name + 'div\"' + '>' + '\'' + #Html.Partial("_ChatWindow") + '\'' + '</div>');
_chatwindow.cshtml is just
<button>test</button>
but i get a run time syntax error at the opening angle bracket of the partial class. Any suggestions?

You need to create a string for partial view content:
$('#body').append('<div id=\"'+ name + 'div\"' + '>' + '\'' + '#Html.Partial("_ChatWindow")' + '\'' + '</div>');

Related

Getting image from an online XML file or a URL in xamarin forms

I am unable to get image from a URL that is an XML response. i used following code to fetch information from this URL including image too since i thought that i will get image although the xml response has image url but i am getting image URL instead of image.
Why is it so? kindly guide me! i am a newbie to xamarin forms.
URl : https://www.goodreads.com/book/title.xml?key=Uxb0zPb86N4STVy2ECWYA&title=Dune
CODE:
XElement search_result =(from xFi in Xdoc.Descendants("book")
where (xFi.Element("country_code").Value == "PK") || (xFi.Element("language_code").Value == "eng")
select xFi).FirstOrDefault();
if (search_result != null)
{ search.Text=
"Title: " + search_result.Element("title").Value + "\n" +
"Average Ratings: " + search_result.Element("average_rating").Value + "\n" +
"ISBN: " + search_result.Element("isbn").Value + "\n" +
"PUBLICATION YEAR: " + search_result.Element("publication_year").Value +
"\n" +"PUBLISHER: " + search_result.Element("publisher").Value + "\n" +
"DESCRIPTION: " + "\n" + search_result.Element("description").Value + "\n"
+ "IMAGE: " + "\n" + search_result.Element("image_url").Value + "\n";
} else
{
search.Text = "Found Nothing";
}
assuming I have an Image control on my page named "bookimage"
var url = search_result.Element("image_url").Value;
bookimage.Source = ImageSource.FromUri(new Uri(url));
this is clearly explained in the docs

Posting a collection - is empty/null when adding a class on the table row

I have a simple ASP.NET MVC application, where our users have a table which has some options to edit some settings.
This table is build dynamically using jQuery since this is some legacy code. The code to make the table is:
function setInvoiceTable(result) {
result.OverduesPaged.forEach(function (item, index) {
var externalName = 'OverduesPaged[' + index + '].ExternalInvoiceGuid';
var debtorName = 'OverduesPaged[' + index + '].Debtor';
var visibleName = 'OverduesPaged[' + index + '].IsSelected';
var externalInvoiceGuidField = '<input type=\'hidden\' value=\'' + item.ExternalInvoiceGuid + '\' name=\'' + externalName+ '\' />';
var debtorField = '<input type=\'hidden\' value=\'' + item.Debtor + '\' name=\'' + debtorName + '\' />';
var invisibleField = '<input type=\'hidden\' value=\'false\' name=\'' + visibleName + '\' id=\'' + visibleName + '\' /></label>';
var visibleField = '<label><input type=\'checkbox\' value=\'true\' name=\'' + visibleName + '\' id=\'' + visibleName + '\' /> Start sag';
var insertStr = "<tr>" +
"<td>" + externalInvoiceGuidField + debtorField + visibleField + invisibleField + "</td>" +
"<td>" + item.InvoiceId + "</td>" +
"<td>" + item.Debtor + "</td>" +
"<td>" + item.DateString +"</td>" +
"<td>" + item.DaysSinceDueString +"</td>" +
"<td>" + item.GrossAmountString + "</td>" +
"<td>" + item.RemainderAmountString + "</td>" +
"</tr>";
$('#accounting_invoices_table').append(insertStr);
});
}
When I POST, this works perfectly for us. We have an endpoint in our controller which has this signature:
[System.Web.Mvc.HttpPost]
public ActionResult StartDebtCollectionCases(UpcomingDashboardViewModel vm)
{
// code
}
The collection I'm building is the OverduesPaged which is a part of our view model:
public class UpcomingDashboardViewModel
{
public List<OverdueUpcomingInvoiceViewModel> OverduesPaged { get; set; }
// more stuff not relevant to question
}
This is my challenge:
I've added a css class to the <tr> row like this:
// new code added
var removeClass = 'ok';
if (item.IsAlreadyCase) {
visibleField = '<label type="text">Allerede startet</label>';
removeClass = 'remove';
} else if (item.IsBlocked) {
visibleField = '<label type="text">Sat i bero</label>';
removeClass = 'remove';
}
else if (item.Currency != "DKK") {
visibleField = '<label type="text">Faktura skal være dansk valuta</label>';
removeClass = 'remove';
}
var insertStr = "<tr class='" + removeClass + "'>" +
"<td>" + externalInvoiceGuidField + debtorField + visibleField + invisibleField + "</td>" +
// rest of code from above
Now I end up with a table exactly like before, but with a class which is either OK or REMOVE.
However, when I now do the POST, the whole collection, OverduesPaged, is null/empty:
I tried to add the class to the <td> instead, but then the collection was null/empty.
Any ideas what is wrong here?
The issue is not related to adding the class name itself, but rather the invalid html that you generating if ant of the code in the if or else if blocks are executed. In those blocks you are creating <label> element with a closing tag, but no input (its not clear if you need the checkbox or not in those cases), so when you combine visibleField + invisibleField you get unbalanced <label> tags (visibleField has opening and closing tags, but invisibleField only has a closing </label> tag.
You code in the if blocks to generate visibleField would need to be similar to what you generate in the original code - i.e. just an opening <label> with the html for the checkbox.
As you have acknowledged in the comments, this is very fragile and error prone code that is difficult to debug. As you are intending to rewrite it, consider returning a partial view in your ajax call (that is strongly bound to the model), or if you need to return Json, then consider a hidden template (outside the <form> tags) that you clone and update in the script, for example
<div id="newrow" style="display:none">
<tr>
<td>
<input class="invoice" type="hidden" name="OverduesPaged[#].ExternalInvoiceGuid value />
<input class="debtor" type="hidden" name="OverduesPaged[#].Debtor value />
....
</td>
....
</tr>
</div>
and then you script becomes
var table = $('#accounting_invoices_table');
result.OverduesPaged.forEach(function (item, index) {
var clone = $('#newrow').clone();
// Update indexer
clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));
// Update values
clone.find('.invoice').val(item.ExternalInvoiceGuid);
....
table.append(clone.html());
});
As a side note, your existing id attributes are invalid because they contain ., [ and ] characters (if you attempted to use these in jQuery selectors, they would fail (for example the . will be interpreted as a class name), so they should be omitted in the html

Tag type as string variable in selenium

How to pass tag type as a string variable in selenium?
suppose I am having given example:
By.cssSelector: li[__idx='0']
for given example I tried below part
webElement.findElement( By.cssSelector( "'" + tag + "'['" + property + "'='" + indexNumber + "']" ) )
where tag is li and __idx is property.
I am getting error as " Could not locate element with locator ". but if I tried as below then its working correctly.
webElement.getElement().findElement( By.cssSelector( "li[__idx='" + indexNumber + "']" ) )
Is there any syntactical mistake am doing ?
webElement.find( "" + tag + "[" + property + "='" + indexNumber + "']" );
This is the correct way to solve the issue.

How to find which properties in the .theme file are used to generate a given CSS class in GXT3?

Current Sencha documentation about their Theme Builder is very limited, it covers only the file basic structure and the syntax (including gradients and functions):
http://docs.sencha.com/gxt/3.1/ui/theme/syntax/ThemeBuilderSyntax.html
My problem is which property should I set in the .theme file in order to affect an specific CSS class? For example the font used in the header of a ContentPanel.
First thing I tried was to have a look in the file themebuilder\examples\skeleton-config\skeleton-config.theme which is supposed to have "all required properties", but I could not find any "contentPanel" in it.
This is the example they have in the documentation:
details {
info {
messageText = defaultFont
//note that this could also be written as
//messageText = theme.defaultFont
}
}
In this case it is straightforward because there is an Info class which matches the "info" element used in the theme.
Then I had a look in the generated HTML and found this CSS class name in the header of my ContentPanel:
.CS-com-example-client-base-panel-Css3HeaderAppearance-Css3HeaderStyle-headerText
By looking at this class name I thought the element name to be used in the .theme file would be "panel" and the property name would be "headerText", but unfortunately checking the file skeleton-config.theme I saw there is no headerText property in the panel element.
I have found headerText in other elements like datePicker, errortip, info and tip, so it is funny that panel does not have it.
The way I have found to know exactly which configuration parameter I have to set in order to affect an specific CSS was to have a look at the GWT generated classes.
I started by checking the generated HTML and there I found the CSS class name:
.CS-com-example-client-base-panel-Css3HeaderAppearance-Css3HeaderStyle-headerText
Then I searched for this string in the directory target/.generated (I am using Maven) and found the class Css3HeaderAppearance_Css3HeaderResources_default_InlineClientBundleGenerator.java where that string appeared many times:
".CS-com-example-client-base-panel-Css3HeaderAppearance-Css3HeaderStyle-headerText {\n right : " + ("20px") + ";\n}\n" +
".CS-com-example-client-base-panel-Css3HeaderAppearance-Css3HeaderStyle-headerText {\n font-family : " + ("tahoma"+ ","+ " " +"arial"+ ","+ " " +"verdana"+ ","+ " " +"sans-serif") + ";\n font-size : " + ("11px") + ";\n font-weight : " + ("bold") + ";\n line-height : " + ("15px") + ";\n color : ") + ((theme().panel().font().color() + "") + ";\n font-size : " + (theme().panel().font().size() + "") + ";\n font-weight : " + (theme().panel().font().weight() + "") + ";\n font-family : " + (theme().panel().font().family() + "") + ";\n line-height : " + ("15px") + ";\n text-transform : " + ("none") + ";\n}\n.PR-com-example-client-base-panel-Css3HeaderAppearance-Css3HeaderStyle-headerBar {\n float : " + ("left") + ";\n}\n/* CssDef */\n/* CssDef */\n/* CssDef */\n/* CssDef */\n")) : ((".OR-com-example-client-base-panel-Css3HeaderAppearance-Css3HeaderStyle-header {\n padding : " + ("4px"+ " " +"3px"+ " " +"2px"+ " " +"5px") + ";\n position : " + ("relative") + ";\n padding : " + ("0") + ";\n}\n.BS-com-example-client-base-panel-Css3HeaderAppearance-Css3HeaderStyle-headerIcon {\n float : " + ("left") + ";\n}\n.AS-com-example-client-base-panel-Css3HeaderAppearance-Css3HeaderStyle-headerHasIcon .BS-com-example-client-base-panel-Css3HeaderAppearance-Css3HeaderStyle-headerIcon {\n width : " + ("18px") + ";\n}\n.AS-com-example-client-base-panel-Css3HeaderAppearance-Css3HeaderStyle-headerHasIcon " +
".CS-com-example-client-base-panel-Css3HeaderAppearance-Css3HeaderStyle-headerText {\n left : " + ("20px") + ";\n}\n" +
".CS-com-example-client-base-panel-Css3HeaderAppearance-Css3HeaderStyle-headerText {\n font-family : " + ("tahoma"+ ","+ " " +"arial"+ ","+ " " +"verdana"+ ","+ " " +
"sans-serif") + ";\n font-size : " + ("11px") + ";\n font-weight : " + ("bold") + ";\n line-height : " + ("15px") +
";\n color : ") + ((theme().panel().font().color() + "") + ";\n font-size : " + (theme().panel().font().size() + "") + ";\n " +
"font-weight : " + (theme().panel().font().weight() + "") + ";\n font-family : " + (theme().panel().font().family() + "") + ";\n line-height : " + ("15px") + ";\n text-transform : " + ("none") + ";\n}\n.PR-com-example-client-base-panel-Css3HeaderAppearance-Css3HeaderStyle-headerBar {\n float : " + ("right") + ";\n}\n/* CssDef */\n/* CssDef */\n/* CssDef */\n/* CssDef */\n"));
I have noticed that it first generates some hard-coded CSS classes and at the end it generated a CSS class based on the values returned by calls to theme().*.
Finally, by comparing these calls with the structure of the file skeleton-config.theme I had the answer to my question:
theme() maps to the "details" element in the .theme file
theme().panel() maps to details.panel or
details {
panel {
so the configuration I had to use was the font property inside the panel element.
This answers my first question, but it does not clarify what are all widgets affected by the "panel" element in the .theme file.

The best browser detection solution in ASP.NET 4.0

I googled this topic and I came across with three different ways to configure browser capabilities: browscap.ini, browserCaps element in web.config and .browser files in App_Browsers. I thought .browser files is the latest way, but I don't seem to find up-to-date files. But I found quite fresh browscap.ini from http://browsers.garykeith.com/downloads.asp.
My first priority is to exclude common crawlers from the visitor stats. The second priority is to detect browser and os with correct versions (e.g. Opera 11 / Win7).
Are there any libraries I could use? Is browscap.ini still a valid way and is it possible to use it without access to system files? Where can I find up-to-date .browser files?
more info : http://msdn.microsoft.com/en-us/library/3yekbd5b.aspx
Have you checked this :
System.Web.HttpBrowserCapabilities browser = Request.Browser;
string s = "Browser Capabilities\n"
+ "Type = " + browser.Type + "\n"
+ "Name = " + browser.Browser + "\n"
+ "Version = " + browser.Version + "\n"
+ "Major Version = " + browser.MajorVersion + "\n"
+ "Minor Version = " + browser.MinorVersion + "\n"
+ "Platform = " + browser.Platform + "\n"
+ "Is Beta = " + browser.Beta + "\n"
+ "Is Crawler = " + browser.Crawler + "\n"
+ "Is AOL = " + browser.AOL + "\n"
+ "Is Win16 = " + browser.Win16 + "\n"
+ "Is Win32 = " + browser.Win32 + "\n"
+ "Supports Frames = " + browser.Frames + "\n"
+ "Supports Tables = " + browser.Tables + "\n"
+ "Supports Cookies = " + browser.Cookies + "\n"
+ "Supports VBScript = " + browser.VBScript + "\n"
+ "Supports JavaScript = " +
browser.EcmaScriptVersion.ToString() + "\n"
+ "Supports Java Applets = " + browser.JavaApplets + "\n"
+ "Supports ActiveX Controls = " + browser.ActiveXControls
+ "\n"
+ "Supports JavaScript Version = " +
browser["JavaScriptVersion"] + "\n";
TextBox1.Text = s;
I found a user agent parser from http://user-agent-string.info/ and it seems to be good enough for my purposes.
Just so no one else goes down that dark path, be aware that even the jQuery team recommend that you DO NOT use jQuery.browser object:
"The $.browser property is deprecated in jQuery 1.3"
The best answer is feature detection, not browser detection! This is particularly true in the day where Firefox & Chrome are putting out releases ever few months and mobile browser use is growing. Use Modernizr (http://Modernizr.com) or an equivalent library to detect the features you are interested in.
So far I've used http://api.jquery.com/jQuery.browser/ for client side detection.

Resources