I'm a newbie to all this ASP.NET MVC stuff, and I was making some tests for my project. I wanted to ask how is it possible to introduce a javascript function call from the html.radiobutton function. For example, how would you declare this:
<input type="radio" name = "Kingdom" value = "All" onclick="GetSelectedItem(this);" checked ="checked" />
with html.radiobutton. I've been looking for some documentation, but I don't really get to understand, I guess it has something to do with the html object attributes, but don't really know the syntax and I haven't found any example.
Thank you all in advance :)
vikitor
Define the attributes as an anonymous object.
<%= Html.Radiobutton( "Kingdom",
"All",
true,
new { onclick = "GetSelectedItem(this);" } ) %>
or better yet, apply the handler unobtrusively with javascript (ex. uses jQuery).
<%= Html.RadioButton( "Kingdom", "All", true ) %>
<script type="text/javascript">
$(function() {
$('input[name=Kingdom]').click( function() {
GetSelectedItem(this); // or just put the code inline here
});
});
</script>
Related
I have an html form ( ) , I want that it is displayed when I click on a button.
the declaration of the form is the following :
<div id = "formulaire" class="gl" >
and the button is :
Edit
I use angularjs in my code . Please help me.
It better to use a simple variable than a function in this case. I would also recommend using controller scope when setting variables instead of the application scope so you don't run into issues with the variables when your application becomes large.
I also picked data-ng-click over ng-click because it will allow the html to validate correctly (which can be checked using the W3's validator).
Try this...
"use strict";
angular.module('myApp', [])
.controller("myController", function() {
this.edit = false;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<div data-ng-app="myApp" data-ng-controller="myController as ctrl">
Edit
<div id="formulaire" class="gl" data-ng-show="ctrl.edit">
<form>
<fieldset>
<label>Field:</label>
<input type="text" />
</fieldset>
</form>
</div>
</div>
Have you looked into the ngShow directive? It ables you to show or hide a DOM element depending on whether the attribute expression resolves to a truthey or falsey value.
Add model change on click
Edit
And then display the form if model is true
<div id = "formulaire" class="gl" ng-if="show">
I am new at MVC and I want to show an alert message from the Controller tempdata as bootbox alert message
How can it be done? Please somebody help me with an example
Say you have TempData["Message"]
In your view assign it to some hiddenField as below
#{
var message=TempData["Message"] as string;
}
<input type="hidden" value="#message" id="hdnMessage"/>
Now write a document.ready function and check if the hidden field has value and if yes show your message as below:
$(document).ready(function(){
if($("#hdnMessage").val()!="")
{
var msg=$("#hdnMessage").val();
bootbox.alert(msg);
$("#hdnMessage").val('');//empty the value so that it won't show everytime
}
});
Assuming a <script> tag is used in the view, you can directly inject the value from TempData into JavaScript. Something like this would work:
#if(TempData.ContainsKey("Message"))
{
<script>
$(function(){
bootbox.alert('#TempData["Message"]');
});
</script>
}
This won't work in a .js file, as those aren't parsed by the Razor engine.
You could put this in a partial view, or include it somewhere in _Layout, or simply use it in the view you're currently working in. The only important bit it to remember that it needs to be rendered after jQuery, bootstrap.js, and bootbox.js.
I have a preference set in adfmf-feature and in amx page I get it using <amx:inputText label="url" id="it1" value="#{preferenceScope.feature.adf.mobile.sample.ProfilePage.showProfileImage.showImage}"/>.
But if i use the same format for HTML <input type="username" name="xyz" id="user" value= "#{preferenceScope.feature.adf.mobile.sample.username}" /> i am not able to get the result.
i get #{preferenceScope.feature.adf.mobile.sample.username} itself as the output in the text box!
The values here are just for identification purpose. They match the their respective id's in my application
Should it be written in Javascript side? or is there any other way to get the value and set?
Thank you
in order to get the preference value and insert it into a field in an HTML page you need to use the javascript api adf.mf.el.getValue(expresion, onSuccess, onFail)
so in your case you can do the below
<script type="text/javascript">
function getPrefVal(){
adf.mf.el.getValue("#{preferenceScope.feature.adf.mobile.sample.ProfilePage.showProfileImage.showImage}",
onSucess,onFail);
}
function onSucess(req, res) {
//alert( res[0]['value']);
$("#user").val(res[0]['value']);
}
function onFail (req, res) {
alert("Get Value Failed :" + adf.mf.util.stringify(res));
}
//use the below code instead of $(document).ready() or deviceready
document.addEventListener("showpagecomplete", getPrefVal, false);
</script>
<input type="username" name="xyz" id="user" value= "" />
HTML doesn't know how to resolve an EL expression - see if you have a Javascript API that lets you access the preferences.
The answer to my question is here
http://deepakcs.blogspot.in/2013/08/adf-mobile-how-to-get-preferences-value.html
I will preface this question with the fact that I am extremely new to HTML and CSS.
I currently have an engineering page at my company I have inherited that has a ton of links. I have organized into some general categories. However, it has been expressed that they would love a searchbox to search links.
I do not have PHP available to me due to circumstances out of my control. What I do have is all the links in my index.html file with the text they display associated with them.
My thought it that I can create the engine such that it recognizes the tag, and then searches the "name" associated with the link in the tag. However, I really have no idea where to start in terms of implementing such a script.
Of course, there may be a much easier way. I am open to any new approaches. I am not biased toward any programming method or language. Thank you so much for the help everyone, and I can provide any other non-NDA information I can.
I would look at the jQuery UI Automcomplete library http://jqueryui.com/demos/autocomplete/, specifically the custom data demo.
I imagine the code something like this (note this is untested and definitely not complete for your purposes):
<head>
<script type='text/javascript'>
var urls = [
{
value: "url-text",
label: "URL Text",
desc: "URL"
},
{
value: "url2-text",
label: "URL2 Text",
desc: "URL2"
}
];
$('#search').autocomplete({
minLength: 0,
source: urls,
focus: function (event, ui) {
$('#search').val(ui.item.label);
return false;
},
select: function (event, ui) {
$('#search').val(ui.item.label);
$('#url').val(ui.item.desc);
return false;
}
})
.data ("autocomplete")._renderItem= function(ul,item) {
return $('<li></li>")
.data( 'item.autocomplete', item )
.append( '<a>' + item.label + '<br />' + item.desc + '</a>' )
.appendTo( ul );
};
</script>
</head>
<body>
<input id="search" />
<p id='url'></p>
</body>
Doing it this way does mean you have to keep a separate list of URLs and text in a javascript variable.
You'll need to include jQuery in your index.html.
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' />
Give each link a common class. You can then use jQuery to find the link the user is searching for:
var search = $("#searchBox").val();
$("a.myLinks[href*="+search+"]"); // uses jQuery to select the link, see jQuery selectors
Now you can do things with that link, like show it or navigate to it.
#using (Ajax.BeginForm("Create", "Comment",
new AjaxOptions
{
UpdateTargetId = "newComment",
OnSuccess = "function() { alert('finished " + ViewData.Model.Id + "'); }",
}))
{
...
}
outputs the following markup:
<form action="/Comment/Create" data-ajax="true" data-ajax-mode="replace"
data-ajax-success="function() { alert('finished 34'); }"
data-ajax-update="#newComment34" id="form1" method="post">
As you can see, it has HTML encoded my javascript. How do I prevent this?
EDIT: I have multiple AJAX forms on my page so the onsuccess function needs to know which one called it. In my code, you can see I am trying to pass state to this function. If OnSuccess can only take a function name (and not state), then how can I achieve this?
Personally I would use a standard Html.BeginForm helper with HTML5 data-* attributes that I will AJAXify myself:
#using (Html.BeginForm(
"Create",
"Comment",
FormMethod.Post,
new { data_id = Model.Id }
))
{
...
}
which outputs:
<form action="/Comment/Create" data-id="some id here" method="post">
...
</form>
and then in a separate javascript file I would subscribe for the .submit event:
$(function() {
$('form').submit(function() {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
dataId: $(this).data('id'), // <- pass the data-id HTML5 attribute
success: handleSuccess
});
return false;
});
});
function handleSuccess(result) {
$('#newComment').html(result);
// fetch the data-id of the form that trigerred the AJAX request
var id = this.dataId;
// TODO: do something with this id
}
I prefer this technique compared to the Ajax.* helpers as it gives me all the control I might need. Another advantage is that we get a clear separation between script and markup making the code nice and tidy.
Don't.
The HTML encoding is correct behavior, and the attribute value (as seen from Javascript code) will not be encoded.
I believe that It's because MVC interprets the OnSuccess (and other vars) as the name of a Javascript function and not a bit of Script.
Make a helper function that performs the script you want to act on the submit.