I am wondering how would I do this with like jQuery ajax. Right now I have a jQuery ui dialog box popup and it has an html input file on it.
Now when the user clicks import I want to do an ajax post to the server with jQuery.
I am not sure how to pass the file in though to my action view.
Right now I have it doing a full post back so I have this
<% using (Html.BeginForm("Import", "Controller", FormMethod.Post, new { enctype = "multipart/form-data" }))
{%>
<br />
<p><input type="file" id="file" name="file" size="23 accept="text/calendar"></p><br />
<p><input type="submit" value="Upload file" /></p>
<% } %>
Then in my controller
public ActionResult Import(HttpPostedFileBase file)
So I am not sure how to pass in an HttpPostedFileBase with jQuery and how to set enctype = "multipart/form-data" in jQuery.
Edit
Ok well the jQuery form plugin seems to be the way to go.
$('#frm_ImportCalendar').livequery(function()
{
var options = {
dataType: 'json',
success: function(response)
{
alert(response);
}
};
$(this).ajaxForm(options);
});
I was wondering why my json was not working but someone mentioned you can't use it just as is. I am checking out the other link where someone was able to use json.
I am not sure though why in Lck used .submit before the ajax submit method.
Edit
How could I change the file upload json result to return my dictionary array?
Dictionary<string, string> result = new Dictionary<string, string>();
result.Add("Msg", "Success!!");
result.Add("Body", calendarBody);
// how can I change this?
return new FileUploadJsonResult { Data = new { message = string.Format("{0} uploaded successfully.", System.IO.Path.GetFileName(file.FileName)) } };
Using the jQuery Form Plugin, you can accomplish an async file upload. Check-out the following link,
jQuery Form Plugin - Code Samples - File Uploads
http://jquery.malsup.com/form/#file-upload
Good luck!
As suggested by Dominic, use the jQuery Form plugin. The form you already built should already work correctly. Just add an ID to identify it:
<% using (Html.BeginForm("Import", "Controller", FormMethod.Post, new { id = "asyncForm", enctype = "multipart/form-data" }))
and use jQuery Form to post the data:
$(document).ready(function(){
$('#asyncForm').submit(function(){
$(this).ajaxSubmit({
beforeSubmit: function(){
//update GUI to signal upload
}
data: { additional = 'value' },
dataType: 'xml',
success: function(xml){
//handle successful upload
}
});
});
});
Note that the return dataType in forms that upload files cannot be JSON. Use XML or HTML as response in your controller's method.
I was able to upload a file via AJAX using the jQuery Form plugin and a custom JsonResult class as described here.
Use this to return something like your Dictionary
return new FileUploadJsonResult { Data = new { Msg = "Success!!", Body = calendarBody } };
and to get your message in the callback function
success: function(result) {
$("#ajaxUploadForm").unblock();
$("#ajaxUploadForm").resetForm();
alert(result.Msg);
}
Related
I've a form composed by a Kendo combobox and a Kendo file upload:
#using (Html.BeginForm("Methode", "controller", FormMethod.Post))
{
<p> Select country </p>
#(Html.Kendo().DropDownList().Name("country")
.DataTextField("Text").DataValueField("Value")
.DataSource(source => { source.Read(read => {
read.Action("GetMonth", "BudgetStage");
});
}))
<p> Select a .CSV file: </p>
#(Html.Kendo().Upload()
.Name("files")
.HtmlAttributes(new { accept = ".csv" })
)
<input type="submit" value="Submit" class="k-button k-primary" />
<input type="button" value="Ajax" class="k-button k-primary" onclick="postData(this)
}
Here is my C# controller code:
public JsonResult methode(IEnumerable<HttpPostedFileBase> files, string country)
{
return Json("It's OK !", JsonRequestBehavior.AllowGet);
}
This works when I click on the submit button, the controller receives files and string values but I need to display the Json returned value from my page.
To do that, I use this ajax function:
function postData(button) {
var form = $(button).parents('form');
if (form.kendoValidator().data("kendoValidator").validate()) {
$.ajax({
type: "POST",
url: form.attr('action'),
data: form.serialize(),
error: function (xhr, status, error) {
alert(error);
},
success: function (response) {
alert(response);
}
});
return false;
}
return false;
}
When I click on the Ajax button, the backend method is call, return the Json value and my JS code display it.
The problem is I receive the string value but not the selected CSV file (null).
How can I send the file and the string and display the returned Json value ?
Thank you in advance.
The problem is that form.serialize() doesn't really work in this scenario. With kendo it shouldn't be different to ASP.NET MVC + JavaScript, so basically, this should help you.
I am making my MVC application. How do I create a button in my view that a click on it will run a function from controller. I would also like to pass data from the view that the button is in. But I do not want to open a different view. I just want to run a function - Button "save to file" would save the table from the view into a file - would open a Directory browser and save a file on a disk.
This will be done with the help of ajax request from your view. You need to add a simple button on your view and call a jquery function on its onclick event like this:
<input type="button" value="save to file" onclick="saveToFile()" />
Then you can create saveToFile function to send ajax request like this: here you can create your data as per your need of fields you want to post to controller. I just adding firstField and secondField for demo:
<script type="text/javascript">
var data = { "firstField" : "value1", "secondField": "value2" };
function saveToFile() {
$.ajax({
url: "/ControllerName/ActionName",
type: "POST",
contentType: "application/json",
data: JSON.stringify(data),
success: function (data) {
},
error: function (xhr) {
console.log(xhr);
}
});
});
</script>
Your action method will be like this:
[HttpPost]
public ActionResult UseShippingAddress(string firstField, string secondField)
{
//write your logic here to save the file on a disc
return Json("1");
}
Apparently, the correct solution was to use
#Html.ActionLink("weekly - PDF", "GenerateTable", "Account", new { group_id = Model.group_id, class_id = Model.class_id, type = 1 }, null)
And in GenerateTable method just return a proper file.
I'm not well versed in this framework so I need some help here. In a view I want to add a link or a button on clicking which a certain file gets deleted from the server.
I've added this method to the controller:
[Authorize]
public ActionResult DeleteFile(string path)
{
if ((System.IO.File.Exists(path)))
{
try
{
System.IO.File.Delete(path);
}catch(Exception ex)
{
Debug.WriteLine("Deletion of file failed: " + ex.Message);
}
}
return View();
}
Seemed straightforward, though I'm not sure about the return View();. Now in the view, I need a form, because the path to the file that should be deleted needs to be posted to the controller, is that correct? This is what I got so far, mimicked from other code in the project:
#Html.BeginForm("DeleteFile", "Home", FormMethod.Post, new { id = "delete-attachment-form" })
{
#Html.Hidden("path", path)
}
path is a JavaScript variable containing the server path to the file that needs to be deleted. If I'm on the right track here, how do I add a button or a link to click on that will send the form?
Should just be able to add a submit button:
<input type="submit" name="submit" />
You should have a form and a button like this
#Html.BeginForm("Controller", "DeleteFile", new {Path= filePath},FormMethod.Post)
{
//Button
}
Or using Ajax and Jquery
var values = $(this).serialize();
$.ajax({
type: 'POST',
url: "url?path="+path.tostring(),
data: values ,
success: function(response) { //update view }
});
Inside your form you can add a button and then handle the button click in JavaScript.
#Html.BeginForm("DeleteFile", "Home", FormMethod.Post, new { id = "delete-attachment-form" })
{
#Html.Hidden("path", path)
<button id="delete-btn" type="button" class="btn btn-danger">
Delete
</button>
}
Then the <script type="text/javascript"> block:
$(function () {
$('#delete-btn').click(function () {
var query = $('#delete-attachment-form');
var form = query[0];
var toPost = query.serialize();
$.ajax({
url: form.action,
type: form.method,
data: toPost,
success: function (result) {
// display result
},
error: function () {
// handle error
}
})
});
});
Also, this is a good tutorial on deleting in ASP.NET MVC
I am converting a web form to MVC C# razor project. I like to know how I will get the same functionality in Razor where it will create a link and sumbit the form into the same page. The web form code is -
<asp:LinkButton ID="lnkBtn_1" runat="server" Text='<%#Eval("Sales") %>' OnCommand="LinkButton1_Command" CommandArgument='<%#Eval("Sales") %>' ></asp:LinkButton>
Thanks in advance
Try this
#Html.ActionLink("buttonText", "ControllerAction", "YourController ",
new { #sales = YourModel.Parameter}, new { #class =yourcssclass" })
Your Controller
public class YourController : Controller
{
public ActionResult Index()
{
var model = YourDataToDisplay;
return View(model);
}
public ActionResult ControllerAction(int sales)
{
//.....
}
}
You can use ViewData to define ButtonText.
There are many ways to use link button in rezor ,try any of these
<button type="button" onclick="#("window.location.href='" +#Url.Action("ActionResult", "Controller") + "'")">
Link Button
</button>
<a href="#Url.Action("ActionResult", "Controller")">
Link Button
</a>
#Html.ActionLink("Text","ActionResult","Controller")
submitting form into the same page you have to use Ajax Begin Form or use simple json object with a ajax post method. Try like this
$("#btnSave").click(function (e) {
var urlpath = '#Url.Action("ActionResult", "Controller")';
$.ajax({
url: urlpath ,
type: "POST",
data: JSON.stringify({ 'Options': someData}),
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (data) {
if (data.status == "Success") {
alert("Done");
} else {
alert("Error occurs on the Database level!");
}
},
error: function () {
alert("An error !!!");
}
});
You can write an anchor tag. But clicking on the anchor tag usually does not submit the form, but triggers an HTTP GET request. So you need to write some java script to do the form submission.
<form action="Customer/Create">
Submit
</form>
Using jQuery and some unobtrusive javascript code to bind the click event on this anchor tag,
$(function(){
$("#linkToSubmit").click(function(e){
e.preventDefault(); // prevent the normal link click behaviour (GET)
$(this).closest("form").submit();
});
});
Now you can execute the code in your HttpPost action of Create action method in the Customer controller (because that is the form's action set to)
Another option is to keep the submit button inside your form and style it so that it looks like a link as explained in this answer.
if you are new to mvc then you need to check it's basic from MVC tutorials: Please follow below thread for convert your web app code to MVC
https://msdn.microsoft.com/en-us/library/system.web.mvc.html.linkextensions.actionlink(v=vs.118).aspx
#Html.ActionLink("buttonText",new { controller = "ContreollerName", action = "ActionName",
#sales = "Your parameter" })
And then make a action result in your controller
I'm using MVC 5, C# and I'm trying to build a search filter that will filter through upon each key stroke. It works as so, but the textbox erases after submitting. Now this is probably not the best approach to it either. Is there a way to make so when it posts it doesn't erase the textbox, or better yet, is there a better alternative?
#using (Html.BeginForm("Index", "Directory", FormMethod.Post, new { id = "form" }))
{
<p>
Search Employee: <input type="text" name="userName" onkeyup="filterTerm(this.value);" />
</p>
}
<script>
function filterTerm(value) {
$("#form").submit();
event.preventDefault();
}
</script>
I agree with the comments on your question. Posting on every key stroke would be a frustrating user experience.
So, two answers, use ajax to perform the search (which will then keep the value since the whole page will not post) or have a submit button and name the input the same as the controller action parameter.
Controller code (used with your existing code):
public class DirectoryController : Controller
{
[HttpPost()]
public ActionResult Index(string userName)
{
// make the input argument match your form field name.
//TODO: Your search code here.
// Assuming you have a partial view for displaying results.
return PartialView("SearchResults");
}
}
View Code (to replace your code with Ajax):
<p>
Search Employee:#Html.TextBox("userName", new { id = "user-name-input" })
</p>
<div id="results-output"></div>
<script type="text/javascript">
$("#user-name-input").change(function(e) {
$.ajax({
url: '#Url.Action("Index", "Directory")'
, cache: false
, type: "post"
, data: {userName: $("#user-name-input").val() }
}).done(function (responseData) {
if (responseData != undefined && responseData != null) {
// make sure we got data back
$("#results-output").html(responseData);
} else {
console.log("No data returned.");
alert("An error occurred while loading data.");
} // end if/else
}).fail(function (data) {
console.log(data);
alert("BOOOM");
});
}
</script>
A better way is to ditch your Html.BeginForm (unless you actually need it for something else) and use a pure ajax method of getting the data.
So your modified html would be:
<p>
Search Employee:
<input type="text" name="userName" onkeyup="filterTerm(this.value);" />
</p>
<script>
function filterTerm(value) {
$.ajax({
url: '#Url.Action("Index", "Directory")',
data: {
searchTerm: value
},
cache: false,
success: function (result) {
//do something with your result,
//like replacing DOM elements
}
});
}
</script>
You also need to change the action that ajax will be calling (and I have no idea why you are calling the "Index" action).
public ActionResult Index(string searchTerm)
{
//lookup and do your filtering
//you have 2 options, return a partial view with your model
return PartialView(model);
//or return Json
return Json(model);
}
The best thing about this ajax is there is no posting and it's async, so you don't have to worry about losing your data.