I am currently finding problem with my submit button.
I have a page (say Page A) and within this "Page A", I called a PartialView using the RenderAction("ActionName", "Controller", "Parameters").
The PartialView displays correctly. There is a BeginForm("Action", "Controller", null, FormMethod.Post, new { enctype = "multipart/form-data"}) and a Submit button in this "Page A" and when I click on the button, the formpost method called the RenderAction() instead of the FormPost method.
Please help me solve this challenge since my search for solution on this forum and elsewhere is not yielding any results.
You must use Ajax.BeginForm()
If you are using "multipart/form-data" that is mean you are uploading a file with your form.
You can check this out.
Ajax.BeginForm in MVC to upload files
Related
Within a study course project, I have an MVC PartialView called _item, and inside it I put an href link (<a href = '#Url.Action("AddToShoppingCard", "Home", Model)'>) to call and pass parameters to an Action method (AddToShopingcart) in the Home controller which in turn renders another PartialView (_Footer) in the main _layout.
Although I could do that, but the problem is that when I click the ActionLink, it throws me outside the main _layout and displays only the _Footer content in the browser.
You could use an AJAX link instead:
#Ajax.ActionLink(
"Add to shopping cart",
"AddToShoppingCard",
"Home",
new AjaxOptions {
UpdateTargetId = "someDivYouWantToUpdateWithThePartial"
}
)
The Ajax.ActionLink helper will generate a normal <a> tag with the exception that it will add some HTML5 data-* attributes to it that are interpreted by the jquery.unobtrusive-ajax.js script (that you need to include to your page) and which will AJAXify this anchor. The AjaxOptions allow you to specify some properties of the AJAX request such as for example the id of some DOM element that you want to be updated when the AJAX request succeeds. In your case that could be some div that will receive the PartialView returned by the controller action that is being invoked with AJAX. This way only a portion of the page will be refreshed and the browser will not navigate away from it.
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 was trying to redirect from the Account controller (Account/Login) to User/Index by doing below syntax.
return RedirectToAction("Index", "User");
it shows up the correct view but the URL still persist as Account/Login. Can anyone suggest how can i achieve the same. I have tried some of the searches from google but none of them works for me.
It's an issue caused by jQuery-mobile. By default, jQM will make forms use ajax calls, as this is how page navigation is performed in the framework. AJAX navigation is explained in more detail here.
The solution is to add data-ajax="false" to the form tag used for the initial server call.
So your form would look like this:
#using (Html.BeginForm("Login", "Account", FormMethod.Post, new { data_ajax = "false" }))
I want to send the selected page value on the querystring while navigating through paging.
The URL that is generated for paging is like this:
Link/Index?page=2
Link/Index?page=3
But on my URL it only shows Link/Index and performs the Ajax call. But if I disable my Javascript and then navigate through paging it gets Postback and has a URL like
Link/Index?page=2
Which is perfect. But I want this type of URL in an Ajax call as well.
How can I do this? Issue is if we navigate through pages when Javascript is enable it shows Link/Index and when user goes to page no 2 then 3 then 4 and press back button it goes to press page instead of page 3 then page 2.
Here is the code that generates the page links:
<%= Ajax.Pager(
new AjaxOptions {
UpdateTargetId = "divGrid", LoadingElementId = "divLoading"
},
ViewData.Model.PageSize,
ViewData.Model.PageNumber,
ViewData.Model.TotalItemCount,
new { controller = "LinkManagement", action = "Index" }
)%>
This isn't really an issue with the pager, but that's how ajax works. Because you haven't created a new full page request, nothing is stored in history to allow the back button to persist the ajax calls too. You need to use something like jquery.history (http://tkyk.github.com/jquery-history-plugin/) or jquery address api (http://www.asual.com/jquery/address/samples/api/#/section/?id=2.2).
I have an AJAX form that I am creating in my MVC project. If the form is submitted using normal browser function and a page refresh occurs I get validation information rendered in the form (the built in MVC validation based on ViewData.ModelState).
Is there a similiar validation mechanism for AJAX forms?
<% using (Ajax.BeginForm("Create", "GraphAdministration", new AjaxOptions()
{
OnSuccess = "newGraphSuccess",
OnFailure = "newGraphFailure",
HttpMethod = "POST"
}))
{ %>
<!-- some form stuff in here !-->
<% } //end form %>
It really depends on where you are getting the content from to display once the form has been posted. The Validation summary is performed created on the server so that is where you have to do the work.
As an example I was using some partial content in an .ascx file to render a form. You get the form in the page the first time round by calling the action directly with Html.RenderAction
You would have your Ajax.BeginForm etc. in the .ascx file. Then call it directly in an action.
When the Ajax call is made from the browser you get it to post to the same action. That way you can do all of the server side validation that you would normally. You should set up the Ajax call to replace the original form with the new html that is returned by the action.
One thing that you have to be aware of is that the replace JavaScript will replace the content of an element not the element itself so remember to us the id of a surrounding element.
Apologies if that is a little convoluted, if you want more details just comment and I'll flesh out the relevant bits.
Extra Detail:
All of this assumes that you are doing all of the validation on the server.
You are going to have a View that has all of the page stuff in it and then some partial content in a .ascx file, this is where your ajax form lives, it needs to be set to replace content by id. Its easiest if it has the same name as the action your ajax is going to call.
You can use Html.RenderAction to get it into the View. You can also pass in data with other versions of the same method. Your essentially calling it in the same way your ajax code will.
You will need to wrap it all in a div with an id set. Use this id in the partial as the content to replace.
When you render the page the html for the form and all of the ajax stuff will get put in.
When the ajax action is called the partial content will be returned with any validation performed. It will replace the content of the div that you gave the id to.
You can have different versions of the action by using [AcceptVerbs(HttpVerbs.Get)] and [AcceptVerbs(HttpVerbs.Post)] attributes
The main problem with this method is that its not self contained, the div with the id is external to the partial.