Custom Html.ValidationSummary() - asp.net-mvc-3

I'm having problems the default Html.ValidationSummary() in MVC 3.
As default it adds this code:
<ul>
<li style="display:none"></li>
</ul>
And that empty <ul> causes space I would like to get rid of.
Is there some way to work around this problem? Make it toggle some div around it or similar?

how about conditionally showing ValidationSummary
if(!ViewData.ModelState.IsValid)
{
#Html.ValidationSummary()
}
important if you do this you won't be able to use client-side javascript validation (as the div wont be present)

You can create your own validation summary, for example, like here: Custom ValidationSummary template Asp.net MVC 3

Related

MVC how to hide #Render

I'm doing a browser check and trying to display a warning message if the person is using a browser that is not compatible(IE 8 and less), believe me, there are people using it where i work
The problem i'm having is i cannot seem to hide the #Render of the page
My if statements are all kicking in fine, and i have wrapped the #Render with a div and i'm trying to hide it based on the conditions i get, like so
else {
$("#yourMessage").show();
$("#content").hide();
}
HTML
<div id="content">
#RenderBody()
</div>
<div id="yourMessage" hidden="hidden">Some Message</div>
Is there something built in to MVC to stop me from being able to do this?

Dijit form stops validating when mvc Group is used in it

I have a page which uses dijit/form/Form to validate all of the form widgets in it.
Validation works correctly if I put widgets directly under the Form (tag).
Once I surround the widgets with a dojox/mvc/Group (within the form), Form validation stops completely and none of the widgets seem to validate when I call Form::validate().
Debugging the Dojo code shows that nested widgets are never considered validatable in the Form so when I surround widgets with Group they get excluded from validation.
Is there a workaround for this?
AFAICT from dijit/form/_FormMixin#_getDescendantFormWidgets() and dijit/_WidgetBase#getChildren(), the issue can be solved by adding data-dojo-mixins="dijit/_Container" to the element having data-dojo-type="dojox/mvc/Group".
Also (though I'm not sure if it meets your requirement), dojox/mvc/tests/test_mvc_new_loan-stateful.html example shows form validation solution with dojox/mvc.
Hope it helps.
Best, Akira
It seems like there is no easy way to solve this with dijit/form/Form. At the very least, it should be subclassed or monkey-patched to make it consider nested widgets.
However, it seems that dojox/form/Manager handles nested widgets properly, so I have switched to it.
Switching to Manager required some refactoring since it cannot be simply converted into an object with dom-form (dijit/form/Form can be converted).
HTML code before:
<div
id="_pg_detailForm"
data-dojo-type="dijit/form/Form"
encType="multipart/form-data"
action="" method=""
>
... form widgets (surrounded with MVC Groups...etc)
</div>
After:
<form id="_pg_detailForm">
<div
id="_pg_detailFormManager"
data-dojo-type="dojox/form/Manager"
>
... form widgets (surrounded with MVC Groups...etc)
</div>
</form>

Mult page angular development

I have to create multi page angular framework using ng boilerplate. We have modular component based approach and single component can be created multiple times on same page. For example I can have 2 instance of carousel component on home page and there configuration and slides parameter for image path etc are coming from ajax. Now challenge is that this ajax url is dynamic and there is no fixed pattern so I cant hard code in my js. is there any way I can pass this dynamic url from template to my $http request?
Something like this in
<div ng-controller="CarouselCtrl" carouselUrl="<dynamic url>">
<div class="container slider">
<ul>
<li ng-repeat="slide in slides">//..</li>
</ul>
</div>
</div>
You can pass attributes to controllers only in directives. Moreover, you might rethink having your CarouselCtrl logic in separate directive, as this is clearly the case where this should be done.

MVC 3 HTML 5 and HTML 4

I have a MVC 3 project and I enable the HTML 5 markup. For the HTML 5 part, it is running fine.
Now I created a partial view and copy and paste some code into it
The first line is
<div id="Header">
I want to use this partial view in my view which is html 4 markup.
The problem comes, the razor engine automatically convert my
<div id="Header">
into
<Header>
I don't want to use HTML 5 for this view but only HTML 4. What should I do?
If you change the div as follows, it won't get swapped out:
<div id="strap">
Which may solve your immediate problem.
why do you want to covert back to:
<div id="Header">
where is the way to go in the future?
If you worried about the compatibility with the older browser, you can simply implement modernizr-2.6.2.js. (which should come with the Visual Studio web projects)
This will make all the basic HTML5 works in older browser.
(tho haven't tested with browser older than IE6)
you could always use a class instead of an id
<div class="header">
this has the added advantage of not making your css (if any) for this element very specific, and also means that the ID cannot be reused.
you can still select your element using jQuery selector using it's class as the selector
$('.header')
question for you: Did you created the Html 4 partial view in Html 5 view? ; If your answer is yes, the problem you mentioned is occurring naturally. When MVC renders your page, he first renders the Html 5 part(the layout master page). As a result, Html5 type doc type will be chosen by default. After that when the Html 4 partial view is rendered, the engine renders it under a mark up support for Html 5.
if i want to summarize what i wanted to say:
<html>
//Html 4 partial view.
</html>
This will make a Html 5 markup view no matter what Html4 code you wrote in that partial view. If i am wrong, let me know. I will learn from my mistakes. thanks.
Can you please use Transitional doctype on the top of your partial view page. Because HTML engine understand the page according to doctype.

Declarative AJAX "Controls" in MVC

I want to create a reusable ajax control in MVC .NET using RAZOR.
my example is a simple ajax text box and list where the user filters the list by typing in the text box. on the first call i would render both the text box and the list using my razor view. on subsequent AJAX calls i would want to ONLY render the (now filtered) list.
idea 1: use #if statement to conditionally render code.
problem: razor does not seem to like conditionally written html. for example it errors when a <div> tag is not followed by a closing </div>.
idea 2: use #section tokens to create portions of my control and then call RenderSection within the same file as needed.
problem: razor does not allow RenderSection to call sections in the same page
i know i can conditionally render html as strings, but i wanted to take advantage of the legibility of the razor markup and keep with development protocols.
You should be able to output <div> tags in a Razor block without the corresponding </div> tag by surrounding it with <text>. The reason is that Razor uses the closing tag to know when to drag back into code-parsing mode:
#if (myCondition)
{
<text>
<div>
</text>
}
As for the Section stuff, you might be able to achieve what you want using Templated Razor Delegates, like this:
#{
Func<dynamic, object> b = #<strong>#item</strong>;
}
// ...
<span>This sentence is #b("In Bold").</span>
See Phil Haack's blog for a little more on this.

Resources