I am using Visual Studio 2010. Also I am using Razor and trying to develop an MVC application. I am using MVC4 and HTML5. I have following code
<input type="button" value="Click Me"
onclick = "window.location.href('#Url.Action("UserDetails", "User")')" />
Where UserDetails is my action and User is my controller. Whenever I click the button Click Me, User Details is returned. This happens properly in IE. But the same is not working for Mozilla and Chrome. an anyone suggest me on this. I went through google, and I have seen that many people faced the same issue. I tried couple of approaches given, but I could not be successful.Can you please tell where am I going wrong.
Regards
If your button's purpose is purely to redirect to another view, you should use a HTML Anchor (a) instead of an input element:
#Html.ActionLink("Click Me", "UserDetails", "User", null, new { #class = "button" })
This will render as:
Click Me
Then you can use the button class to style your link as you wish (ie. make it look like an input button, if that's your desire).
Related
working with https://github.com/matfish2/vue-tables-2 with Vue.js v2.6.11
Hello, a junior dev learning Vue.js (coming from React world). I'm trying change the filter/search box to fire on the click of a button I created, rather than after every keystroke (its default functionality). Eventually, I would also like to apply my own custom filters that are selected from a dropbox to apply when my search button is clicked.
I can't find the code where the search event is being triggered in order to redirect it to my button press. If anyone has any insight working with VueTables2 and could help point me in the right direction, it would be very much appreciated. Thanks!
There's a way to do this using ref and a function, documented here
https://matanya.gitbook.io/vue-tables-2/methods
#1. Add ref to table
<v-client-table :columns="columns" v-model="data" :options="options" ref="myTable">
#2. add method
methods: {
customFilter: function(){
this.$refs.myTable.setFilter('A')
}
#3. add method as event listener
<button #click="customFilter">Filter 'A'</button>
We have been having a very strange problem in a vue-js (#vue-cli, Build version) application. There was a button in App.vue that had an onclick
<button #click="goIRList" id="irlistBtn">IR List</button>
that was working for fine for some users, every time, and not others. For the others, I checked (with alerts) that the goIRList code was not reached at all. These others had this issue with any browser we tried. They did not have the issue when Vue+Developer Tools was open - making it harder for me to debug it.
Instead of the goIRList code, these users got a page with just the error message
Cannot GET /menu.csp
That was especially perplexing, because menu.csp is code from a completely different system, though one also associated with the same computer. It is never referenced in the vue-js application.
Eventually I realized that what was happening was a submit, even though the button was not in any form on the page [I had thought that a button is only a submit type by default, if it is inside a form]. As soon as I added a type, <button type="button"...>, the issue went away completely.
Could someone explain why this was happening? And why did it work for some users? Thanks!
Update: and now the problem is back, same conditions: for them and not for me. Nothing changed. I also added .prevent to the button's onclick:
<button type="button" #click.prevent="goIRList" id="irlistBtn">IR List
and no help. So maybe that wasn't the issue. Anyhow, now I'm asking for a fix as well as an explanation. Thanks!
Add a "submit" event catcher in the form, and prevent the default action.
<template>
<div id="app">
<form #submit="submit">
<input value="Tom">
<button>Submit</button>
</form>
</div>
</template>
<script>
export default {
name: "App",
methods: {
submit(e) {
e.preventDefault();
console.log("Success!");
}
}
};
</script>
And someone pointed out the answer to me. Ridiculous: those two buttons were hidden underneath a logo image that was higher up on the page. It was the image that contained the bogus link.
I never got the error, because I can't see so well, so I keep the sizing high, and the buttons were far away from the logo. Others had a more normal page sizing, and everything got smaller except for that image; the invisible margin of the image went over the buttons, and someone trying to click on the buttons triggered the link.
I set the image to resize with the page and all is well.
I have been programming in webforms and recently started learning .NET core .Is there any equivalent of Page.Focus or Focus of webforms in .NET Core . I searched in the internet and found some older articles of MVC where they used javascript ,was wondering if there is any solution without javascript.I have a contact us form that is at the bottom and needs to be scrolled down ,however after submit the page loads again and i am taken to the top of the page ,i need to keep the focus on submit button.
I have been programming in webforms and recently started learning .NET core .Is there any equivalent of Page.Focus or Focus of webforms in .NET Core.
Currently, we can not create WebForm project with using WebForm server controls directly in ASP.NET Core. And as poke mentioned in comment, there is no equivalent project template that you can migrate from ASP.NET WebForm.
But you can try Razor Pages that make coding page-focused scenarios easier, and you can define different handler methods in .cshtml.cs to handle different logic, which would be similar as you did in ASP.NET WebForm.
I have a contact us form that is at the bottom and needs to be scrolled down ,however after submit the page loads again and i am taken to the top of the page ,i need to keep the focus on submit button.
You can try following approaches:
Approach 1: set autofocus for your input, which would help focus that control automatically when the page is loaded.
<input type="submit" value="Submit" autofocus />
Approach 2: store scroll position in localStorage, then dynamically scroll the window to a particular place based on the stored data while page loads.
<input type="submit" value="Submit" onclick="myfunc();" />
JS code
<script>
function myfunc() {
localStorage.setItem("scrollY", window.scrollY);
}
$(function () {
var y = localStorage.getItem("scrollY");
if (y != "" && y != null) {
window.scroll(0, y);
}
})
</script>
Test Result
I have a straightforward XPage that lets a user answer a question with a simple Yes/No/NA response using radio buttons. I have restyled the radio buttons to look like a bootstrap button group to make it visually more interesting for the user. If the user chooses "Fail" then they are informed that they need to do something else - easily done with a simple partial refresh to a div further down the page.
This all works fine.
The problem I'm having is that I'd like it so that when the user selects an option, I would like to add a new class of "active" to the selected option so that it highlights in a pretty colour. But for the life of me I can't get this to work and though I'm sure it's a straight forward problem, I can no longer see the wood for the trees.
My current (abridged) iteration of the radio button code is this:
<xp:div styleClass="btn-group item-result" id="edit-result" loaded="${Question.open}">
<xp:radio text="${lbl.kwPass1}" id="itemPass"
styleClass="btn btn-pass #{(item.itemResult eq '0')?'active':''}" groupName="itemResult"
selectedValue="1">
<xp:eventHandler event="onchange" submit="true"
refreshMode="partial" refreshId="actionAlert">
<xp:this.script><![CDATA[XSP.partialRefreshPost('#{id:edit-result}');]]></xp:this.script>
</xp:eventHandler>
</xp:radio>
<!-- other radio buttons -->
</xp:div>
<!-- other page compenents -->
<xp:panel id="actionAlert">
<!-- panel content and appropriate rendered value -->
</xp:panel>
This was attempting to do a chained partial refresh on the radio button container so that the EL would evaluate and apply/remove the 'active' style based on the document datasource ('item') value. I have also tried using dojo.addClass, dojo.removeClass, XSP.partialRefreshGet and other options. I don't mind what the solution is as long as it's efficient and works. I'd prefer not to move the actionAlert panel to within the same container as the radio buttons and I can't do a full page refresh because there are other fields which will lose their values.
Some notes:
I'm not using a RadioGroup control because it outputs a table and I haven't got around to writing my own renderer for it yet. Single Radio button controls work fine for what I need them to do.
I originally tried using the full Bootstrap solution of using "data-toggle='buttons'" (source) which sorts out applying the "active" style fine but then, inevitably, prevents the partial refresh from working.
the radio button styles are clearly not Bootstrap standard
Any assistance pointers or, preferably, working solutions would be appreciated.
You need to aim your partial refresh at the div containing all your radio buttons. Give it an id, so you can address it.
Partial refresh, as the name implies, refreshes one element and its content only. So you target the element that covers all of the items you need to recompute.
Stepping away from the problem, a couple of beers and an episode of iZombie later, I realized what I was doing wrong and sorted it out. So, for posterity, here is the simple solution that I swear I tried earlier but clearly works now:
<xp:div styleClass="btn-group item-result" id="edit-result" loaded="${Question.open}">
<xp:radio text="${lbl.kwPass1}" id="itemPass" value="#{item.ItemResult}"
styleClass="btn btn-pass" groupName="itemResult" selectedValue="1">
<xp:eventHandler event="onchange" submit="true" refreshMode="partial" refreshId="actionAlert">
<xp:this.script><![CDATA[dojo.query('.item-result > .btn').removeClass('active');
dojo.query('.btn-pass').addClass('active');]]></xp:this.script>
</xp:eventHandler>
</xp:radio>
<!-- et cetera -->
The many places I was going wrong:
In my code in the question, I was calling XSP.partialRefreshPost in the CSJS script of the radio button when it should have been in the onComplete of the eventHandler. It has to be chained to another partial refresh so that it runs after it, not at the same time. I did end up getting this right - but overlooked something I'll come to in point 3.
In my original attempt to use Dojo, my first mistake was to try and target the ID of the radio button, something like:
dojo.addClass(dojo.byId('#{id:radio2}'),'active');
This actually works as expected, so long as you remember that the ID of the radio button on the XPage refers to the actual radio button control and not the label wrapping; and the label is what I wanted to style. So the class "active" was being actually being added, just not to the element I thought it was. I should have spotted this in my browser code inspector except for the third thing I got wrong:
Ironically, I sorted out the first issue, remembering to put the XSP.partialRefreshPost into the onComplete - and then didn't remove it when trying to run the Dojo.addClass(). So I didn't notice the mistake with the addClass targeting the wrong element because after it ran, the partial refresh updated the container and removed the class I had just added which made me think that nothing was working.
So now I have some neatly styled radio buttons that don't look like radio buttons and it's all managed client side without any unnecessary partial refresh trips to the server barring the one where I actually need to look stuff up from the server. And the vital lesson is - sometimes you just need to step away from a problem and come back to it with fresh eyes later on.
Is there a way using dojo/dijit to disable the submit button till all the fields in a form are valid. Kind of like having a dojo > method > onChange inside the form? So the submit button only becomes enabled when all the form elements have meet their criteria?
Are you using a dijit.form.Form widget as your form? If you are, I would suggest connecting to the Form's onValidStateChange event. The docs for this event specifically state your use case:
onValidStateChange
Defined by dijit.form._FormMixin
Stub function to connect to if you want to do something (like disable/enable a submit button) when the valid state changes on the form as a whole. Deprecated. Will be removed in 2.0. Use watch("state", ...) instead.
The best way to see what events are available for a given widget is to look at the API Documentation for the widget you are interested in under the "Event Summary" heading. The dojocampus reference documentation often leaves out examples for references to some of the more obscure features of the widgets.
I would suggest to have a hidden button which will submit the form. When you click visbile button run a javascript function that validates all the input and then clicks on the hidden button to submit the form. Please find the pseudo code below
<form action="register">
<input dojoType="dijit.validation.TextBox"/>
<button onClick="validateall()">submit</button>
<button id="submitForm" type="submit" hidden="true"/>
</form>
function validateAll(){
if(AllOk){
clearErrorMessage();
dojo.byId('submitForm').click();
}else{
showErrorMessage();
}