unable to display the validation messages from #Html.ValidationSummary() in MVC view - asp.net-mvc

I have a fairly simple form created in a partial view and loading the form on a jquery dialog. The view is tightly bound to a model. When the user clicks on the submit button with out entering any inputs, I need to show the validation messages.
<div>
<form method="post" enctype="multipart/form-data" id="ssimForm" action="Home/ProcessUploadedFile"
onsubmit="return false;">
<div>
<h3>
Select the file to be uploaded :</h3>
<span>
<input type="file" name="UploadFileName" id="UploadFileName" /></span>
</div>
<div>
<h3>
Select the date range :</h3>
<span class="uslabel">From Date(MM/dd/yyyy): </span>
<input class="usdate" id="usfromdate" name="StartDate" type="date" />
<span class="uslabel">To Date(MM/dd/yyyy): </span>
<input class="usdate" id="ustodate" name="EndDate" type="date" />
</div>
<div>
<br />
<input type="submit" id="submitButton" name="submitButton" value="Process File" />
</div>
#Html.ValidationSummary()
<div class="message-success">
<span>#ViewBag.Confirmation</span>
</div>
<div class="message-error">
<span>#ViewBag.Error</span>
</div>
</form>
</div>
Now comes the actual problem. when I submit the form I am able to see the validationSummary object populated with the messages, but they are not getting rendered on the screen.
I am able to see the messages if I replace the content of the dialog with the response from the jquery ajax call, that fetches the entire view from the server side. I do not want to take this approach as I beleive this is not the correct way to return validation summary in MVC.
Am I missing something? Any help is appreciated.

I don't know why you don't have the #using (Html.BeginForm()) { } block.
Here is my blog post for a quick and easy way to set up Validation Summary + Unobtrusive Validation for MVC3+.
http://geekswithblogs.net/stun/archive/2011/01/28/aspnet-mvc-3-client-side-validation-summary-with-jquery-validation-unobtrusive-javascript.aspx

Related

contact us form with email submision in asp.net mvc

I am trying to design the contact us page in asp.net mvc. I would like to build a contact us form that also work as to send email to our email. This is the code in of front end; it is a design of form but I just copy this from a template. Can any body guide me to how to make it work or highlight any mistakes?
//code
<div class="contact-form">
<h2>Contact Us</h2>
<form method="post" action="contact-post.html">
<div>
<span><label>Name</label></span>
<span><input name="userName" type="text" class="textbox"></span>
</div>
<div>
<span><label>E-mail</label></span>
<span><input name="userEmail" type="text" class="textbox"></span>
</div>
<div>
<span><label>Mobile</label></span>
<span><input name="userPhone" type="text" class="textbox"></span>
</div>
<div>
<span><label>Subject</label></span>
<span><textarea name="userMsg"> </textarea></span>
</div>
<div>
<span><input type="submit" class="" value="Submit us"></span>
</div>
</form>
</div>

Submit button does not submit form data in bootstrap

I am trying to submit a form in a bootstrap framework and cannot get past the validation, even with correct data.
I think there might be an error with this syntax,
<form name=form1 method=post action=signupck.php onsubmit='return validate(this)'><input type=hidden name=todo value=post>
then the form fields... which all display correctly - so no problems there - in the style:
<div class="row">
<div class="col-xs-2">
<label for="fname">Forename</label>
<input type="text" class="form-control" id="fname" placeholder="Forename"><br></br>
</div>
<div class="col-xs-2">
<label for="sname">Surname</label>
<input type="text" class="form-control" id="sname" placeholder="Surname">
</div>
</div>
and then,
<input type=submit value=Signup>
<input type="reset" class="btn btn-default" value="Reset">
The form on submission displays signupck.php, signalling validation messages when is should be submitted ok. I have got this working outside the bootstrap, but when I put this inside the template, in the form above, I get the problems.
Any help would be most appreciated.

Refreshing the whole jQuery mobile dialog programatically

I am developing a mobile application with jQuery mobile and backbone. I have backbone model change event function, if any changes in the model, I simply destroy the whole page and recreate with template binding. i use $('#pageId').page('destroy').page(); which works fine.
I want to do the samething for dialog (just destory the dialog and recreate the dialog and display it). Can you anyone tell me the right method to call.... I just tried with .dialog() but i didn't work.. thanks in advance.
my dialog code.
<div data-role="dialog" id="myDialog" data-close-btn="right">
<div data-role="header" class="ui-corner-top">
<h1>dialog</h1>
</div>
<div data-role="content">
<form id="myForm">
<fieldset>
<label for="fromDate">Date From</label>
<input id="fromDate" type="date" required placeholder="mm/dd/yyyy">
</fieldset>
<fieldset>
<label for="toDate">Date To</label>
<input id="toDate" type="date" required placeholder="mm/dd/yyyy">
</fieldset>
<input type="submit" value="submit" id="btnSubmit" data-inline="true" />
</form>
</div>
</div>

Why am I getting this Javascript HIERARCHY_REQUEST_ERR with jQuery Mobile and Razor?

Dazed and confused here... The field in question is a boolean, and I want the UI to be a checkbox (or a yes/no or on/off jQuery slider). Each time I try to add in this checkbox input, I end up getting a
Microsoft JScript runtime error: DOM Exception: HIERARCHY_REQUEST_ERR (3)
error.
Here's the HTML+Razor
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>End Game:</legend>
#Html.TextBoxFor(model => model.HandicapSession.WinByTwo, new { #type="checkbox" })
<label for="WinByTwo">Win By Two?</label>
</fieldset>
</div>
Here's the generated HTML:
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>End Game:</legend>
<input data-val="true" data-val-required="The WinByTwo field is required." id="HandicapSession_WinByTwo" name="HandicapSession.WinByTwo" type="checkbox" value="False" />
<label for="WinByTwo">Win By Two?</label>
</fieldset>
</div>
Apparently this error occurs when there are conflicting or overlapping id's as jQuery Mobile creates its checkbox widget
$.widget( "mobile.checkboxradio", $.mobile.widget, { ...etc...
But how do I use the HTML and/or razor to make a simple checkbox work in jQuery Mobile?
If the problem with jQuery Mobile really is duplicate names for the HTML tags, then you'll have to render your own input type=checkbox tag in HTML, as the ASP.NET MVC Html.CheckBoxFor helper method will render an input type=hidden tag with a duplicate name value. See this post for a discussion.
The hidden form tag is there because if you submit an unchecked checkbox to the server, the form value for that field isn't included. So a hidden input tag is included with value=false so that if the checkbox is unchecked, the value false is still submitted. The model binding process in MVC will filter out the duplicate form values for you, but if you're having a client-side problem with the duplicate name attributes, you'll have to render your own checkbox and label in HTML, then handle the fact that no value will be submitted for the HandicapSession.WinByTwo property when the box is unchecked. If no other property for HandicapSession is submitted, then that whole object will be null.
So, you can manually create the checkbox input and still load the checked and value attributes from your model, as desired, but you can run into model binding problems where the value for WinByTwo will still be false even when the box is checked.
Note also that the for attribute on your label doesn't match the ID of the checkbox in your sample. You need the full HandicapSession_WinByTwo.
The following manually creates the input tags:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<div data-role="page">
<div data-role="content">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>End Game:</legend>
<input type="checkbox" id="HandicapSession_WinByTwo" name="HandicapSession.WinByTwo" #(Model.HandicapSession.WinByTwo ? "checked=checked" : "") value="#(Model.HandicapSession.WinByTwo.ToString().ToLower())" />
<label for="HandicapSession_WinByTwo">Win By Two?</label>
</fieldset>
</div>
</div>
</div>
The HTML output is as follows for a checked checkbox on load:
<div data-role="page">
<div data-role="content">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>End Game:</legend>
<input type="checkbox" id="HandicapSession_WinByTwo" name="HandicapSession.WinByTwo" checked=checked value="true" />
<label for="HandicapSession_WinByTwo">Win By Two?</label>
</fieldset>
</div>
</div>
</div>
The best would be just to use the MVC helper methods, so I'm not sure if you'd tried the following. The default Html.CheckBoxFor and Html.LabelFor helper methods work with jQuery Mobile 1.0a4.1 or 1.1.0 just fine. The following works for me:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<div data-role="page">
<div data-role="content">
#using (Html.BeginForm())
{
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>End Game:</legend>
#Html.CheckBoxFor(m => m.HandicapSession.WinByTwo)
#Html.LabelFor(m => m.HandicapSession.WinByTwo, "Win By Two?")
<input type="submit" id="SubmitForm" value="submit" />
</fieldset>
</div>
}
</div>
</div>
This produces the HTML output:
<div data-role="page">
<div data-role="content">
<form action="/Mobile/Mobile" method="post">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>End Game:</legend>
<input checked="checked" data-val="true" data-val-required="The WinByTwo field is required." id="HandicapSession_WinByTwo" name="HandicapSession.WinByTwo" type="checkbox" value="true" />
<input name="HandicapSession.WinByTwo" type="hidden" value="false" />
<label for="HandicapSession_WinByTwo">Win By Two?</label>
<input type="submit" id="SubmitForm" value="submit" />
</fieldset>
</div>
</form>
</div>
</div>
Fix might be pretty simple.
Choice 1: Go scorched earth and turn off Ajax based navigation. This will ensure that unique IDs stay unique. This will ensure that you never encounter this issue again. Only downside is that you lose the pretty little transitions from page to page (someone call the whambulance). You can do this by setting up a global configuration script...
script src="jquery.js"
script src="custom-scripting.js"
script src="jquery-mobile.js"
inside that you'll override the ajax settings to disable them...
$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
});
Choice 2: Call pages that are going to require this uniqueness with a link that has an attribute of rel='external' or target='_black' which will accomplish the same thing without disabling all ajax based navigation. If you are reaching the page as a results of a form post, you can use data-ajax='false' on the form tag to accomplish a clean load.

set div as target container for result page of a post method

.I have a div tag that is also divided into two divs. here is the code:
<div>
<div id="search">
<form id="try" method="post">
Batch: <input id="batch" name="batch" type="text"/>Dept: <input id="dept" name="dept" type="text"><input type="submit"/>
</div>
<div id="receiver">
</div>
</div>
I have placed a search option in the div named "search" using post method. what i want to do is that when i click the submit button the page to receive the values will appear on the div named "receiver".
is this possible? if it is, please help..
The ways you have for this are:
1 - The simplest - instead of a div - use an IFrame like this
<div id="search">
<form id="try" method="post" target="receiver" action="url-to-server-Page">
Batch: <input id="batch" name="batch" type="text"/>
Dept: <input id="dept" name="dept" type="text" />
<input type="submit"/>
</form>
</div>
<iframe name="receiver" id="receiver"></iframe>
</div>
The disadvantage in this case is that the search-result that come in this case from url-to-server-page - is a complete and independent HTML page that is nested in your search page.
It is not effected by styles of the parent page, and the communication between them for JavaScript operations is rather combersome.
2 - with some JavaScript skills you can use AJAX.
There are many libraries on the net that can help you do it in very few lines of code.
jQuery is the simplest, although it's the one I like least...
http://jquery.com/
3 - use a full round-trip
<div id="search">
<form id="try" method="post" target="receiver" action="url-to-server-Page">
Batch: <input id="batch" name="batch" type="text"/>
Dept: <input id="dept" name="dept" type="text" />
<input type="submit"/>
</form>
<div id="receiver">
<?php if (isset($_POST['batch']) && isset($_POST['dept'])){
//display search results here.
}
?>
</div>
</div>
You want what's called "AJAX." There are a number of libraries available, such as Google Web Toolkit or jQuery to accomplish what you want.
Can you clarify? Is this a php page and you are posting to self or are you looking to use ajax to populate the div?
If it is php and you post to self then you can simply check if the post has been made inside that div :
<div id="receiver">
<?php if (isset($_POST['batch']) && isset($_POST['dept'])){
//display search results here.
}
?>
</div>

Resources