I am developing MVC app. with boot strap.
I am trying to put margin for the first name field.
Please check the below image.
Now the problem is Validation message doesn't appear properly.
I want to show the validation message below the first name.
If I used margin more than 20 px then text box come below the label of firstname.
How to do this ?
Below is the code.
<div class="span6">
<div class="editor-label span3">
#Html.LabelFor(model => model.FirstName, "First Name")
</div>
<div class="editor-field span6 InputBoxMargin" style="width:290px; margin-right:20px;">
#Html.TextBox("FirstName",null, new {style = "width:210px;" })
#Html.ValidationMessageFor(model => model.FirstName,"You can't leave this empty.")
</div>
</div>
Have you considered using Bootstrap forms? There is a really nice drag and drop builder here. Using forms means the margins are taken care of for you.
Something like
<div class="form-horizontal">
<div class="control-group">
#Html.LabelFor(model => model.FirstName, "First Name")
<div class="controls">
#Html.TextBox("FirstName",null, new {style = "width:210px;" })
<p class="help-block">
#Html.ValidationMessageFor(model => model.FirstName,"You can't leave this empty.")
</p>
</div>
</div>
</div>
Edit: For the drag and drop link -
Build your form by dragging/dropping components onto the canvas
click the 'rendered' tab
copy/paste the HTML
et voila!
Should probably take sometime to refer to the Github/docs site to understand why/how it works too.
Please refer the below links. You will get exactly what you want
http://bootsnipp.com/resources
http://twitter.github.io/bootstrap/javascript.html
Related
I'm using Kendo Grid with several columns which are used for overview row data. When users click Add/Edit buttons, the popup will be shown with some additional data which includes some checkboxes.
I have a problem when binding the checkboxes with the current MVVM model because, when adding a new row, Kendo treats the model as a variable, not an array. This causes many checkboxes to be checked when one is checked(clicked). After taking a look at Kendo MVVM, I intended to get the MVVM model of current popup in order to manipulate some data but was not successful. Therefore I would look for the help in:
Getting the current MVVM model of the popup (So that I can edit the model)
Any recommendation in binding many checkboxes when clicking the Add button(there is no initial data).
you need to write a template for this
then write this to the grid
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("myTemplate"))
this is a sample template:
#model teknik.Models.Magaza_Viewmodel
#Html.HiddenFor(model => model.ID)
<div class="editor-label">
#Html.LabelFor(model => model.ADI)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ADI)
#Html.ValidationMessageFor(model => model.ADI)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.ADRES)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ADRES)
#Html.ValidationMessageFor(model => model.ADRES)
</div>
So I have this master/detail setup with a WebGrid. All is well until I try and use RenderPage to display the detail when a record is clicked:
<div class="innerbox">
#{
if(gdEligibility.HasSelection){
#RenderPage("~/Views/Eligibility/EligibilityPolicyDetailView.cshtml",
new { Customer = gdEligibility.SelectedRow })
}
}
</div>
Everything works, if I put a break point I can step through the detail view's cshtml file no problem, no errors. But nothing is ever rendered between the outer div's. Ever. Why doesn't RenderPage return anything? I even tried adding .ToHtmlString() on the end of the line but still nothing.
The detail cshtml:
#{ foreach(TravelInsurance.Models.Policy p in Page.Customer.Policies){
<fieldset>
<legend>Policy</legend>
<div class="display-label">Policy Number</div>
<div class="display-field">
#Html.DisplayFor(model => p.PolicyNumber)
</div>
<div class="display-label">Premium</div>
<div class="display-field">
#Html.DisplayFor(model => p.Premium)
</div>
</fieldset>
}}
This question suggests that RenderPage will use the parent model...
Maybe try using
#{Html.RenderPartial("EligibilityPolicyDetailView", new { Customer = gdEligibility.SelectedRow });}
or
#Html.Partial("EligibilityPolicyDetailView" ,new { Customer = gdEligibility.SelectedRow })
Pl. try again by removing the attribute "ajaxUpdateContainerId" in the grid definition and it should work.
I am using MVC3 and my view has a mixture of razor and raw html in my view e.g.
<div class="editor-field">
#Html.EditorFor(model => model.PAGE)
#Html.ValidationMessageFor(model => model.PAGE)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.PERIODICAL)
</div>
div class="editor-field">
<div class="editor-field">
<input type="text" id="periodicallist" name="tiperiodical" />
</div>
</div>
My JavaScript applies the tokenInput control plugin to the textbox and its all fine, but I wonder how I can validate this (i.e. for empty textbox/tokenInput), it needs to filled with at least 1 token. At the moment it's confusing having these two forms of creating a view, letting Razor constuct elements direct from the model, and then adding more complexity/cusomization by usin jQuery plugins etc.
Can anyone advise how I can validate jQuery plugins on posting back to the controller?
Cheers
If you are using unobtrusive validation then you all have to do is add the necessary HTML5 data attributes to the input elements from javascript and microsoft's unobtrusive javascript library will take care of the rest.
For ex. if you have dynamically injected a textbox into the form through javascript and you need to perform required validation then all you have to add the data-val and data-val-required attributes as below.
<input data-val="true"
data-val-required="No. of joinees is required"
name="NoOfJoinees"
type="text" />
EDIT:
To display the validation error message you have to inject a span near to the field,
<span class="field-validation-valid"
data-valmsg-for="NoOfJoinees"
data-valmsg-replace="true">
</span>
I'm new to Watir and I'm trying to click the following login button:
<div class="container login" style="display: table;">
<div class="left">
<div class="right">
<div class="joinbox">
<form id="form_login" class="hidden-submit" method="post">
<input type="submit" value="Submit">
<div class="header">
<div class="left">
<div class="mid">
<div class="right">
<a class="button button-red submit" href="#">Log In</a>
...
So far I'm able to access this button by going through every nested div:
b.div(:class, "container login").div(:class, "right").div(:class, "joinbox")......
and so on. Is this really the best way to access this button? I assume I'm missing something. Any help is appreciated!
If there is only one link (that looks like a button) with text Log In on the page, try this:
browser.a(:text => "Log In").click
You could also use class attribute:
browser.a(:class => "button button-red submit").click
May this work?
browser.form(id,form_login).submit
BTW: I have seen some tips said safari only support GET mode for submit.
I would try:
browser.a(:href => "#").click
Assumption - "#" is unique. may need a slash so it doesn't misinterpret the #. I used something similar when I was trying to reference a button with only a href value of "/login" e.g., browser.a(:href => "/login").click.
I am trying to create a page which has Telerik Editor control. Use can create email templates using this screen. when I have put this Control in side #Html.BeginForm it works. I mean then i am able to get the value in my Controller .
When I create the form tag and put this Editor inside that tag, it does not work. The value comes as null in my controller.
WORK :-
#using (Html.BeginForm("Create", "Template", FormMethod.Post, new { #class = "ajax-form" }))
{
<div class="file-contents">
<div class="editor-label">
#Html.LabelFor(model => model.Contents)
</div>
<div class="editor-field">
#(Html.Telerik().EditorFor(model => model.Contents)
.HtmlAttributes(new { style = "width: 600px; height: 300px;" })
.Encode(false)
)
#Html.ValidationMessageFor(model => model.Contents)
</div>
</div>
}
Does not work.
<form dojoType="dijit.form.Form" id="createTemplateForm" jsId="createTemplateForm" encType="multipart/form-data" action="#Url.Action("Create", "Template")" method="POST"> <div class="file-contents">
<div class="editor-label">
#Html.LabelFor(model => model.Contents)
</div>
<div class="editor-field">
#(Html.Telerik().EditorFor(model => model.Contents)
.HtmlAttributes(new { style = "width: 600px; height: 300px;" })
.Encode(false)
)
#Html.ValidationMessageFor(model => model.Contents)
</div>
</div>
</form>
Any idea why is this happening? Please let me know.
Thanks.
In order for the two to match up, the "name" attribute has to be set correctly.
Make sure on the version with the form tag, the "name" attribute is set correctly on the Telerik input.
If it is not, you can add it by passing an object of html settings (should be one of the overloads)