I am using, kendo upload for multiple files. Synchronous upload. Have the same property in the mvc model as the kendo upload name, have used enctype = "multipart/form-data", still my the model property for files is null.Please help
I'm not sure that I understood the question correctly. Can you show your code and describe what exactly you want?
By the way, you don't need model to get files. You can get your file from Request.Files property in your controller. Example:
View:
<input type="file" name="files" id="files" />
<script>
$(function() {
$("#files").kendoUpload({
async: {
saveUrl: "#Url.Action("SaveFiles", "Home")",
autoUpload: false
},
showFileList: true
});
});
</script>
Controller:
public ActionResult SaveFiles()
{
foreach (string key in Request.Files)
{
var file = Request.Files[key];
}
}
Related
I have the following problem when updating a for via AJAX after it is submitted. For some reason some hidden fields that are on the HTML that is returned are not being updated, which is weird because when I run the debugger they appeared to have the correct value.
This is the relevant part of my form
<div id="itemPopUpForm">
#{Html.EnableClientValidation();}
#Html.ValidationSummary()
<div id="formDiv">
#{ Html.RenderPartial("ItemData", Model, new ViewDataDictionary() { { "Machines", ViewBag.Machines }, { "WarehouseList", ViewBag.WarehouseList }, { WebConstants.FORM_ID_KEY, #ViewData[WebConstants.FORM_ID_KEY] } }); }
</div>
</div>
Then the partial view contains hidden fields like these which are the ones not being updated
#using (Html.BeginForm("Index", "Item", FormMethod.Post, new { id = "frmItem", name = "frmItem" }))
{
#Html.AntiForgeryToken()
#Html.HiddenFor(model => model.Item.SodID)
#Html.HiddenFor(model => Model.Item.ItemID) //The itemID needs updating when an item is copied
#Html.HiddenFor(model => model.Item.Delivery.DeliveryAddressID, new { #id = "delAddressID" })
And this is the javascript method that updates the form
function ajaxSave() {
if (!itemValid()) return;
popup('ajaxSplash');
$.ajax({
type: "POST",
url: '#Url.Action("Index")',
data: $("#frmItem").serialize(),
success: function (html) {
console.log(html);
$("#formDiv").html(html);
initItemPage();
alert("Item was saved successfully");
},
error: function () { popup('ajaxSplash'); onFailure(); }
});
}
The action Index returns the Partial View "ItemData" and when I check the Item Model it does have the correct value, but when I see the html returned it is still set to 0.
If you intend to modify a model property in your POST action don't forget to remove it from ModelState first, otherwise HTML helpers will use the originally posted value when rendering:
[HttpPost]
public ActionResult Index(MyViewModel model)
{
// remove the value from modelstate
ModelState.Remove("Item.ItemID");
// update the value
model.Item.ItemID = 2;
return PartialView(model);
}
I'm having the same problem and it seems like the helper HiddenFor evaluates with required unobtrusive validation even if in the model one does not annotate the property with [Required].
The HTML rendered by #Html.HiddenFor(m=>m.Step) is :
<input data-val="true" data-val-number="The field Step must be a number." data-val-required="The Step field is required." id="Step" name="Step" type="hidden" value="2">
Hence, it is why it works if we remove it from the ModelState.
Removing the property from the ModelState seems to me like a hack. I would prefer to use
<input type="hidden" id="Step" name="Step" value="#Model.Step" />
instead of the Html.HiddenFor helper.
You can also implement you own HiddenFor helper.
Is it possible to bind data from your model to a knockout viewmodel. Heres an example:
public ActionResult Edit(int id)
{
Product product = _db.Products.FirstOrDefault(x=>x.ItemId == id);
return View(product);
}
Then in the View I would traditionally do something like so:
#model myApp.Models.Product
#using(Html.BeginForm())
{
#Html.EditorFor(x=>x.ItemName)
#Html.ValidationMessageFor(x=>x.ItemName)
<input type="submit" value="Update" />
}
But with Knockout I would create a EditProductViewModel from where I would do something like:
var EditProductViewModel = {
ItemName = ko.observable('')
};
EditProductViewModel.Edit = function() {
$.ajax({
url: "Home/Edit",
data: ko.ToJson(this),
success: function() {
// do something
}
});
};
$(function() {
ko.applyBindings(EditProductViewModel);
});
And instead of using the Html Helpers I would do something like so in my view:
<form data-bind="submit: Edit">
<input type="text" data-bind="value: ItemName" />
<input type="submit" value="Update" />
</form>
So how can I populate this with the data returned from my controller?
I don't have a any experience with knockout but it would seem to me that you would no longer want to return a view from your controller how about
return JSON(product)
that way you would get a json element of the product on your javascript success function you would need to collected the json element
$.ajax({
url: "Home/Edit",
data: ko.ToJson(this),
success: function(data) {
// map to knockout view model
}
});
and then from here you would call the map bindings.
When using knockout you have two ways to do this.
1. Load your textboxes, etc in one view. Upon loading that view for the first time convert your model to JSON upon in initial load to use by knockout.
ALL additional calls to/from go via JSON.
You can use in your View:
#Html.Raw(Json.Encode(yourModel))
Load your textboxes in your view (ie they are part of your vieW)
Trigger off on document.ready() your ajax calls to get your data from your controller, convert to JSON ie return Json(yourModel, JsonRequestBehavior.AllowGet) and bind those results roughly as you are already doing above
Note - the downside with this approach is with validation. If you have all client side validation, then this is OK as the attributes for data-* will have been written out by MVC to your textboxes, etc. If you have any server side validation, there is no 'smooth' built in integration here with knockout.
There's a decent article here:
http://www.codeproject.com/Articles/305308/MVC-Techniques-with-JQuery-JSON-Knockout-and-Cshar
but still lacks on server side validation mention.
You could serialize data to your page and then initialize knockout viewmodel with values from server.
ItemName = ko.observable(serializedModel.ItemName);
I am rendering a form in Asp.net MVC with a submit button. The page redirects after successful record addition into the database. Following is the code :-
[HttpPost]
public ActionResult Create(BrandPicView brandPic)
{
if (ModelState.IsValid)
{
if (!String.IsNullOrEmpty(brandPic.Picture.PictureUrl))
{
Picture picture = new Picture();
picture.PictureUrl = brandPic.Picture.PictureUrl;
db.Pictures.Add(picture);
brandPic.Brand.PictureId = picture.Id;
}
db.Brands.Add(brandPic.Brand);
db.SaveChanges();
return RedirectToAction("Index");
}
return View();
}
But, while testing, I saw that if the form is clicked again and again, the multiple entries are submitted and saved into the database.
How can i make sure that if the form has been submitted once to the server, then no duplicates are submitted.
I don't think this is quite a duplicate of the answer referenced in the comment, since the link is for spring MVC, and this question is for .NET MVC.
I actually spent a few hours on this a while back, and came up with the following. This javascript hooks nicely with the unobtrusive jquery validation, and you can apply it to any form that has <input type="submit". Note that it uses jquery 1.7's on function:
$(document).on('invalid-form.validate', 'form', function () {
var button = $(this).find(':submit');
setTimeout(function () {
button.removeAttr('disabled');
}, 1);
});
$(document).on('submit', 'form', function () {
var button = $(this).find(':submit');
setTimeout(function () {
button.attr('disabled', 'disabled');
}, 0);
});
The setTimeouts are needed. Otherwise, you could end up with a button that is disabled after clicked even when client-side validation fails. We have this in a global javascript file so that it is automatically applied to all of our forms.
Update 16 Nov 2020 by #seagull :
Replaced selector input[type="submit"] with :submit so it will work with <button type="submit" /> as well
The solution for mvc applications with mvc client side validation should be:
$('form').submit(function () {
if ($(this).valid()) {
$(':submit', this).attr('disabled', 'disabled');
}
});
Disable the button on Submit clicked. This can be done using JQuery/Java Script.
Look at this example on how to do this.
You can use this one. It includes unobtrusive jQuery validation.
$(document).on('submit', 'form', function () {
var buttons = $(this).find('[type="submit"]');
if ($(this).valid()) {
buttons.each(function (btn) {
$(buttons[btn]).prop('disabled', true);
});
} else {
buttons.each(function (btn) {
$(buttons[btn]).prop('disabled', false);
});
} });
For jQuery validation please incllude
~/Scripts/jquery.validate.min.js
~/Scripts/jquery.validate.unobtrusive.min.js
You can use ajax.BeginForm insted of html.BeginForm to achieve this, if you use OnSuccess insted of OnBegin you can be sure that your method execute successful and after that your button turn to deactivate,with ajax you stay
in current view and you can update your current view instead of redirection
#using (Ajax.BeginForm(
new AjaxOptions
{
HttpMethod = "post",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "dive",
OnBegin="deactive"
}))
{
//body of your form same as Html.BeginForm
<input type="submit" id="Submit" value="Submit" />
}
and use this jquery in your form:
<script type="text/javascript" language="javascript"> function deactive() { $("#Submit").attr("disabled", true); }</script>
be careful for using ajax you have to call this scrip in the end of your page
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
Disabling the button is fine via JavaScript but what if the user has it disabled or they bypass it? If you use client side security then back it up with server side. I would use the PRG pattern here.
window.onload = function () {
$("#formId").submit(function() {// prevent the submit button to be pressed twice
$(this).find('#submitBtnId').attr('disabled', true);
$(this).find('#submitBtnId').text('Sending, please wait');
});
}
In ASP.Net MVC 3.0 i am using a Ajax.Beginform
and hitting a JsonResult
on success of the form i am calling a jQuery Function.
but for some reason my form is redirecting to JsonAction
my View
#using (Ajax.BeginForm("ActionName", "Controller", null, new AjaxOptions
{
HttpMethod = "POST",
OnSuccess = "ShowResult"
}, new { id = "myform" }))
{
// All form Fields
<input type="submit" value="Continue" class="button standard" />
}
My controller
public JsonResult ActionName(FormCollection collection)
{
return Json(new { _status },JsonRequestBehavior.AllowGet);
}
jQuery
<script type="text/javascript">
function ShowResult(data) {
// alert("I am at ShowResult");
if (data.isRedirect) {
window.location.href = json.redirectUrl;
}
}
for some reason, when i click submit.
it runs the JSonResult and redirects the page to host/controller/actionname
I have included my
<script src="#Url.Content("jquery.unobtrusive-ajax.min.js")"></script>
in my layout.cshtml
can any one tell me what could be wrong?
I found the problem. Now i have to find the solution
on submit
I am validating my form
$("#myform").validate({
submitHandler: function (form) {
// my logic goes here....
}});
If i exclude the validation Ajax form works as expected.
But if i validate my form then ajax form is not working as expected
Thanks
when this happens its almost always because your script files aren't loaded
note from:
http://completedevelopment.blogspot.com/2011/02/unobstrusive-javascript-in-mvc-3-helps.html
Set the mentioned flag in the web.config:
Include a reference to the jQuery library ~/Scripts/jquery-1.4.4.js
Include a reference to the library that hooks this magic at ~/Scripts/jquery.unobtrusive-ajax.js
So load up fiddler http://fiddler2.com and see if the scripts are being called and loaded.
Is there something like UpdatePanel (in ASPX) for Razor?
I want to refresh data (e.g. table, chart, ...) automaticly every 30 seconds.
Similar to clicking the following link every 30 seconds:
#Ajax.ActionLink("Refresh", "RefreshItems", new AjaxOptions() {
UpdateTargetId = "ItemList",
HttpMethod = "Post"})
Edit:
I may should add that the action link renders a partial view.
Code in cshtml:
<div id="ItemList">
#Html.Partial("_ItemList", Model)
</div>
Code in Controller:
[HttpPost]
public ActionResult RefreshItems() {
try {
// Fill List/Model
...
// Return Partial
return PartialView("_ItemList", model);
}
catch (Exception ex) {
return RedirectToAction("Index");
}
}
It would be create if the PartielView could refresh itself.
You can try something similar to the following using Jquery (have not tested though)
<script type="text/javascript">
$(document).ready(function() {
setInterval(function()
{
// not sure what the controller name is
$.post('<%= Url.Action("Refresh", "RefreshItems") %>', function(data) {
// Update the ItemList html element
$('#ItemList').html(data);
});
}
, 30000);
});
</script>
The above code should be placed in the containing page i.e. not the partial view page. Bear in mind that the a partial view is not a complete html page.
My initial guess is that this script can be placed in the partial and modified as follows. Make sure that the ajax data type is set to html.
<script type="text/javascript">
setInterval(function()
{
// not sure what the controller name is
$.post('<%= Url.Action("Refresh", "RefreshItems") %>', function(data) {
// Update the ItemList html element
$('#ItemList').html(data);
});
}
, 30000);
</script>
Another alternative is to store the javascript in a separate js file and use the Jquery getScript function in ajax success callback.
Well, if you don't need the AJAX expierience than use the HTML tag:
<meta http-equiv=”refresh” content=”30; URL=http://www.programmingfacts.com”>
go here: http://www.programmingfacts.com/auto-refresh-page-after-few-seconds-using-javascript/
If someone wants the complete code for a selfupdating partial view have a look!
Code of the Controller:
[HttpPost]
public ActionResult RefreshSelfUpdatingPartial() {
// Setting the Models Content
// ...
return PartialView("_SelfUpdatingPartial", model);
}
Code of the Partial (_SelfUpdatingPartial.cshtml):
#model YourModelClass
<script type="text/javascript">
setInterval(function () {
$.post('#Url.Action("RefreshSelfUpdatingPartial")', function (data) {
$('#SelfUpdatingPartialDiv').html(data);
}
);
}, 20000);
</script>
// Div
<div id="SelfUpdatingPartialDiv">
// Link to Refresh per Click
<p>
#Ajax.ActionLink("Aktualisieren", "RefreshFlatschels", new AjaxOptions() {
UpdateTargetId = "FlatschelList",
HttpMethod = "Post", InsertionMode = InsertionMode.Replace
})
</p>
// Your Code
// ...
</div>
Code to integrate the Partial in the "Main"-View (ViewWithSelfupdatingPartial.cs):
#Html.Partial("_FlatschelOverview", Model)
The <meta refresh ..> tag in HTML will work for you. Its the best option
Traditional controls don't works in ASP MVC
You could do it using Jquery timers http://plugins.jquery.com/project/timers
Other option could be to use the Delay function
In your target is as simple as refresh the whole page, this SO link will be of your interest: Auto refresh in ASP.NET MVC
Hope It Helps.