I am trying to upload image using Ajax.BeginForm but in my controller the file shows null.
My code is:
#using (Ajax.BeginForm("Create", "PriceManager", new AjaxOptions
{
HttpMethod = "Post",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "PriceList",
OnSuccess = "ClearInputField",
OnFailure = "Fail",
OnComplete = "Complete"
}, new { enctype= "multipart/form-data" }))
I even tried using Html.Begin :
#{
var attributes = new Dictionary<string, object>();
attributes.Add("data-ajax-complete ", "Complete");
attributes.Add("data-ajax-mode", "replace");
attributes.Add("data-ajax-update ", "#PriceList");
attributes.Add("id", "form0");
attributes.Add("enctype", "multipart/form-data");
attributes.Add("data-ajax", "true");
}
#using (Html.BeginForm("Create", "ProductManager", FormMethod.Post,attributes))
Still the file value remain null. Any idea what I am doing wrong here.
Thanks
Try this:
#using (Ajax.BeginForm("About", "Home", new AjaxOptions
{
HttpMethod = "Post",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "PriceList",
OnSuccess = "ClearInputField",
OnFailure = "Fail",
OnComplete = "Complete"
}, new { enctype = "multipart/form-data" }))
{
<input type="file" name="flResim" />
<input type="submit" value="send" />
}
I tried and worked.
Related
It redirects to whole new page instead of just updating the current one, I have unobtrusive scripts and web.config stuff. Why is this not working?
<div id="preview-image-placeholder"></div>
#foreach (var item in Model)
{
using (Ajax.BeginForm("PreviewImage/" + #item.Id.ToString(), "Music", null, new AjaxOptions { HttpMethod = "Post", InsertionMode = InsertionMode.Replace, UpdateTargetId = "preview-image-placeholder" },
new { #enctype = "multipart/form-data", #item.Id }))
{
#Html.AntiForgeryToken()
<input type="file" class="upload-image" id="upload-image-file_#item.Id" name="file" accept="image/*">
<button class="btn btn-default" id="btn-preview_#item.Id" style="display: none" type="submit"></button>
}
}
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
Controller:
[ValidateAntiForgeryToken]
[HttpPost]
public PartialViewResult PreviewImage(HttpPostedFileBase file, int id)
{
//Do other code stuff
return PartialView("_DisplayImage", song);
}
_DisplayImage partial view:
#model IEnumerable<MusicSite.Models.UploadedSong>
#using MusicSite.CustomHtmlHelpers;
#foreach(var item in Model)
{
if (#item.CoverImageBytes != null)
{
#Html.ImageFor(x => item.CoverImageBytes, #item.SongName + " Image", new { #id = "preview-image" })
}
}
Besides unobtrusive scripts you must add Microsoft Ajax libraries too (MicrosoftAjax.js and MicrosoftMvcAjax.js) so that Ajax.BeginForm works correctly.
Regards,
I'm a newbie in web. Now I'm learning mvc and i have a question. A have a knockout model and a Ajax.BeginForm. I can call "Todo" function as callback without error but it can't work when I try to use "success" function in model like (new AjaxOptions() { HttpMethod = "Post", OnSuccess = "LoginViewModel.success")
#using (Ajax.BeginForm("Todo", "Account", new AjaxOptions() { HttpMethod = "Post", OnSuccess = "Todo" }))
{
<input type="text" name="UserName" data-bind="value: name"/>
<br />
<input type="password" name="Password" data-bind="value: password"/>
<input type="submit"/>
}
<script type="text/javascript">
function LoginViewModel() {
var self = this;
self.name = ko.observable("Hello");
self.password= ko.observable("1234");
self.success = function () {
alert("Hello!");
};
}
ko.applyBindings(new LoginViewModel());
function Todo(data, status, xhr) {
alert("asd");
}
</script>
You should do the following:
var viewModel = new LoginViewModel();
ko.applyBindings(viewModel);
Then you can use:
(new AjaxOptions() { HttpMethod = "Post", OnSuccess = "viewModel.success")
You can see here that you need to create an object of the view model and then call the success method of the object.
I'd also recommend to just use jquery for the ajax calls instead of using the ajax in mvc.
Why is IE behaving like this? It works fine on Chrome and firefox so i got this in
view.ascx
<% using (Ajax.BeginForm("Action1", "TheController", new { pid= Request.QueryString["pid"] }, new AjaxOptions { InsertionMode = InsertionMode.Replace, HttpMethod = "POST", UpdateTargetId = "setting-modal-body", OnSuccess = "fnPreloadAttr" }, new { #class = "form-horizontal", id = "setting-edit-form" }))
{%>
<div id="setting-modal-body" class="clearfix">
<%Html.RenderPartial("SettingModal"); %>
</div>
<%} %>
TheController.cs
[HttpPost]
public ActionResult Action1(SettingModel setModel)
{
ModelState.Clear();
setModel.Aa="1";
return PartialView("SettingModal", setModel);
}
it works fine and replacing the content of setting-modal-body but shortly after that IE redirect the page to Action1 because of 'onload' event, how to prevent that from happening?
Giving up on using ajax.beginform, it just doesn't return false after onsubmit is done, so I use this instead
<form action="/TheController/Action1?pid=<%=Request.QueryString["pid"] %>" class="form-horizontal" id="setting-edit-form" method="post" onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, httpMethod: 'POST', updateTargetId: 'setting-modal-body', onSuccess: Function.createDelegate(this, fnPreloadAttr) });return false;">
mvc2 ajax is not good
this is my button:
#Html.ActionLink("Deletar", "Deletar", new { id = item.ID })
I tried to make a confirm question with Ajax like this
#using (Ajax.BeginForm(
"AjaxAction",
new AjaxOptions {OnBegin ="Deletar",Confirm="Você realmente deseja isso?" }))
{ #Html.ActionLink("Deletar", "Deletar", new { id = item.ID },new { id = "Deletar" }) }
it does not work? what can i do?
With standard link:
#Html.ActionLink(
"Deletar",
"Deletar",
new { id = item.ID },
new { onclick = "return confirm('Você realmente deseja isso?');" }
)
or if you want to use an AJAX link:
#Ajax.ActionLink(
"Deletar",
"Deletar",
new { id = "item.ID" },
new AjaxOptions { OnBegin = "Deletar", Confirm = "Você realmente deseja isso?" }
)
or an AJAX form:
#using (Ajax.BeginForm("AjaxAction", new { id = item.ID }, new AjaxOptions { OnBegin = "Deletar", Confirm = "Você realmente deseja isso?" }))
{
<input type="submit" value="Deletar" />
}
When I attempt to get my actionlink to call the colorbox to open it keeps returning "colorbox is not a function"
#Html.DropDownList("JobTypeId", String.Empty) | #Ajax.ActionLink("Add Job Type", "AddJobType",
new AjaxOptions
{
UpdateTargetId = "inline_form",
InsertionMode = InsertionMode.Replace,
HttpMethod = "GET",
OnSuccess = "openbox();"
})
//in header
<script src="#Url.Content("~/Scripts/jquery.colorbox-min.js")" type="text/javascript"></script>
<script type="text/javascript">
function openbox() {
$.colorbox({ width: "50%", inline: true, href: "#inline_form" });
}
</script>