I'm using MVC and AJax.BeginForm to do some ajax updating of my page. The BeginForm code looks something like:
using (Ajax.BeginForm("HandleCrop", "Card",
new
{
accept = true,
id = Model.ImageUpload.ID,
file = Model.ImageUpload.File,
imageCropX = Model.CropInfo.X,
imageCropY = Model.CropInfo.Y,
imageCropWidth = Model.CropInfo.Width,
imageCropHeight = Model.CropInfo.Height
},
new AjaxOptions
{
HttpMethod = "POST",
OnComplete = "ConfirmCompleted",
OnSuccess = "ReloadUpload",
OnFailure = "Failure"
}, null))
The Model.CropInfo is being put in as hidden fields like so:
<%=Html.HiddenFor(m => m.CropInfo.X) %>
<%=Html.HiddenFor(m => m.CropInfo.Y) %>
<%=Html.HiddenFor(m => m.CropInfo.Width) %>
<%=Html.HiddenFor(m => m.CropInfo.Height) %>
However, these values are being dynamically modified by some client side javascript, and these values need to be posted through the Ajax call back to the server. The above code will obviously not work as the imageCrop.. parameters in the Ajax form are being filled when the page is rendered (therefore being all 0).
My question is: what is the correct way to approach this situation?
From Ajax this part should be absolutely removed:
imageCropX = Model.CropInfo.X,
imageCropY = Model.CropInfo.Y,
imageCropWidth = Model.CropInfo.Width,
imageCropHeight = Model.CropInfo.Height
With TryUpdateModel in the Action your CropInfo should be filled OK from posted data.
If you are NOT USING automatic update of the model (or via TryUpdateModel)
and instead of that you are USING this data as input parameters in Action then just rename these Action parameters to CropInfo_X, CropInfo_Y, CropInfo_Width and CropInfo_Height (I think this is how the hidden fields will be named in HTML, check this in page source)
Related
I am using Ajax begin form for a search page to bring back results. I have the following markup.
#using (Ajax.BeginForm("GetSearchResults",
"MYController",
new
{
siteID = Model.SiteID
},
new AjaxOptions()
{
HttpMethod = "GET",
AllowCache = true,
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "search-reults"
}))
{
#Html_DropDownListFor(model => model.SiteID, Model.StatusCollection)
}
There are a few other strong type textboxes and a submit button on the page. All textboxes submit data back to the controller but the drop down list doesn't. It always submits the default value 0. Are there any other steps I need to do to pick up the value or something in the JQuery onchange event?
Removing the route parameter siteID worked. I do not need to pass strong type control values through as route parameters.
I have a paged list using unobtrusive ajax that looks like this.
#Html.PagedListPager(Model, page => Url.Action("Images", "Admin", new { imageLibrary = image.ImageLibrary, page }),
PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions()
{ InsertionMode = InsertionMode.Replace, UpdateTargetId = "imagesContainer" }))
My controller looks like this:
public ActionResult Images(ImageModels image, int? page, string imageLibrary)
{
// do stuff here
}
I was trying to pass a model to my controller, so instead of imageLibrary = image.ImageLibrary, I should have only needed to pass image = imageModel, but when I pass the model itself, the controller gets a null value (yes the model name was spelled correctly). When I try to get a property of the model and pass it to the controller (that's the imageLibrary = image.ImageLibrary) the controller receives both the model and the imageLibrary string value! This works fine for the end result, I just don't understand why it works, and I shouldn't have to pass the string value imageLibrary to my controller - especially if I'm not really using it.
Any insight on this would be appreciated.
I have a main view with 2 partial views (a gridview and a callback panel)
This main view receives a IEnumerable<Model> and the panel just receives a Model.
When the view is initially called, the partial view of the panel is filled with an empty model so it is empty.
But I want to re render the panel once I click Edit in my GridView.
How can I achieve this?
I currently have an #Html.ActionLink in the Edit button but its not working since it will create a new view instead of re render the partial view of the panel.
Any clues?
EDIT:
this is my Edit:
Html.ActionLink("Edit", "EditConfig", new { id = DataBinder.Eval(c.DataItem, "QueueMonitorConfigurationsID") })
Function that the edit link calls:
[HttpGet]
public ActionResult EditConfig(int id)
{
StorageConfigurationModel resultForPanel = new StorageConfigurationModel { };
IEnumerable<StorageConfigurationModel> configList = (IEnumerable<StorageConfigurationModel>)Session["ConfigurationList"];
foreach (StorageConfigurationModel configModel in configList)
{
if (configModel.QueueMonitorConfigurationsID == id)
{
resultForPanel = configModel;
break;
}
}
return PartialView("cbpnlNewUpdateConfigs", resultForPanel);
}
Main view containing the partial views:
#model IEnumerable<BPM.Website.Models.StorageConfigurationModel>
#Html.Partial("gvConfigurations", Model)
#Html.Partial("cbpnlNewUpdateConfigs", new BPM.Website.Models.StorageConfigurationModel { QueueMonitorConfigurationsID = -1 })
I currently have an #Html.ActionLink in the Edit button
You could use AJAX. For example you could replace this Html.ActionLink with an Ajax.ActionLink and include the jquery.js and jquery.unobtrusive-ajax.js scripts (in that order) to make it act as an AJAX call. For example:
#Ajax.ActionLink(
"click to edit record",
"Edit",
new { id = item.Id },
new AjaxOptions { UpdateTargetId = "editContainer" }
)
When the link is clicked the Edit controller action will be invoked using an AJAX request and the id of the current item will be passed as parameter. When this AJAX request completes a DOM element with id="editContainer" will be updated with the results of this AJAX call. So your Edit controller action should return a partial view containing the record to be edited.
Solved with an Ajax POST
$.ajax({
type: "POST",
url: url,
data: data,
success: success,
dataType: dataType
});
Hi I am trying to get a querystring from an ajax call and it does not seem to work so well.Here is my code:
#Ajax.ActionLink("Add To Cart" ,
"AddToCart" ,
"Products",
new {
ProductId = #products.ElementAt(0).Value
},
new AjaxOptions{
Url = "/Products/AddToCart",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "UpdateCart",
HttpMethod = "GET"
})
Each link I have in my application calls something like this:
Products/AddToCart?ProductId=5
This is the controller it calls:
public ActionResult AddToCart(string ProductId)
{
string ProductCeva = ProductId;
}
Now from what I learned so far about MVC3 I assumed that the parameter ProductId would be 5 in our case , but when I debug the code , I get that it is null.
What am I doing wrong here and how can I get the ProductId query string in this casE?
Remove the Url = "/Products/AddToCart", bit from your AjaxOptions.
Why?
Here's why. The following code:
#Ajax.ActionLink(
"Add To Cart" ,
"AddToCart" ,
"Products",
new {
ProductId = #products.ElementAt(0).Value
},
new AjaxOptions {
Url = "/Products/AddToCart",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "UpdateCart",
HttpMethod = "GET"
}
)
generates:
<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#UpdateCart" data-ajax-url="/Products/AddToCart" href="/Products/AddToCart?ProductId=5">Add To Cart</a>
Now even if the href of the generated anchor is correct (/Products/AddToCart?ProductId=5) that's not what is used for the AJAX request. The jquery.unobtrusive-ajax.js that you are using and which unobtrusively AJAXifies all anchors uses the data-ajax-url attribute (if present) when sending the AJAX request instead of the href attribute. Now look at the value of the data-ajax-url attribute and you will understand why you get null in your controller action.
You would also have seen this if you had used FireBug or a similar javascript debugging tool because when you would have inspected the Network tab to see why your AJAX request is not working you would have seen the wrong url being used.
Long story short two things to remember from this question (the first being more important as it allows you to deduce the second):
Use FireBug
the Url property of the AjaxOptions allows you to override the url to be used when sending the AJAX request.
I have a code block in my MVC view as follows:
<%using (Ajax.BeginForm("MyAction", new { action = "MyAction", controller = "Home", id = ViewData["selected"].ToString() }, new AjaxOptions { UpdateTargetId = "Div1" }))
{ %>
<%=Html.DropDownList("ddl", ViewData["MyList"] as SelectList, new { onchange = "this.form.submit()" })%>
<%} %>
I want to set the value of ViewData["selected"] so that i can send it to the desired action.
Can anyone please suggest how can i do this?
thanks!
Instead of using a form, why not use a jQuery onChange event on your drop down?
$(document).ready(function() {
$("#ddl").change(function() {
var strSelected = "";
$("#ddl option:selected").each(function() {
strSelected += $(this)[0].value;
});
var url = "/Home/MyAction/" + strSelected;
$.post(url, function(data) {
// do something if necessary
});
});
});
ViewData is not the place to pass data back to the server side. Values of html input controls within form tag are conveniently available in action method. You can get these values either from various types of action method arguments (model, formcollection etc).
Here is a link to free asp.net mvc ebook tutorial. Is a good resource for asp.net mvc.
Found solution at this post it is just small chnge
Yes, that’s right – only change is replacing:
onchange = “this.form.submit();”
with:
onchange = “$(this.form).submit();”