I have two button in my cshtml page. When i click the first button data fetch from the database and bind it my controls. The records are many so the second button goes down, then i click the second button same thing happened fetch from the database and bind the grid, so the page is loaded then the page goes up. I want to stay same place when i click the second button. How to prevent it.
make your button like this :
<input type="button" id"button2" onclick="CallAjax();return false;"/>
//then in javascript
function CallAjax()
{
//your ajax call here to retrieve or update data
}
This is MVC 101...
Make your button a standard HTML5 button, which calls a JavaScript function on click...
<input type="button" id="goButton" value="Go ยป" onclick="goFunction();">
(I don't think you have to "return false" with a button, only with a submit)
Then, use Razor helpers in your view to do the Ajax call to the controller...
function goFunction() {
var url = '#Url.Action("MyActionMethodName", "MyControllerName")';
var settings = { 'some data': 'some values' };
$.ajax(url, settings);
}
See the JQuery Ajax page for more information about how to work the "settings" object.
BTW - sounds like you are "paging a grid" but you just forgot to say so... use a tool for that, such as Kendo. Paging is solved, don't solve it again.
Related
I am creating a simple mvc application where the user uploads a document and clicks submit on a form to upload the file. I am trying to change the 'Upload' text to 'Pending' while the computer is uploading the document to the database (it takes five minutes).
I have something like this:
<input type="submit" class="btn btn-primary btn-block" value="Upload" onclick="this.disabled = true; value = 'Pending';" />
which changes the text of the 'Upload' button to 'Pending'. However, if the user clicks the 'Upload' button when the file has not been submitted the text of the 'Upload' button still changes to 'Pending', even though the computer is not uploading the document to the database.
Is there someway I can do this - with Javascript or something else?
you could create a custom 'button'
merely a pretty div, and attach a javascript function to its 'onclick' event.
next, in the javascript function you can either set the text of that div to "uploading" and
do a
document.forms.yourFormName.submit();
and get rid of your input button,
or make that button's visibility to "hidden"
and in the javascript use jQuery to find the button and do a
.toggle("click");
Try something like this
onclick="this.disabled = true; this.value= 'Pending';"
Although from server side change text of this one after file has been uploaded
And if you want to check file has a file or not
onclick="if($('#fileupload').val()!=''){this.disabled = true; this.value= 'Pending';}else{$('#fileupload').focus();}"
Using jQuery:
$("form").submit(function() {
$('input[type="submit"]').attr('disabled', 'true').val('Pending');
});
Or you can do:
$('input'[type="submit"]').click(function(e){
if ($('#upload').val != "") //if the input isn't empty (assuming id is called #upload)
{
$('input[type="submit"]').attr('disabled', 'true').val('Pending');
$('form').submit();
}
e.preventDefault();
});
So the submit button will only be changed to disabled and change value when then form is submitted, rather than just when the button is clicked.
I have an ASP.NET project (non-MVC) and I'm also using Bootstrap 3.0. This is my first time using this combination and need some guidance.
I have a gridview with a buttonfield column. Right now everything is showing up just fine with my gird and Bootstrap table formatting and its binding to my datatable - no problems there.
Next, I want to make the click of the button in the Buttonfield column to initiate a modal window and display a modal based on a unique ID from the row button that opened it.
I don't really know how to tie this all together with ASP.NET and Bootstrap. HTML literals? Dynamic ASP.NET panels? It doesn't matter to me whether there is a postback or not, I'd really just like some guidance or even pseudo-code on how these can be tied together.
Since the OP specifically requested bootstrap help...
You should go through the bootstrap documentation for modals http://getbootstrap.com/javascript/#modals
It makes no difference if you are using MVC or not and you should not need to do any kind of post back to display the modal.
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" />
Will trigger element with id myModal to be shown.
Using bootstrap's own demo code in this jsfiddle demonstrates opening and dismissing the modal.
For the second part of the question, this updated jsfiddle shows how you can also use the button click event to set a value in the modal. You could do other actions in that event handler like get or send data to the backend or change other elements in the modal.
For your case, you would want to handle all button clicks in a single event handler but you can store the id in a custom attribute on the button element. I like to use custom attributes instead of parsing from name, id, or class attributes. This is the bootstrap convention.
$(function() {
$('button.btn').on('click', function() {
var value = $(this).attr('data-value')
$('div.modal').find('#target').text(value);
});
});
Here I have broken out how to get the custom attribute value from the button instance which was clicked.
Post what you have so far and what you still can't get working.
This also shouldn't be tagged with C# or asp.net as that is irrelevant.
You might need a simple js function to take care of that(as mike mentioned this has nothing to do with using or not using bootstrap since it is just some css stuff):
var RunDialog;
$(document).ready(function () {
RunDialog = $("#Id").dialog();
});
You can use ASP.Net Ajax ModalPopup for ASP.Net Web Form. You can google a lot of examples regarding GridView with ModelPopup.
ModalPopupExtender inside a GridView ItemTemplate
I want to make the click of the button in the Buttonfield column to
initiate a modal window and display a modal based on a unique ID from
the row button that opened it.
ModalPopup should work with Bootstrap.
I wonder if there is way to run JS code whenever a asp.net page is contacting the server.
I.e. I'm looking for a general event handler that is triggered whenever a call to the server is made for runat="server" components.
I know there's a way to get jQuery.ajax() to run JS code before and after a call to the server is made, but I'm not sure how to do it in asp.net. Especially, since this projects uses a lot of custom components.
The goal here is to show some kind of loading image when a button is clicked, to prevent the user to click a button twice and also to show the user that the system is working.
If the click causes the page or an updatepanel to refresh, I'd only like to display the loading image before the refresh, eg. User clicks, "loading" is shown, page/update panel is refreshed (causing the "loading" to disappear), the new page/content is displayed as normal.
Update 1:
I can't use UpdateProgress because some of the buttons aren't inside UpdatePanels. What I really want to do is to fire a JS as soon as any button/control that will contact the server is clicked. I.e. if the user clicks a dropdown which doesn't contact the server, nothing should happend. But if that dropdown has any connection to the server, a JS should be run.
I understand that this is ASP.NET Ajax and not jQuery Ajax, I only used jQuery as an example. Because I've used a jQuery method before (with jQuery Ajax) to trigger JS before the server call was made. Eg. to lock the element that was clicked or to display a "Loading..." screen.
I could of course add a bit of a JS hack to every page which adds a "onclick" event to every button manually, but I thought it would be better if there was a general solution for this (since I've got lots of pages, each with a few buttons that contact the server on them).
Update 2:
When I think about it, it doesn't necessarily need to be a JS that is triggered. It would be good enough if the page somehow only made sure that the same button wasn't clicked twice. Either by disabeling the button or by adding something in front of it (like a "Loading..." screen).
You can use an UpdateProgress for this to use with update panels, but if you are doing a full page postback (i.e. not ajax) the only loading animation you can have is the browsers own.
UpdateProgress:
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
Shiny loading aninmation
</ProgressTemplate>
</asp:UpdateProgress?
Here is how you can do it using jquery:
$(function() {
$('a[href]').on('click', function(e) {
var self = this;
e.preventDefault();
loadAsync($(self).attr('href'));
});
});
function loadAsync(url) {
$('div#result').fadeOut(200, function() {
$('div#loader').fadeIn(200, function() {
$.get(url, function(data) {
$('div#result').html($(data));
}).done(function() {
console.log('done');
}).fail(function() {
$('div#result').html('Error');
}).always(function() {
$('div#loader').fadeOut(200, function() {
$('div#result').fadeIn(200);
});
});
});
});
}
I had a simple page like this:
A.aspx -
has an asp TabControl make user change to B.aspx or back, and a button will use javascript confirm user to do something.
B.aspx -
has the same TabControl like A.aspx , just show some message here.
button code in A.aspx like this:
<button id="do" onclick="if (confirm('you sure?')==false) { return false; };"></button>
and my Response.Redirect code in A.aspx.cs TabControl_TabChanged() like this:
Response.Redirect("b.aspx");
It work fine before I click the button, if I click it and select 'ok' it still fine,
but when I select 'cancel', the Response.Redirect() will run but the page didn't change.
please help me find the problem.
Just Replace 'onclick' for javascript with 'OnClientClick'.
I would try to set a jQuery event on my Button
<form id="submitform">
<button id="do" >change</button>
</form>
$("#do").click(function(e) {
var r=confirm("you sure?");
if (r===false)
{
e.preventDefault();
}
});
perhaps this helps
I have an ASP.NET MVC 4 view. In the view, I have
<form action="/myAction" method="post">
...
<input type="submit" value=" Save " onclick="this.disabled = true; this.value = ' Please wait... '; return true;" />
</form>
By disabling the button, the form never gets submitted. However, I would like to disable the button after a user clicks it. The reason I want to disable it is to prevent the user from clicking the "submit" button multiple times. What am I doing wrong? I thought if I returned true, the form would still submit.
Disable the button in your form's submitted event, not the button's click event. This is because the click event fires before the form is submitted - though you are returning true, so that shouldn't cause the submission to fail, I don't think.
Use ActionFilters. This blog post has a class you can just drop into your project, decorate your actions and you're done.