Popup form post prevent site from refresh - asp.net-mvc

I have a kendo grid with a button in it. When the button is pressed it opens up a popup with a file-select input and a button so that the user can save a image. Im using a normal form with a submit button to post my form to my controller. Everything works fine the right data arrives to the controller but then the page refreshes. I just want the popup to close and the grid and the whole page behind the popup to just stay as it is. Here is my controller:
[HttpPost]
public ActionResult SaveData(HttpPostedFileBase file, string id)
{
iResourceModel.SaveData(file, file.FileName);
return null;
}
and my html form:
<div id="details-container">
<form action="/Home/SaveData" method="post" enctype="multipart/form-data">
<span>Select file:</span><input type="file" name="file" id="file">
<input type="text" value=' + dataItem.ResourceId +' name="id" id="id" hidden/>
<button type="submit" id="" >Save file</button>
</form>
</div>

Page reloading after submitting a form is normal behavior. If you want to stop it, you can use jQuery and submit the form in the background.
You can find the jQuery form plugin here : http://plugins.jquery.com/form/
For your case :
<div id="details-container">
<form action="/Home/SaveData" method="post" enctype="multipart/form-data" id="myForm">
<span>Select file:</span><input type="file" name="file" id="file">
<input type="text" value=' + dataItem.ResourceId +' name="id" id="id" hidden/>
<button type="submit" id="" >Save file</button>
</form>
</div>
<script>
$(document).ready(function() {
$('#myForm').ajaxForm(function() {
alert("File uploaded!");
});
});
</script>

Related

Rails 7 Prevent html form from submit to server

I have an HTML form in erb view template
<form id="megapayForm" name="megapayForm" method="POST">
<label for="merId" >MerchantId:</label>
<input type="text" id="merId" name="merId" ><br><br>
<label for="currency">Currency:</label>
<input type="text" id="currency" name="currency" ><br><br>
<input type="submit" id="submit" value="Submit">
</form>
submit.js
$.ajax({
url: 'https://www.cloudflare.com/cdn-cgi/trace',
success: function(data){
},
complete: function(){
$("#" + formId).attr("action", domain + "acb.do");
setTimeout(function(){ paymentForm.submit(); }, 100);
}
});
and rails controller
class transaction
def index
end
end
Every time i press submit, instead of redirect to domain + "acb.do" , it being redirect to rails server transaction#create
How can i make the form being submit and redirect to domain + "acb.do"
I fixed this by changing <input type="submit" id="submit" value="Submit">
to <button id="submit">Submit</button>. So when I press the button it does not call to server but only the javascript function

MVC pass parameter with form action

I got this code in my view that is used for a drag and drop function:
<div class="container">
<form action="~/Home/SaveUploadedFile" method="post"
enctype="multipart/form-data" class="dropzone"
id="dropzoneForm">
</form>
When an image gets dropped in the div the SaveUploadedFile gets triggered. The model im using in the view contains a #Model.Namethat I would love to pass along to the method.
Can I somehow accomplish this in the above code or is it more complicated?
You could put a hidden input.
<form action="~/Home/SaveUploadedFile" method="post"
enctype="multipart/form-data" class="dropzone"
id="dropzoneForm">
<input type="hidden" name="fileName" value="#Model.Name" />
<input id="btn_drop" type="button" value="Drop"/>
...
</form>
Then in jQuery
$('#btn_drop').on('click', function(){
$('#dropzoneForm').submit();
});

Input button in MVC asp.net

How to use Input button for #Html.ActionLink?
In my cshtml I have this code:
<div>
#Html.ActionLink("Back to menu", "HomeController")
</div>
Now I whant to use instead hyperlink button (Back to menu), input submit button, so this button:
<input class="btn" type="submit" value="Back to menu">
Thanks.
You can't - you can use css so the link will look like button, or you can utilize Url.Action and javascript instead. I.E.:
<input class="btn" type="submit" value="Back to menu" onclick="window.location='#Url.Action("Index", "Home")';return false" />
Ok, I solved it, Ondrej Svejdar thanks for advice, I use javascript and works fine:
<input class="someCss" type="button" value="Back to Edit Menu" onclick="Redirect()"/>
And under button I use this javascript:
<script type="text/javascript">
function Redirect() {
var url = "#Url.Action("Registration")";
location.href = url;
}
</script>
So result is:
<input type="button" value="Button" />
value="button" />

unable to display the validation messages from #Html.ValidationSummary() in MVC view

I have a fairly simple form created in a partial view and loading the form on a jquery dialog. The view is tightly bound to a model. When the user clicks on the submit button with out entering any inputs, I need to show the validation messages.
<div>
<form method="post" enctype="multipart/form-data" id="ssimForm" action="Home/ProcessUploadedFile"
onsubmit="return false;">
<div>
<h3>
Select the file to be uploaded :</h3>
<span>
<input type="file" name="UploadFileName" id="UploadFileName" /></span>
</div>
<div>
<h3>
Select the date range :</h3>
<span class="uslabel">From Date(MM/dd/yyyy): </span>
<input class="usdate" id="usfromdate" name="StartDate" type="date" />
<span class="uslabel">To Date(MM/dd/yyyy): </span>
<input class="usdate" id="ustodate" name="EndDate" type="date" />
</div>
<div>
<br />
<input type="submit" id="submitButton" name="submitButton" value="Process File" />
</div>
#Html.ValidationSummary()
<div class="message-success">
<span>#ViewBag.Confirmation</span>
</div>
<div class="message-error">
<span>#ViewBag.Error</span>
</div>
</form>
</div>
Now comes the actual problem. when I submit the form I am able to see the validationSummary object populated with the messages, but they are not getting rendered on the screen.
I am able to see the messages if I replace the content of the dialog with the response from the jquery ajax call, that fetches the entire view from the server side. I do not want to take this approach as I beleive this is not the correct way to return validation summary in MVC.
Am I missing something? Any help is appreciated.
I don't know why you don't have the #using (Html.BeginForm()) { } block.
Here is my blog post for a quick and easy way to set up Validation Summary + Unobtrusive Validation for MVC3+.
http://geekswithblogs.net/stun/archive/2011/01/28/aspnet-mvc-3-client-side-validation-summary-with-jquery-validation-unobtrusive-javascript.aspx

JQuery Mobile - POST a form and get response

Greetings,
I have the following jquery mobile page:
<div data-role="content">
<center>
<img src="./images/logo320.png" />
</center>
<br><br>
<form method="POST" action="./ajax/login.php">
<label for="login_unameLabel">Username:</label><br>
<input type="text" name="login_uname" id="login_uname" /><br>
<label for="login_pwordLabel">Password:</label><br>
<input type="password" name="login_pword" id="login_pword" /><br>
<button id="login_submit" type="submit" data-theme="a">Submit</button>
</form>
</div>
./ajax/login.php returns either "OK" or "NOK". How can I capture this result in my page?
I keep getting the following error in Firebug:
k.data( [Break On This Error]
false)a.mobile.activePage=k;h(k);y&&D&...dd(k).removeClass("
out in reverse "+
It's as if jquery mobile is performing some operation on the result? I don't want this to happen. Do I have to return a valid jquery mobile HTML page from my PHP?
Any insight greatly appreciated.
Many thanks in advance,
Solution: use <input type="button" id="login_submit" data-theme="a" value="Submit" />
Now I can capture click events via:
<script>
$(document).ready(function() {
$("#login_submit").click(function() {
alert('clicked');
});
});
</script>
using data-ajax="false" in form.
then you can disable jquery mobile auto ajax call

Resources