I am trying to validate my form without using Unobtrusive Validation becauase my validation is a little more complicated than average. What is needed to accomplish this? Just include the Validation.js script into my file and writing out the jquery code? That is what I have accomplished so far...
$(document).ready(function () {
$("#formSearchByMRN").validate({
rules: {
MRN: { required: true, minLength: 6 }
},
messages: {
MRN: 'Please Enter a Valid MRN'
}
});
});
However, whenever I submit my form nothing is validated? Here is my form...
#using (Html.BeginForm("SearchByMRN", "SearchPatients", FormMethod.Post, new { id = "formSearchByMRN" }))
{
<p>
<ul>
<li>#Html.Label("MRN#", new { #for = "MRN" })<br />#Html.TextBox("MRN","", new { id = "MRN" })</li>
<li>#Html.Label("MRNDrop", new { #for = "MRNDrop" })<br /> #Html.DropDownList("MRNDrop", (List<SelectListItem>)TempData["MRNLIST"], new { id = "MRNDrop" })</li>
</ul>
</p>
<input type="submit" value="Search by MRN" id="submitMRN"/>
}
What am I missing. I have my jquery Valition script in my _layout.cshtml file.
Related
I am trying to update an existing application and wants to display modal using fancybox. On other functionalities, I was able to display the fancybox but for some reason cannot do it on a particular view.
Here is my main view declaration:
#Html.ActionLink(Strings.Link_ViewFullList, "OrganisationFullList", new { id = 1 }, new { #class = "fancybox fancybox.ajax" })
Then here is my "organisationFullList" cshtml file.
#model ProjectOrganisationModel
#{
ViewBag.Title = Strings.PageTitles_Organisations;
}
<div class="row">
<div class="col-lg-10">
#if (Model.Organisation != null && Model.Organisation.Any())
{
<ul class="list-unstyled">
#foreach (var organisation in Model.Organisation)
{
<li>
#Html.RadioButton("organisationList", organisation.Name)
#Html.Label(organisation.Name, new { style = "font-weight: normal" })
</li>
}
</ul>
}
</div>
</div>
Here is my controller code:
public ActionResult OrganisationFullList(int id)
{
var organisationList = new ProjectOrganisationModel();
organisationList.Organisation = GetOrganisations();
return View(organisationList);
}
When I click on the link, it displays a new screen instead of the modal. It redirects to this URl:
https://localhost:44300/project/1/organisationfulllist
#Html.ActionLink causes you to redirect to another page.
Rather than using #Html.ActionLink use #Ajax.ActionLink
#Ajax.ActionLink(
"View Full List Ajax",
"OrganisationFullList", //Action
"YourController", //Controller
new AjaxOptions
{
HttpMethod = "POST",
OnSuccess = "showFancyBox" //call back
}
)
Call back function:
function showFancyBox(data) {
$.fancybox.open({ "content": data });
}
Dont forget to include jquery.unobtrusive-ajax.min.js you need it to use #Ajax helpers
<script type="text/javascript" src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>
Here is my requirement :
I am designing a page to add a vehicle to the database :
Normal vehicle information [Model - Inventory]
Some other features [Model - IList]
Here is my index.cshtml page
#model Model.ViewModel.VehicleViewModel
<div>
<div class='col-md-12'>
<div class="form-group">
<input id="mainFormSubmit" type="button" value="Save" class="btn btn-default" />
</div>
</div>
#{Html.RenderPartial("~/Views/Shared/_InventoryPartial.cshtml", Model.InventoryVM);}
#{Html.RenderPartial("~/Views/Shared/_StandardFeaturePartial.cshtml", Model.StandardFeatures);}
</div>
<script type="text/javascript">
$('#mainFormSubmit').click(function () {
$('#InventoryForm').submit();
$("#StandardFeatureForm").submit();
});
</script>
This is my view model class
public class VehicleViewModel
{
public InventoryViewModel InventoryVM { get; set; }
public IList<StandardFeature> StandardFeatures { get; set; }
}
The Inventory partial view [_InventoryPartial.cshtml]
#model Model.ViewModel.InventoryViewModel
#{
var options = new AjaxOptions() { HttpMethod = "Post" };
}
<div class="container">
<div class="row">
<div class="col-md-12">
#using (Ajax.BeginForm("InventorySave", "AddVehicle", options, new { id = "InventoryForm" }))
{
<fieldset>
<legend>Inventory Info</legend>
<div class='col-md-6'>
<!-- VIN input-->
<div class="form-group">
#Html.LabelFor(x => x.VIN, new { #class = "col-md-4 control-label" })
<div class="col-md-7">
#Html.TextBoxFor(x => x.VIN, new { #class = "form-control", #placeholder = "VIN" })
</div>
</div>
</div>
</fieldset>
}
The standard feature partial view [_StandardFeaturePartial.cshtml]
==
#model IEnumerable<Model.DomainModel.StandardFeature>
#{
var options = new AjaxOptions() { HttpMethod = "Post" };
}
<div class="container">
<div class="row">
<div class="col-md-12">
#using (Ajax.BeginForm("StandardFeatureSave", "AddVehicle", options, new { id = "StandardFeatureForm" }))
{
When I am clicking on index page SAVE button, only
$('#InventoryForm').submit();
$("#StandardFeatureForm").submit();
last one(StandardFeatureForm) is executing.
Please let me know if this process is correct, and what could be the reason of this issue.
You should not call the submit method twice. Depending of the browser you can face different issues :
the form submission causes the browser to navigate to the form action and the submission
of the first may prevent the submission of the second
The browser could detected there are two requests and discards the
first submit.
In your case it will be easier to wrap your two partial views inside a unique form.
#using (Ajax.BeginForm("InventorySave", "AddVehicle", FormMethod.Post, new { id = "InventoryForm" }))
{
#{Html.RenderPartial("~/Views/Shared/_InventoryPartial.cshtml", Model.InventoryVM);}
#{Html.RenderPartial("~/Views/Shared/_StandardFeaturePartial.cshtml", Model.StandardFeatures);}
}
However when the partial views render they are not generating the correct name attributes for the larger modelModel.ViewModel.VehicleViewModel you want to use :
public void InventorySave(VehicleViewModel vehicleViewModel) {}
In this case you should use EditorTempmlate instead of partial views. It's simple to do from your partial views and this post should help you :Post a form with multiple partial views
Basically, drag your partials to the folder ~/Shared/EditorTemplates/
and rename them to match the model name they are the editor templates
for.
Finally something like :
#model Model.ViewModel.VehicleViewModel
#using (Html.BeginForm("InventorySave", "AddVehicle", FormMethod.Post, new { id = "InventoryForm" }))
{
#Html.EditorFor(m => m.InventoryVM);
#Html.EditorFor(m => m.StandardFeatures});
}
The Ajax.BeginForm helper already has a submit event associated to it which creates an Ajax POST request. When you are manually submitting your form using $('#InventoryForm').submit();, you're calling both and the submit events which can have strange side effects.
There are a few ways around this. Here is one solution
Change your forms to a regular HTML form using the Html.BeingForm helper.
Amend your script to create ajax requests and use the form data
$('#InventoryForm').submit(function(e) {
e.preventDefault();
$.post($(this).attr("action"), $(this).serialize(), function(r) {
//Do something
});
});
$('#StandardFeatureForm').submit(function(e) {
e.preventDefault();
$.post($(this).attr("action"), $(this).serialize(), function(r) {
//Do something
});
});
Hope this helps
I have three partial views within a view that are toggled via radiobutton selection. Each partial view has it's own submit input and two of the partial views contain a tinyMCE textarea. When I only had one partial that contained a tinyMCE textarea, I was able to get that textarea to validate using .triggerSave(), but now that I have added the second tinyMCE textarea, I can't get either of the tinyMCE textareas to pass validation.
I tried many of the solutions found on similar questions here on SO, but I have not been successful in getting these textareas to pass validation.
Here is the tinyMCE pertinent code on the first partial:
<script type="text/javascript">
$(document).ready(function () {
tinyMCE.init({
mode: "specific_textareas",
editor_selector: "mceEditorForAddRow",
theme: "simple",
width: "500",
height: "300"
});
});
#using(Html.BeginForm("_AddSchemaRow","Database_Schema")
{
#Html.ValidationSummary(true)
<script type="text/javascript">
$("#CreateRow").click(function () {
tinyMCE.triggerSave();
});
</script>
<table>
....
....
<tr>
<td>
#Html.LabelFor(model => model.SchemaElement)
</td>
<td>
#Html.TextAreaFor(model => model.SchemaElement, new { #class = "mceEditorForAddRow" })
#Html.ValidationMessageFor(model => model.SchemaElement)
</td>
</tr>
....
....
</table>
<p>
<input id="CreateRow" type="submit" value="Create" />
</p>
}
Here is the contoller's action for this first partial:
public ActionResult _AddSchemaRow(int id)
{
SchemaRow schemaRow = new SchemaRow();
schemaRow.DatabaseSchemaID = id;
schemaRow.SchemaIndex = DatabaseSchema.GetSchemaHeadersByDatabaseSchemaID(id).Count() + 1;
return PartialView(schemaRow);
}
Here is the controller's POST action for this first partial:
[HttpPost]
[ValidateInput(false)]
public ActionResult _AddSchemaRow(SchemaRow schemaRow)
{
if (ModelState.IsValid)
{
DatabaseSchemaViewModel vm = new DatabaseSchemaViewModel(DatabaseSchema.GetDatabaseSchemaByID(schemaRow.DatabaseSchemaID));
vm.SchemaRowsAndHeaders = DatabaseSchemaViewModel.GetSchemaRowsAndHeadersBySchemaID(schemaRow.DatabaseSchemaID);
if (SchemaRow.Create_SchemaRow(schemaRow))
{
return RedirectToAction("Edit", new { id = schemaRow.DatabaseSchemaID });
}
else
return PartialView(schemaRow);
}
else
return PartialView(schemaRow);
}
The second partial is set up just like the first partial above, except contains a "SchemaHeader" rather than a "SchemaRow" in all applicable fields including the submit input id being "CreateSchemaHeader". I think example code should provide enough description of my problem. I can add the other partial's code if needed. Thanks in advance for any help in finding a solution.
I was able to finally figure it out. The solution was to add click function after the input that the input that causes the postback.
Example:
<p>
<input id="CreateRow" type="submit" value="Create" />
</p>
<script type="text/javascript">
$("#CreateRow").click(function () {
tinyMCE.triggerSave();
});
</script>
I use The MVC3 Helper to generate my Ajax form like this:
#using (Ajax.BeginForm("Attended", "Lesson", new AjaxOptions
{
HttpMethod = "GET",
InsertionMode = InsertionMode.InsertAfter,
UpdateTargetId = "mdl" + item.ID
}))
{
#Html.HiddenFor(modelItem => item.ID);
#Html.CheckBox("Attended", item.Attended, new { OnChange = "javascript:this.form.submit()"});
}
I just don't find the proper way to submit the Form on the change event of the checkbox.
I don't want my users to click the submit button.
The HTMLAttribute works, but on the change a postback happens instead of an ajax request.
Does anybody know the answer?
First, create a submit button inside your form, and hide it by setting the attribute style="display:none;". Then, instead of using this.form.submit() in your onchange event, use the following:
$(this).parents('form:first').find(':submit')[0].click();
This will invoke the jquery.unobtrusive-ajax.js script, and complete your Ajax submission.
this may help
#Html.CheckBox("Attended", item.Attended, new { OnChange = "submitForm"});
function submitForm(e)
{
document.forms[0].submit();
}
What about using jQuery to trigger the submit? Like in this answer How to post ASP.NET MVC Ajax form using JavaScript rather than submit button
Using the .change() event instead of the .click() event the jQuery part would look something like this:
$(function() {
$('form#ajaxForm').find('input.submit').change( function() {
$('form#ajaxForm').trigger('submit');
});
}
#using (Ajax.BeginForm("Attended", "Lesson", new { id = Model.Id }, new AjaxOptions
{
HttpMethod = "GET",
InsertionMode = InsertionMode.InsertAfter,
UpdateTargetId = "mdl" + item.ID
}, new { id = "ajaxForm" } ))
{
#Html.HiddenFor(modelItem => item.ID);
#Html.CheckBox("Attended", item.Attended, new { #class = "submit"});
}
This is totally untested code so beware of typos :)
Forms are the classical way of sending a request - therefore it is POST - your GET setup is overruled by that in onChange - submits will always clear the content and replaced with server content - i do some javascript to send using AJAX - cannot see that, so I presume that it does exactly that. your OnChange should execute this AJAX function instead ...
Hmm, what actually worked for me, even on cell phones, which was a problem area, was the following, in my cshtml file for a Partial View. It also includes code to grey out the button and write "Saving..." until the view posts back, which avoids people pounding on the submit button when they get impatient for slow SQL Servers.
<div id="myFutureDayEdit">
<script type="text/javascript">
$(document).ready(function () {
$("#submitFutureDayEditVisibleButton").click(function () {
$(this).prop('disabled', true);
$("#myUserMessage").html("Saving...");
$("#myUserMessage").show();
document.getElementById("submitFutureDayEditHiddenButton").click();
});
});
</script>
#Html.ValidationSummary(true)
#using (Ajax.BeginForm("SaveFutureDayEdit", "Member", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "myFutureDayEdit" }))
{ ... bla bla bla
and
<input id="submitFutureDayEditVisibleButton" type="button" value="Save Changes" />
<input id="submitFutureDayEditHiddenButton" style="display:none;" type="submit" value="SC" />
<div id="myUserMessage">
#if (Model.UserMessage != null)
{ #Model.UserMessage }
</div>
<input type="hidden" id="bUnsavedChanges" name="bUnsavedChanges" value="false" />
}
</div>
<div id="hahuloading">
<div id="hahuloadingcontent">
<p id="hahuloadingspinner">
Saving...
</p>
</div>
</div>
System I working on is CMS where you insert templates like Contact form template and save that to database. This template is coded against server side to process data.
Now my "contentDiv" within form where all the templates were insert and saved than showed on the page withint form tag wrapped like
#using (Html.BeginForm("Edit", "Home", FormMethod.Post, new { id = "first" }))
{
#Html.Hidden("someId", #Model.PageId)
}
<div id="contentDiv" style="width:100%">#Html.Raw(Model.Html)</div>
Above form is than saved as
$(function () {
$("form#first").submit(function (e) {
e.preventDefault();
var viewmodel = {
Id: $("#someId").val(),
Html: $("#contentDiv").val()
};
$.ajax({
url: $(this).attr("action"),
type: "POST",
data: JSON.stringify(viewmodel),
dataType: "json",
contentType: "application/json; charset=utf-8",
beforeSend: function () { $("#status").fadeIn(); },
complete: function () { $("#status").fadeOut(); },
success: function (data) {
var message = data.Message;
},
error: function () {
}
});
});
});
notice that I moved "contentDiv out of form tag as my contact form which is wrapped in a form tag can not be nested within id=first form.
Is there a solution to form nesting? . If not than
My another question is
contentDiv is not wrapped up in form tag that means if client browser has javascript disabled than he wont be able to post contentDiv data to server and form will be of no use.
What to do?
If I don't move contentDiv out of form tag than than after inserting template the structure will be nesting of forms
#using (Html.BeginForm("Edit", "Home", FormMethod.Post, new { id = "first" }))
{
<form id="contactform" action="/Home/Email" method="post" >
<div class="clear" style="padding-bottom:10px;"></div>
<div class="formCaption">Full Name</div>
<div class="formField"><input id="fullName" name="fullName" class="standardField" /></div>
<div><input id="sendBtn" value="Send" type="button" /></div>
</form>
}
I didn't understand from your description why the html needs to be outside the form. Also you should not use the .val() method for divs. You should use .html():
var viewmodel = {
Id: $("#someId").val(),
Html: $("#contentDiv").html()
};
Of course because you are using javascript to fetch the html which is outside of the main form if client browser has javascript disabled the form will be of no use. Only if you move the html inside the main form would this work without javascript:
#using (Html.BeginForm("Edit", "Home", FormMethod.Post, new { id = "first" }))
{
#Html.HiddenFor(x => x.PageId)
#Html.HiddenFor(x => x.Html)
<input type="submit" value="Edit" />
}
<!--
You could still keep the div for preview or something but don't make
any use of it when submitting.
-->
<div id="contentDiv" style="width:100%">
#Html.Raw(Model.Html)
</div>