I am creating an application in MVC4.
I have a validationsummary on my page as follows,
<div>
#Html.ValidationSummary()
</div>
when the page loads, it shows the validation summary and says one of the required fields is required. Why is this shown on load? I thought the validation summary was only shown after a submit?
thanks
<div id="GeneratePaymentContainer" class="content-container">
<div>
#Html.ValidationSummary()
</div>
<div id="GeneratePaymentPage1">
<div id="PageHeaderContainer">
<div id="HelpContainer">
<h2>#SearchPayment.SearchPlacementsHeader</h2>
#Html.PageHelp()
</div>
#{ Html.RenderPartial("PlacementFilter", Model); }
</div>
<div id="BodyContainer">
<div id="GridActions" class="buttons-container">
<a id="Print" class="button">#Buttons.PrintButton</a>
</div>
#{ Html.RenderPartial("SearchGridResults", Model); }
<div id="StandardCost"></div>
<div id="SelectedPlacementContainer"></div>
<br />
</div>
</div>
#using (Html.BeginForm("RequestAction", "Request", FormMethod.Post, new { id = "SundryEntryForm" }))
{
}...
try to write your #Html.ValidationSummary() before Html.BeginForm tag
Update : According to this Post
Therefore, just create a css rule as follows;
.validation-summary-valid
{
display:none;
}
Related
I have a Ajax.BeginForm call that is supposed to return a partial view but is rerouting the page to the Action instead. Any ideas on what is wrong?
Here is the code on the main page that I want to render the partial view on:
<div class="col-md-6">
#using (Ajax.BeginForm("Search", "Home", new AjaxOptions
{
HttpMethod = "GET",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "searchResults"
}))
{
<div class="form-group" style="width:85%;">
<div class="right-inner-addon">
<i class=" glyphicon glyphicon-search"></i>
<input type="text" data-autocomplete="#Url.Action("Quicksearch","Home")" class="form-control" placeholder="Search" name="q" />
</div>
</div>
<div class="form-group">
<button class="btn btn-default form-inline" type="submit">Search</button>
</div>
}
<br />
</div>
</div>
<div id="searchResults">
</div>
Here is the Partial view (items removed due to length):
<div class="row" id="searchResults">
...removed form elements
<div class="row">
<table class="table">
....stuff
</table>
</div>
</div>
Here is the controller:
public PartialViewResult Search(string q)
{
var items = db.items_with_descriptions
.Where(r => r.name.Contains(q) || string.IsNullOrEmpty(q))
.Take(10);
return PartialView("_Items", items);
}
As stated above, when I click my search button it redirects to localhost:24942/Home/Search instead of staying on the page and simply loading the partial view. I am new to MVC, so please keep that in mind. :)
The jquery-unobtrusive js file has to be included in your page to make the ajax.beginform work
HtML section in _Layout.cshtml
<div id="header">
<div class="logo"><img src="#Url.Content("~/!(IMAGEPATH)!/logo.png")" alt="" /></div>
<div class="fb_like"><img src="#Url.Content("~/!(IMAGEPATH)!/fb_like_btn.png")" alt="" /></div>
<div class="google_plus"><img src="#Url.Content("~/!(IMAGEPATH)!/google_plus.png")" alt="" /></div>
<div class="header_rt">
<ul>
<li>Call us: 1500 258 789</li>
<li>Live chat</li>
<li>My Account</li>
<li>Sign in</li>
</ul>
<div class="search">
<input type="text" value="Type your keyword..." class="srh_txt" />
<input name="Submit" type="submit" value="Submit" class="srh_btn" />
</div>
</div>
</div>
<div id="main">
#RenderBody()
</div>
Html section in Index.cshtml
#{
ViewBag.Title = "Home Page";
}
<div class="clr"></div>
<div id="banner">
<div id="slider"><img src="#Url.Content("~/!(IMAGEPATH)!/banner.jpg")" alt="" /></div>
<div class="banner_rt">
<div class="adv1"><img src="#Url.Content("~/!(IMAGEPATH)!/adv1.jpg")" alt="" /></div>
<div class="adv2"><img src="#Url.Content("~/!(IMAGEPATH)!/adv2.jpg")" alt="" /></div>
</div>
Using bellow code I able to Replace !(IMAGEPATH)! only in _Layout.cshtml
void Application_PostReleaseRequestState(object sender,EventArgs e)
{
if(string.CompareOrdinal(Response.ContentType,"text/html") == 0)
{
Response.Filter = new ResponseFilter(Response.Filter);
}
}
But above described code not affecting child pages like Index.cshtml. Please tell me any event in ASP.NET MVC3 like old protected override void OnPreInit(EventArgs e) of Classic ASP.NET !!!!
I want to know which event effecting all the child pages before rendering in MVC3 ?
Within Base Controller, write the bellow code
protected override void OnResultExecuting(ResultExecutingContext filterContext)
{
var response = filterContext.HttpContext.Response;
if (string.CompareOrdinal(response.ContentType, "text/html") == 0)
{
response.Filter = new ResponseFilter(response.Filter);
}
base.OnResultExecuting(filterContext);
}
Lets say i have a class 'Location', and I'm using MVC3 to create a scaffolding list(index.cshtml). The index html page uses #model IEnumerable. If i want to add a new location to the list, i press create, and i end up with a new html page using #model Project.Models.Location.
Instead of going to a new page, i would like to have the create page as a popup using modal in boostrap(twitter). I've tried using partialview without any luck. Whatever i do i get the dictionary error message.
The model item passed into the dictionary is of type 'System.Data.Entity.Infrastructure.DbQuery`1[Project.Models.Location]', but this dictionary requires a model item of type 'Project.Models.Location'.
The modal(bootstrap) itself is working when i'm not fetching the partialview. The partialview itself is exactly the same as the generated create(CRUD).
EDIT: I rewrote the whole thing.
Index:
#model IEnumerable<LoLStats.Models.Location>
#{
ViewBag.Title = "Index";
}
#foreach (var item in Model) {
<ul>
<li>#Html.DisplayFor(modelItem => item.LocationName)</li>
</ul>
}
<a class="btn" data-toggle="modal" href="#myModal" >Create</a>
<div class="modal hide" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>#Html.Partial("_createLocation")</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
_createLocation:
#model LoLStats.Models.Location
#{
ViewBag.Title = "Create"; }
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
Location
<div class="editor-label">
#Html.LabelFor(model => model.LocationName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.LocationName)
#Html.ValidationMessageFor(model => model.LocationName)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset> }
You could make a view model that has two properties:
The IEnumerable for the parent view
A singular object for the modal
Then strongly type both views to the view model and you should be all set.
Edit
ViewModel:
public class MyViewModel()
{
public IEnumerable<LoLStats.Models.Location> Locations {get; set;}
public LoLStats.Models.Location Location {get; set;}
}
Index:
#model myNamespace.MyViewModel
...
#foreach (var item in Model.Locations) {
<ul>
<li>#Html.DisplayFor(modelItem => item.Locations.LocationName)</li>
</ul>
...
_createLocation:
#model myNamespace.MyViewModel
...
<div class="editor-label">
#Html.LabelFor(model => model.Location.LocationName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Location.LocationName)
#Html.ValidationMessageFor(model => model.Location.LocationName)
</div>
...
Hopefully that's enough detail to get you going
try this in the Index view:
... <p>#Html.Partial("_createLocation", Model.FirstOrDefault())</p>
on the other hand, maybe this will make more sence:
... <p>#Html.Partial("_createLocation", new LoLStats.Models.Location())</p>
hope it works for you.
Your pop-up would need to have a model defined as Project.Models.Car (singular item). After successfully saving the single item you need to update your original list view. Which you can do using jQuery by inserting a new item into the DOM or just by refreshing the page by navigating to the action that gave you the list to begin with.
I have setup the entities in my MVC 3 app with DataAnnotations (required, stringlength, etc) and the MVC page is showing validation error messages appropriately. But, the error messages are shown as soon as the page loads on a new form before the user has had the chance to enter an invalid value.
I had used JQuery validation a few years ago and was able to only show the error messages after the user lost focus on a field or attempted to submit the form. In fact, I think it was the default behavior.
Is there anyway to do the same in MVC 3 using DataAnnotations?
EDIT: Here is the HTML
<div class="form horizontal floated w50p">
<h3>Billing Information</h3>
#using(Html.BeginForm()){
<div class="item">
<div class="label">
<label>* First Name</label></div>
<div class="value">#Html.TextBoxFor(x => x.Name)</div>
<div class="value">#Html.ValidationMessageFor(x => x.Name)</div>
</div>
<div class="item">
<div class="label">
<label>* Address 1</label></div>
<div class="value">#Html.TextBoxFor(x => x.Street1)</div>
<div class="value">#Html.ValidationMessageFor(x => x.Street1)</div>
</div>
<div class="item">
<div class="label">
<label>Address 2</label></div>
<div class="value">#Html.TextBoxFor(x => x.Street2)</div>
</div>
<div class="item">
<div class="label">
<label>Address 3</label></div>
<div class="value">#Html.TextBoxFor(x => x.Street3)</div>
</div>
<div class="item">
<div class="label">
<label>City</label></div>
<div class="value">#Html.TextBoxFor(x => x.City)</div>
<div class="value">#Html.ValidationMessageFor(x => x.City)</div>
</div>
<div class="item">
<div class="label">
<label>State/Province/Region</label></div>
<div class="value">#Html.TextBoxFor(x => x.StateProv)</div>
<div class="value">#Html.ValidationMessageFor(x => x.StateProv)</div>
</div>
<div class="item">
<div class="label">
<label>Zip / Postal Code</label></div>
<div class="value">#Html.TextBoxFor(x => x.PostalCode)</div>
<div class="value">#Html.ValidationMessageFor(x => x.PostalCode)</div>
</div>
<div class="item">
<div class="label">
<label>* Contact Phone</label></div>
<div class="value">#Html.TextBoxFor(x => x.ContactPhone)</div>
<div class="value">#Html.ValidationMessageFor(x => x.ContactPhone)</div>
</div> <input type="submit" value="Submit" />
}
The default behavior is exactly what you describe (errors should appear only after a field loses focus or form is submitted). So, there must be something wrong with your view or controller. Specifically, it sounds like the validator thinks the user is posting back even on the first view of the form. The first view of the form should be a GET not a POST. If you paste your controller code, that might help us diagnose it better.
You mean like enabling client validation? Sure, that's easy. Just:
create a view model
decorate it
create controller
create a view
include proper jquery scripts
So let's go ahead and follow those steps.
View model:
public class ProductViewModel
{
[Required] // <-- you could use any data annotation attributes you like
public string Name { get; set; }
}
Controller:
public class HomeController : Controller
{
public ActionResult Index()
{
var model = new ProductViewModel();
return View(model);
}
[HttpPost]
public ActionResult Index(ProductViewModel model)
{
return View(model);
}
}
View:
#model ProductViewModel
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
#using (Html.BeginForm())
{
#Html.LabelFor(x => x.Name)
#Html.EditorFor(x => x.Name)
#Html.ValidationMessageFor(x => x.Name)
<input type="search" value="OK" />
}
Now leave the field blank and client validation will trigger assuming it is enabled in web.config (which it is by default when you create a new ASP.NET MVC 3 project using the default Visual Studio template):
<appSettings>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>
If you want to handle custom validation attributes you could but it might be a little more painful. And once you get yourself confronted to real world applications and realize the weaknesses of declarative validation using attributes (data annotations) I would strongly recommend you checking out FluentValidation.NET.
I am having a login page. In the login Page I don`t have any menu and based upon the user login a menu appear on the Home page.
My problem is how not to display the menu only in my login page?
I am having a page MenuControlPartial.cshtml as follows for the menu:
<li>Admin
<ul>
<li>TimeKeeper</li>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
</li>
<li>Settings
<ul>
<li>VV</li>
<li>XX</li>
</ul>
</li>
</ul>
My _layout.cshtml is as as follows:
<div id="page">
<div id="header">
<div id="title">
<br />
</div>
#if (Request.IsAuthenticated)
{
<div id="loginInfo">
#Html.Partial("_LogOnPartial")
</div>
<div class="clear">
</div>
<div id="menucontainer">
#Html.Partial("MenuControlPartial")
</div>
<div class="clear"></div>
}
</div>
<div id="content">
#RenderBody()
</div>
</div>
}
</body>
You could test the current controller and action
#if (!(Html.ViewContext.RouteData.GetRequiredString("controller") == "Login" && Html.ViewContext.RouteData.GetRequiredString("action") == "Index")) {
<div id="menucontainer">
#Html.Partial("MenuControlPartial")
</div>
}
And to avoid this ugliness write a helper:
public static bool ShouldDisplayMenu(this HtmlHelper htmlHelper)
{
var routeData = htmlHelper.ViewContext.RouteData;
var controller = routeData.GetRequiredString("controller");
var action = routeData.GetRequiredString("action");
return !(controller == "Login" && action == "Index");
}
and then:
#if (Html.ShouldDisplayMenu()) {
<div id="menucontainer">
#Html.Partial("MenuControlPartial")
</div>
}