My aim is to have a button, with default value Block and when the user click on it, it will change the text to Unblock and also after page refresh the text of the button must remain the same, if the text is changed to unblock then after refresh it must remain unblock.
What i have tried uptil now is this:
View code for Button:
input type="submit" value="#ViewBag.SubmitValue" id="Block" style="color: white;
background-color: darkred; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px;
border-top-left-radius: 2px; border-top-right-radius: 2px; padding: 4px 4px;
border: none; padding-bottom:2px "
Controller ActionResult
public ActionResult Block(int Id, Block block, string userAction)
{
if(userAction == "Block")
{
ViewBag.SubmitValue = "Block";
}
if (userAction == "Unblock")
{
ViewBag.SubmitValue = "Unblock";
}
.....
}
I am haivng issue in this passing string userAction in ActionResult, the value of userAction is passing as Null in the Method, so the text of button is not changing and it is showing "Submit" on button
Please help
use a hidden input element named "userAction" and set its value to whatever you need.
<input type="hidden" name="userAction" value="#ViewBag.SubmitValue">
and for default action set the initialized value of userAction like this:
public ActionResult Block(string userAction = "Block", int Id, Block block){
//...
}
whenever you passed nothing named userAction it will be set to "Block" not null
Related
My application have a menu options and I need to change the color of a menu option depend of the selection of a textbox.
In the controller file I wrote this:
[HttpPost]
public ActionResult Rise(int rise)
{
Session["Var1"] = rise;
if (rise != 0)
{
ViewBag.Var1= "class = active";
}
else
{
ViewBag.Var1 = "class = visited";
}
return View();
}
In my css file I wrote this:
a:visited
{
font-size: large;
color: green;
}
a:active {
font-size: large;
color: blue;
}
a:link {
font-size: large;
color: #ffffff;
}
a:hover {
background-color: lightblue;
}
And in my view I wrote this:
<li>Option1</li>
When I execute the application and I write a value in the textbox and click on the submit button I see that the menu option change the colour and change to Green colour again.
I have a listboxfor in my application which works greats. But to make multiple selection I need to press ctrl and click on the item. How can I change this behavior, so every time I click on the item in the list it selects it and when press again it deselects but only one of the selected items.
My listbox:
#Html.ListBoxFor(m => m.selectedCharts, new SelectList(#Model.Graphs.ToList() )
, new { #class = "select_change" }
)
Or maybe I should use different control for this purpose?
Many thanks
I've used Bootstrap Multiselect before, with great success.
If it cannot be a drop down, use this Checkbox list instead.
I have managed to complete a nice looking listbox where user don't need to press ctrl button to select multiple elements. I want to share with you my work. I have used suggested by MartinHN an amazing extension CheckBoxListFor. You can find it on this website MvcCheckBoxList.
My View Code
#{
var htmlListInfo = new HtmlListInfo(HtmlTag.vertical_columns, 0 , new { #class="styled_list" });
#Html.CheckBoxListFor(model => model.ReportSettings.Ids,
model => model.AvailableGraphs,
graph => graph.Id,
graph => graph.Name,
model => model.SelectedGraphs,
new { #class="styled_checkbox" },
htmlListInfo,
null,
x => x.Name)
}
My CSS:
input.styled_checkbox, input[type="checkbox"]
{
visibility: hidden;
width: 0px;
}
.styled_list
{
background: #aeeefb;
border-radius:5px;
padding: 10px 10px 10px 0;
color: White;
font-weight: bold;
}
.styled_checkbox
{
background: #69D2E7;
cursor: pointer;
display: inline-block;
vertical-align: middle;
margin: 3px 0 3px 0;
padding: 5px;
position: relative;
width: 250px;
border-radius:5px;
}
.styled_checkbox:hover
{
opacity: 0.7;
}
.styled_checkbox:checked+label
{
background: #1a9eed;
}
The check boxes are hidden and labels indicates that element is selected or not. I can't insert pictures but it looks good, but you can off course edit style to your own needs.
Hope that helps anyone
i want to create tags for input data.(http://textextjs.com/manual/examples/ajax-with-filter-tags-and-autocomplete.html hear they creating tags using auto complete text box, but i don't want auto complete one)
hear is my code
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#textBox").keyup(function() {
$("#message").val($(this).val());
});
});
</script>
</head>
<body>
<div>
TextBox 1 : <input type="textbox" id="textBox"></input>
TextBox 2 : <input type="textarea" id="message"></input>
</div>
</body>
</html>
hear it reflect data of textbox1 to textbox2.
now what i want is : if user enter any data(words) in textbox1 followed by space then that word should convert into tags in textbox2
First of all type=textarea is wrong. There's no such input like that. You must be using <textarea> instead of that. Secondly, why dont you use contentditable attribute? It works just like a text area but can take HTML, is supported in all browsers, and you can use it on any block element! So replace your second input with this:
TextBox 2 : <div class="target" contenteditable="true"></div>
Then, in your code,
$("#textBox").keypress(function (e) {
if (e.which === 32) {
$(".target").append("<a href='#' class='tag'>" + this.value + "</a>");
this.value = "";
}
});
(Disclaimer) I used the styles from SO's tags, like this :
body {
font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif;
}
.tag {
color: #3E6D8E;
background-color: #E0EAF1;
border-bottom: 1px solid #b3cee1;
border-right: 1px solid #b3cee1;
padding: 3px 4px 3px 4px;
margin: 2px 2px 2px 0;
text-decoration: none;
font-size: 90%;
line-height: 2.4;
white-space: nowrap;
}
.tag:hover {
background-color: #c4dae9;
border-bottom: 1px solid #c4dae9;
border-right: 1px solid #c4dae9;
text-decoration: none;
}
Demo : http://jsfiddle.net/hungerpain/Wky2Z/
To add the tags to an array, have a variable called tags outside the keypress function :
var tags = [];
Then, in the keypress, you've got this if loop right? Push the new value into the array :
if (e.which === 32) {
$(".target").append("<a href='#' class='tag'>" + this.value + "</a>");
tags.push(this.value); //push the value in array
this.value = "";
}
Then, when you need to save it to DB, just join them :
tags.join("");
Then later, when you to retrieve them from DB next time, you could wrap those with the a (what we did in the keypress function)
Demo : http://jsfiddle.net/hungerpain/Wky2Z/1/
Try This:
$(document).ready(function () {
$("#textBox").keyup(function (e) {
if (e.keyCode == 32) {
$("#message").val($(this).val());
}
if ($(this).val() == '') {
$("#message").val('');
}
});
});
JSFIDDLE DEMO
I am trying to customize the look and feel of the checkboxes in my ASP.NET MVC site, using a technique like the one detailed here: http://cssdeck.com/labs/css-checkbox-styles
They work great except when placed in a form. When using the #Html.CheckBoxFor() method, MVC adds an extra hidden checkbox, apparently to make sure that a value is submitted to the form POST when the checkbox is not checked: asp.net mvc: why is Html.CheckBox generating an additional hidden input
When the extra hidden checkbox is on the form, my custom checkbox does not work. I click it but it does not toggle between the states. If I remove the extra hidden checkbox, then it works, but I guess I'll run into problems submitting the POST.
Here is the final html:
<div class="kbcheckbox">
<input checked="checked" data-val="true" data-val-required="The Approved field is required." id="UserEdit_IsApproved" name="UserEdit.IsApproved" type="checkbox" value="true">
<input name="UserEdit.IsApproved" type="hidden" value="false">
<label for="UserEdit_IsApproved"></label></div>
</div>
And here is the css I am using (uses scss)
.kbcheckbox {
width: $checkbox_size;
height: $checkbox_size;
position: relative;
input[type="checkbox"]{
visibility: hidden;
}
label {
cursor: pointer;
position: absolute;
width: $checkbox_size;
height: $checkbox_size;
top: 0;
left: 0;
border-radius: $control_corner_radius;
border: 1px solid $control_border_color;
/*#include box-shadow(1px, 1px, 1px, 0, $control_border_color, inset);*/
/*#include box-shadow(0px, 1px, 0px, $control_background);*/
background: white;
}
label:after {
opacity: 0;
content: '';
position: absolute;
width: $checkbox_size * 0.62;
height: $checkbox_size * 0.25;
background: transparent;
top: $checkbox_size * 0.2;
left: $checkbox_size * 0.1;
border: 3px solid black;
border-top: none;
border-right: none;
#include transform(rotate(-45deg));
}
label:hover {
background: darken($control_background, 10%);
}
input[type=checkbox]:checked + label:after {
opacity: 1;
}
}
Any ideas?
Use the following in your css. You want all your elements to be modified.
input[type = checkbox]:checked ~ label:after {
opacity: 1;
}
Here is the fiddle
You can solve this problem by wiring up an event when the checkbox is checked to change the value on an MVC hidden field instead, essentially doing the same thing without using the MVC helper
#Html.HiddenFor(model => model.UserEdit.IsApproved, new { #id = "chkIsApproved" })
Here is your HTML then
<div class="kbcheckbox">
<input checked="checked" data-val="true" data-val-required="The Approved field is required." id="UserEdit_IsApproved" name="UserEdit.IsApproved" type="checkbox" value="true">
<label for="UserEdit_IsApproved"></label></div>
</div>
Then just use some jQuery to wire up the checked property with the hidden field
$('#UserEdit_IsApproved').change(function() {
$('#chkIsApproved').val($(this).is(':checked'));
});
As long as the MVC hidden field is somewhere, the value will be posted to the controller. It is a little extra work, but it should get you the result you want.
My solution is somewhat hacky but you can just move all hidden fields before the checkboxes using jQuery
$(".checkbox > input[type=checkbox]").each(function( key, checkbox ) {
var hidden = $(checkbox).siblings("input[type=hidden]");
$(hidden).insertBefore($(checkbox));
});
I'm struggling with an Razor syntax with MVC (4), hoping to find someone who can help me with a nice and working solution.
I want a clickable logo(image) and created the following code. This works except of two things. I don't see the image display and secondly, when in an other controller, the routing goes wrong (http4 error).
This is how i've done it now:
Razor:
<h1>#Html.ActionLink("siteHeader", "Index", null, new { #class = "site-logo"})</h1>
OR
<h1>#Html.ActionLink("siteHeader", "Index", "Home", new { #class = "site-logo"})</h1>
e.g. when in a different controller (account/shoppingcart/etc.) and clicking the logo, it results in a 404.
CSS:
/Site HeaderLogo/
a.site-logo {
background: url(images/Solosoft.png) no-repeat top left;
display: block;
width: 100px;
height: 100px;
text-indent: -9999px; /*hides the link text*/
}
Thanks in advance.
Try this:
#Html.ActionLink("siteHeader", "Index", "Home", null, new { #class = "site-logo"})
This is:
public static MvcHtmlString ActionLink(
this HtmlHelper htmlHelper,
string linkText,
string actionName,
string controllerName,
Object routeValues,
Object htmlAttributes
)
Link: msdn
I got the problem cause!
theres nothing wrong with our coding, the thing is theres a class that overrides our image set
theres this lines in Site.css
.site-title a, .site-title a:hover, .site-title a:active {
*background: none;* <=comment this out and the bg will show or remove the .site-title a
color: #c8c8c8;
outline: none;
text-decoration: none;
}
hope it helps
What wizzardz said is correct. Background style in custom css file is overridden by styles in site.css.
Try this, !important - used to give priority to styles to appear in webpage.
In your custom.css page,
a.site-logo {
background: url(images/Solosoft.png) no-repeat top left **!important**;
display: block;
width: 100px;
height: 100px;
text-indent: -9999px; /*hides the link text*/
}
No need to change anything in site.css