I need to implement a click-once button for my asp.net mvc 2 application. I have just a very simple submit form, and when the user clicks on the submit button, I need to change its image to a "please wait..." type of graphics and disables the click event for further submits until the server comes back.
Is there an example or code snippet for this? I used to be able to do it in the asp.net webforms, but that technique does not apply here.
thanks!
To disable the submit button when you submit the form you can use the onSubmit function for the form and call a javascript function that will disable the button.
For example:
<% using (Html.BeginForm("Create", "Organisation", FormMethod.Post, new { autocomplete = "off", onsubmit = "disableSubmitButton()" }))
{ %>
//Your code
<input id="buttonName" type="submit" value="Create"/>
<% } %>
and then in your javascript section:
function disableSubmitButton() {
document.getElementById("buttonName").disabled = true;
};
Hope this helps.
Here is example of how create ajax login using asp.net mvc and jQuery:
How to implement a Client-side Ajax Login on Asp.Net MVC (A link to the solution for Asp.Net Webforms is in here)
Related
I am new to MVC. i want call database on dropdown value change. Does anybody know how to do that.
Regards,
vangli
MVC does not have a post-back mechanism as such as you had in WebForm (well, this was being carried out as javascript posting the form.
What you can do is create some javascript using jquery if you want to trigger some action when the item in that dropdown changes. it would be, (assuming the id of the dropdown is idDropDown
$('#idDropDown').change(function () {
$.ajax(#Url.Action("AjaxAction", "MyController")', { selection : selectedValue }, function (data)){
//handle ajax response here
};
});
Your action controller will be like this:
public ActionResult AjaxAction(string selection)
{
// do your server-side processing and get your data
return Json(data);
}
With out jquery you can POST the data to controller action using pure java script.
#Html.DropDownListFor(m => m.SelectedValue,Model.SelectListItems,new{ onchange = "this.form.submit();" })
Note: Here simply you can submit form by adding java script code to on change. This is similar that you click on submit button.
I am new to ASP.NET MVC 4 and learning my way around an existing MVC 4 code base. I am trying to find the code that processes the the form corresponding to this submit button. I understand that the action link probably says how to process the "submit" button -- but I don't see any constructors that take three strings for an actionlink in the microsoft documentation.
I am confused because there is no action field in the input tag.
How do I find out what happens once the person hits submit?
#using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data", #class = "disableSubmit" }))
{
...
<div class="buttons">
<input type="submit" value="Upload" /> | #Html.ActionLink("Back to List", "Index", "Admin")
</div>
}
Update When I go to "view source" to see the raw HTML I see
<form action="/Lab/Upload" ...
So that means it goes to the lab/upload controller?
The Javascript for the disable submit looks like this:
// Disable submit button after click
$(function () {
$('.disableSubmit').submit(function () {
if ($(this).valid()) {
$('input[type="submit"]').attr('disabled', 'disabled');
}
});
});
If the submit button performs a regular form submit, then it will be inside of a <form> tag or #Html.BeginForm using block.
BeginForm will submit the form to the action that matches the name of the view, unless there is a parameter being passed that specifies the action name and/or controller name.
IF it is a form tag, then the action="something" attribute of the form tag will indicate the URL being submitted to, which is usually controllerName/ActionName` but could be different depending on what routing is setup.
The ActionLink you see is not related to the form or the submit, it is a regular link which is in effect a way for the user to go back to the previous page instead of submitting the form.
There is also the possibility that there is javascript attached to the submit button. That's harder to find unfortunately due to the many ways that javascript can be wired up to a button.
Edit: Based on your update, I would strongly suspect there's javascript that supports this form. I imagine the submit button is disabled until you meet some conditions that allow it to be displayed. Maybe permissions, maybe filling the form out completely, it's hard to say. Search the javascript for disableSubmit, as I suspect somewhere there is code that removes that class under certain conditions.
Edit 2: What is happening there is it disables the submit button after the first click so that you can't accidentally submit the for twice and cause problems with a duplicate submit(if this is Create form it avoids duplicate records). As far as I can tell there should be an action of the same name as the *.cshtml file that it submits to. Possibly with a [Post] or [HttpPost] attribute on the action.
Check whether the submit buttons in inside a form tag. If yes, what is the action attribute value of that ? That is the place the form will be submitted to.
You may see an HTML helper method called Html.Beginform in the view. This method render a form tag. You can go to the page and check the view source of the page to see what is the form tag looks like and what is the action method attribute value.
Ususally your controller will have an action method marked with HttpPost attribute to handle the form submit. Lets say your mark up is like this
<form action="User/EditUser">
<input type="text" name=Name" />
<input type="submit" />
</form>
Now in your UserController, there may be an action method like this
[HttpPost]
public ActionResult EditUser(SomeModelIfExist model)
{
// TO DO : save and redirect
}
the Html.ActionLink helper method renders an anchor tag. It has nothing to do with the form submit. So your action link helper will return the below markup
Back
I am building an mvc app for reporting. I have a page that has a form on it which contains multiple dropdownlist to choose some criteria for a report. I then have an input button to create the report. This button call a new view from the same controller. The new view gets the values from the page where the criteria is chosen from parameters and uses that to populate it's own view model. This is all working fine.
I would like to open the reports in a new window. When I look at the controller, all of the parameters that are supposed to be coming from the selection page are null. I assume I will have to pass these in via the querystring to be picked up by the controller. Is there a way that I can get the values of the dropdownlists from within my viewpage to construct the querystring?
Is this a good way to accomplish what I am trying to do? Would I be better of using an ActionLink instead of an input button? does it make any difference?
I hope this all makes sense. Thanks for any thoughts.
Just set a target attribute on your form to _blank and it should open the request in a new page/tab depending on the browser being used.
<% using (Html.BeginForm(myAction, myController, FormMethod.Post, new { target = "_blank" })
{ %>
<%-- ... --%>
<% } %>
As NickLarsen says...
You could use the target="_blank" attribute of the form element to display the results in a new window.
<form action="/controller/action" method="post" target="_blank">
Or
<% Html.BeginForm("action", "controller", FormMethod.Post, new { target="_blank" }); %>
//...
<% Html.EndForm(); %>
how to set autopostback for dropdownlist in mvc.net?
You don't - there's no concept of 'autopostback', in the same way that there is no postback concept in the MVC framework.
If you want to submit the form, you can do that via javascript, if you want to update something else via a call to the server, you can set up an AJAX call, probably using jQuery to do so.
There's a bit of an example here.
no jquery required. wrap each hidden id and dropdown in a form with the action to updateproduct. then its just:
#Html.DropDownList("id", (SelectList)ViewBag.Values, new { onchange = "this.form.submit();" })
autopostback supports only in asp.net not in mvc.net, so you just need to write #Html.DropDownList("id", (SelectList)ViewBag.Values, new { onchange = "this.form.submit();" }) or jquery function in the cshtml file script section.
One thumb rule for MVC,
Any method of controller, on
be called by JS or Jquery thru Ajax calling routing.
Can we use it like this...
<% using (Html.BeginForm("PerformSearch", "ClientSearch", FormMethod.Post, new { defaultbutton = "btnSearch" })) %>
Basically I want the enter key to raise the onClick event of btnSearch. This button is just a button, not a submit button.
One of the beauties of MVC in .NET is that it lets you easily write your own JavaScript helpers, which what you need to do in this case. Just write a simple function that binds the 'enter' key press to a click event on that button on pageload.