I'd like my users to be able to upload a picture to my server and without having them switch pages have that image bounced back to a div on that site once the upload has finished.
This is for a "Change your profile picture" page. I need to get the picture back so I can invoke the jCrop jquery library on it so they can crop the picture to their liking.
Here's what I have so far:
#{
ViewBag.Title = "Profile Picture";
}
<h1>Please choose your new profile picture.</h1>
<input type="file" name="file" />
<input type="submit" value="OK" />
If I put in the #using BeginForm the form is posted back and the page loads somewhere new. I don't want this behavior. How do I do this with AJAX without reloading?
You can't submit a file via ajax unless your browser supports the file API. https://developer.mozilla.org/en/using_files_from_web_applications
You can create an iframe and use that to submit your image.
How can I upload files asynchronously?
Related
I'm POSTing and trying to re-load a partial view with the new data using Ajax like this:
Index.cshtml
<div id="left-column">
#Html.Partial("~/Views/Project/_ProjectList.cshtml", Model.ProjectList)
</div>
~/Views/Project/_ProjectList.cshtml
#using (Ajax.BeginForm("Create", "Project", new AjaxOptions
{
HttpMethod = "POST",
UpdateTargetId = "left-column"
}))
{
<h3>Create a new project</h3>
<div class="form-group">
<label for="new-project-name">Name</label>
<input type="text" class="form-control" id="new-project-name" name="Name" placeholder="Example" />
</div>
<button type="submit" class="btn btn-primary">Create Project</button>
Cancel
}
Then my Controller returns the PartialView after some db work:
[HttpPost]
public PartialViewResult Create(Project newProject)
{
db.Projects.Add(newProject);
db.SaveChanges();
var projectList = db.ProjectLists.SingleOrDefault(pl => pl.Id == 1);
return PartialView("~/Views/Project/_ProjectList.cshtml", projectList);
}
I would expect the _ProjectList partial view to load into the #left-column element with the new projectList passed in by the Controller, but instead, the entire View is being overwritten, so the entire body of the new HTML source looks basically like this:
<body>
<!-- all the stuff from the _ProjectList partial -->
</body>
It's worth noting that after the partial view returns, the URL reads /Project/Create, which I wouldn't expect.
I've included jquery-validate and jquery-validate-unobtrusive, and the console isn't showing any errors, so that shouldn't be the problem.
Any idea what's going on?
When using Ajax.BeginForm helper method to do ajax form posting, you need to include the jquery.unobtrusive-ajax.js file as well. This file has the code to handle the submit button click event and send the form asynchronously rather than doing the normal form submit.
If you do not include this file, the form submit will be normal. My guess is that you missed to include this file and hence missing the ajaxified form submit experience.
So make sure to load this file after jQuery
#Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
Here is the link to nuget page if you want to add this file via nuget package manager.
Benjy got it in a comment above. It was a jQuery version issue. I'm running 3.1.0, and jquery.unobtrusive-ajax stopped working with jQuery version 1.9.
Following is the HTML form code, for uploading text value and a JPEG file.
<html>
<head></head>
<body>
<form action="https://mywebsiteforexample.com/" method="post" enctype="multipart/form-data">
<input type="text" name="id" value="01"/>
<input type="file" name="image">
<input type="submit" value="send">
</form>
</body>
</html>
Problem is whenever I have to upload the file on server, I need to manually browse the file to upload it. I want to write the same code in C# so when I run the code it itself select the file by path given, and upload the file so I don't need to browse and select the file manually. Is it possible.
You don't need to write code that fills input elements (if you want, use Selenium with C# driver). Just simulate POST action from simple console application using for e.g. HttpClient.
There are plenty of questions on SO how to do it, e.g. C# HttpClient 4.5 multipart/form-data upload
Thanks for checking.
I am building a web application using angularjs. i have two buttons one will do a Ajax post to server using angularjs and the other will to a normal html post to server. the reason i want the second one to do a direct post to server is that i want to generate an excel document on server and return it tp user to download on response.
please how can i disable angularjs from capturing my form submit for the secont submit button
I'd say that the simplest way is to change the button that shouldn't post the form to not be a form button, but another element that doesn't have that default behaviour. That is, change this:
<form>
<input type="text">
<input type="submit" ng-click="doStuff()" value="Ajaxy things">
<input type="submit" value="Real post">
</form>
to:
<form>
<input type="text">
<a ng-click="doStuff()">Ajaxy things</a>
<input type="submit" value="Real post">
</form>
And style the a to look like a button.
Is there anyway I can do the following code in razor?
<div>
<c:import url="http://hostName/HTML-file-name/" />
</div>
I would like to pull HTML from a given location and render it on a page. This should be possible...
Hope this makes sense...
In Razor, no. In HTML yes:
<div>
<iframe src="http://hostName/HTML-file-name/"></iframe>
</div>
Well actually you could use server side code to send an HTTP request to the remote resource and display the result inline:
<div>
#Html.Raw(new System.Net.WebClient().DownloadString("http://hostName/HTML-file-name/"))
</div>
But bear in mind that this will fetch only the content situated on the specified address. If this is for example an HTML page referencing external CSS, and javascript files, they will not be retrieved.
<FORM id=loginForm name=loginForm method=post
action="http://www.example.com/login.php">
<INPUT name=username>
<INPUT name=password>
<INPUT type=submit value="Log In" name=action_login>
</FORM>
Is there any way of changing name=action_login to name=action_signup and post username and password to http://www.example.com/signup.php
in the server site it has name=action_login but I would like to change this on the client side and not touch the server site.
If you are using FireFox, get the Firebug addon which lets you modify markup in real-time.
Chrome has a built-in similar tool.
Right click -> Inspect Element