I'm working on an MVC Application that has a basic ajax form for submitting data. After the form, there is a partial view which has another ajax form in it for submitting data to a drop-down box allowing users to update its contents without leaving the page.
Create
#model My Project.Models.Cars
#using (Ajax.BeginForm("Create", "Cars", new AjaxOptions
{
HttpMethod = "POST"
}))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary()
... form fields would be here ...
}
#Html.Partial("_Manufacturer")
Partial View(_Manufacturer)
#using (Ajax.BeginForm("AddManufacturer", "AnotherController", new AjaxOptions
{
HttpMethod = "POST"
}))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary()
... form fields for populating dropdown list ...
}
When I try to submit the ajax form in the partial view I am getting an error of:
404 Resource Not Found at Cars/AddManufacturer
The controller it's supposed to use is AnotherController as you can see in the form above. I don't want to have to create multiple forms and methods, I want to reuse the method I have. Is there a reason it's doing this and is there anything I can do about it?
Sometimes partials render URLs differently accordingly to where they are called from.
Inspect your page and see if the URL rendered on the second form is right. If that is the case then find a method overload that can resolve the route correctly.
Here is a list of the overloads:
https://learn.microsoft.com/en-us/previous-versions/aspnet/web-frameworks/dd492974(v=vs.118)
I'm using an ajax actionlink to allow the user to delete a record in the model (database table).
User clicks on delete link,
JQuery dialog opens to ask for confirmation. User confirms they want to delete, actionlink calls relevant method on controller.
Method tries to delete relevant record in database but fails, for example, database is down for some reason.
Because I'm not updating an element on the page (I suspect onSuccess will fire?), how can I convey that the record has not been deleted?
So really I'm asking how to pass a return value from the method to the Ajax ActionLink, or force the onFailure to fire.
I suspect I can have a hidden field and update that using UpdateTargetId, and then call a function onSuccess to check the value - but Is this the best way or will this even work?
You can use OnSuccess and OnFailure properties in AjaxOptions:
<p>
#Ajax.ActionLink("Click Me", "About", new AjaxOptions { OnFailure = "OnFailureFunc", OnSuccess = "OnSuccessFunc" })
</p>
<script type="text/javascript">
function OnFailureFunc() {
alert("Error");
}
function OnSuccessFunc() {
alert("Success");
}
</script>
On my view, I have 2 partial views.
1st partial view (PV1): user can type an item in a textbox and submit through an ajax form.
2nd partial view (PV2): user can see a list of items previously submitted.
The PV1 uses UpdateTargetId on a div on the PV2 because we would like to update our list with the newly added item.
Everything works well when items submitted on the PV1 are valid. It doesn't work when ModelState.IsValid == false when ajax form is submitted. It doesn't work because the UpdateTargetId is located on the PV2, and I need to update the PV1 for showing the ModelState Errors. So we encounter with duplicate of the PV1 on the PV2!
Below is another stackoverflow post on a similar problem but no solutions has been provided.
ASP.NET MVC AJAX change UpdateTargetId if ModelState is invalid
I think a Json alternative may be a solution but I'm wondering if we can adapt the standard Ajax form method to suit our need here?
Instead of using UpdateTargetId, you could try using OnComplete:
#using (Ajax.BeginForm(new AjaxOptions { OnComplete = "complete" }))
{
...
}
and inside this handler test whether there is an error in the resulting view:
function complete(result) {
var isError = $('span.field-validation-error', result.responseText).length > 0;
if (isError) {
// there was an error => we update the container of the form
$('#frmContainer').html(result.responseText);
} else {
// no error => we hide validation errors and update the result container
$('#frm .field-validation-error').hide();
$('#frm .input-validation-error').removeClass('input-validation-error');
$('#result').html(result.responseText);
}
}
We have a ASP.NET MVC 3 application that uses unobtrusive jQuery validation. The page allows to add children objects to the model in the same go. The <form> contains a grid for the children, and some input fields for adding new children.
Simplified example with Issue as the Model and Subtasks as the children:
Issue.cshtml -> Defines the form and includes fields for the issue as well as its subtasks.
#model Issue
#using (Html.BeginForm("Create", "Issues", FormMethod.Post, new { id = "mainForm" })
{
#Html.TextBoxFor(model => model.Summary)
#Html.Partial("SubtaskFields", new Subtask())
#Html.Partial("SubtasksGrid", model.Subtasks)
}
SubtaskFields.cshtml:
#model Subtask
#Html.TextBoxFor(model => model.Summary)
<button id="add">Add</button>
SubtasksGrid.cshtml:
#model IEnumerable<Subtask>
<table>
#foreach (var subtask in Model)
{
<tr>
<td>
#subtask.Name
<input type="hidden" name="Subtasks[#subtask.Index].Name" value="#subtask.Name"/>
</td>
</tr>
}
</table>
The point is, when submitting the form, only the properties of the issue (Issue.Name, e.g.), plus the hidden fields for the children (Subtask.Name, e.g.) should be validated and submitted.
We have some javascript code that hooks on the "add" button, and adds a new subtask based on the values in the SubtaskFields.cshtml partial view. That script validates the input fields first. In order for this to work, we use the TextBoxFor etc. html helpers for the SubtaskFields.cshtml, too, rendering a dummy/default Subtask object (new Subtask()). Our javascript the uses $("#mainForm").validate().element(...) to validate the SubtaskFields before adding a new subtask.
The big problem with this approach is that the jQuery unobtrusive validation framework automatically hooks on the submit button and validates all fields within the form before submitting the form. I.e., even the subtask fields are validated. This does not make any sense. Say that the subtask name is mandatory (which means the user can only click on "add" if he has filled in a subtask name). But if the user does not click on "add", the values in the Subtask Fields don't have any meaning and can in particular be left blank. In this case, in our current setting, jQuery validation fails because a mandatory field was left blank.
How can this be solved?
This is what we've come up with:
Add an attribute to all subtask fields (which should not be validated when submitting the form), e.g. "data-val-ignore".
Set the ignore setting on the form's validator to "[data-val-ignore]"
For the add button, in order to validate the subtask fields (which are normally ignored), iterate over them, and for each field, remove the attribute, re-parse to genereate the rules, execute validation, add the attribute, parse one more time.
Ad 2:
$(document).ready(function () {
$.data($('form')[0], 'validator').settings.ignore = "[data-val-ignore]";
});
Ad 3:
$(allSubtaskFields).each(function() {
$(this).removeAttr("data-val-ignore");
$.validator.unobtrusive.parseElement(this, false);
if (!$("mainForm").validate().element($(this))) { result = false; }
$(this).attr("data-val-ignore", "true");
$.validator.unobtrusive.parseElement(this, false);
});
I would suggest moving #Html.Partial("SubtasksGrid", model.Subtasks) outside of your form, and either having it in a single separate form, or have the partial generate a form for each grid row.
This will address your validation problems with your main form, and should also permit you to simplify validation of each row in SubTasksGrid.
To validate part of the form, wrap the section or the controls you want to validate into a div with an #id or .class and do the following:
var validator = $("#myForm").validate();
var isValid = true;
$("myDivToBeValidated").find("*[data-val]").each(function (indx, elem) {
if (!validator.element(elem)) {
isValid = false;
}
});
//this part of form is valid however there might be some other invalid parts
if (isValid)
//do your action, like go to next step in a wizard or any other action
goToNextStep();
I hope it is clear, if not please leave a comment. For more info about jQuery validation plugin and element() function, check this
Looks like you are working against the MVC egine here.
I would use Editor templates and Display templates, EditorFor template for the stuff you wanna validate and post, and Display template for the stuff you dont wanna post and validate.. If you have a TextBoxFor in the display template make sure its binding property has no Required attribute, and if its a value type make it nullable.
I'm not sure how to phrase this one but here goes nothing.
I have a controller that has two parameters: FindingId, TagId
public JsonResult Add(int FindingId, int TagId)
I have an Ajax ActionLink to call it:
<%: Ajax.ActionLink( "Add", "Add", "FindingTag",
new { FindingId = Model.FindingId },
new AjaxOptions {
HttpMethod = "Post"
})
%>
I then have a dropdownlist of available Tags:
<%: Html.DropDownListFor(m => m, Model.AvailableTags, "Select Option..", new { id = "finding_" + Model.FindingId + "_AvailableTags" } )%>
The parameters are populated in the following way:
You can see above that I am filling in the FindingId when the model is being rendered since that will always be the same in this subsection. This view is being rendered multiple times for different Findings so that FindingId will change per model.
The TagId however should come from the selected value of the DropDownList.
I am not mapping this particular request to a viewmodel to pass in so the dropdownlist is not being bound to a particular property. I have also created a route for
/FindingTag/Add/{FindingId}/{TagId}
So here are the questions this has opened and I'm really hoping someone can help me out as this stuff is really knew to me.
1) I found that the href is being rendered as Add?FindingId=## and I was curious if I can force that to render to Add/##
2) Is there an easier way I can get the value from the dropdownlist to append to the href to create the route mentioned above?
Most of the time in the project I have been using jQuery for my ajax calls so I would just manually build a URL from scratch, but I was really hoping to use the MS versions for practice. Does this seem irrational? Let me know if you have any suggestions or insight..
Edit:
I am not sure if this is the way to go about this. I am finding people saying to use a form and submit that, but if I have this as a subsection of an already strongly-typed partial view, how do I get the values to be sent back in a form I can use that isn't the fullfledged model? I would prefer to keep it to the 2 parameters and not a complex object if possible.