I need to put the same NAME tag for Html.CheckBox somehow .
How I can do it? Here is my code... Thank you!
foreach (var answer in #question.Answers)
{
#Html.CheckBox("answer_CheckBox_" + answer.ID.ToString(), false, new { Value = answer.ID });
<label style="margin-left: 0.5em;">#answer.Title</label>
<br />
}
You're using an incrementing value as part of the name argument to the CheckBox() method (the first argument), so naturally they're going to be different names in the rendered HTML.
If you need them all to have the same name attribute value, use a static value:
#Html.CheckBox("answer_CheckBox", false, new { Value = answer.ID });
Does this work?
#Html.CheckBox("answer", false, new { name="answer", value = answer.ID });
Related
I have the following html for a Kendo MVVM DropDownList:
<select id="responseTypeDDL"
data-role="dropdownlist"
data-text-field="SystemResponseTypeCode"
data-value-field="SystemResponseTypeId"
data-bind="value: selectedSystemResponseTypeCode, source: responseTypes">
</select>
This is my view model:
SC.ViewModels.Reference.ResponseTypeDataSource.read();
var responseTypeDDL = kendo.observable({
responseTypes: SC.ViewModels.Reference.ResponseTypeDataSource,
selectedSystemResponseTypeCode: null,
setSelectedSystemResponseTypeCode: function (code) {
this.selectedSystemResponseTypeCode = code;
},
});
kendo.bind($("#responseTypeDDL"), responseTypeDDL);
// after reading data, I call the method to set the selected value like this:
self.ResponseTypeDDL.setSelectedSystemResponseTypeCode(results.code);
The ResponseTypeDataSource.read() method returns a list of "XML", "JSON". This is the SystemResponseTypeCode field. I also read another data item from the database
and check its response type. Let's say it is "JSON". How do I set the drop down to have "JSON" selected?
First of all this part seems to be wrong
setSelectedSystemResponseTypeCode: function (code) {
this.selectedSystemResponseTypeCode = code;
},
You should make sure to call set() method while modifying an observed variable, otherwise it might not update the bindings:
this.set("selectedSystemResponseTypeCode", code);
And for your actual question
You need to set data-value-primitive="true" in order to work with just the id (Kendo Docs) (Please note changes below, value: selectedSystemResponseTypeId)
<select id="responseTypeDDL"
data-role="dropdownlist"
data-text-field="SystemResponseTypeCode"
data-value-field="SystemResponseTypeId"
data-value-primitive="true"
data-bind="value: selectedSystemResponseTypeId, source: responseTypes">
</select>
SC.ViewModels.Reference.ResponseTypeDataSource.read();
var responseTypeDDL = kendo.observable({
responseTypes: SC.ViewModels.Reference.ResponseTypeDataSource,
selectedSystemResponseTypeCode: null,
selectedSystemResponseTypeId: null,
setSelectedSystemResponseTypeId: function (id) {
this.set("selectedSystemResponseTypeId", id);
},
});
kendo.bind($("#responseTypeDDL"), responseTypeDDL);
// Get your id
var id = ...
responseTypeDDL.setSelectedSystemResponseTypeId(id);
Working example: http://dojo.telerik.com/AbIm/8
I've managed to manually set the value in dropdownlist without resorting to
data-value-primitive="true"
because i need to access the selected value and display other fields.
Here's the solution:
var id = 1004;
var dataItem = responseTypeDDL.responseTypes.get(id); //get the id in your datasource
responseTypeDDL.set("selectedsystemResponse", dataItem);
Lest say I got a view with this loop:
#foreach (var item in Model.Blogposts)
{
#item.Id
#Html.JQueryUI().Datepicker("Date")
}
So I got an Id and also a date choosen from the datePicker. Can someone show me how I can pass these two values to an Ajax that the loads a method?
$(".setDate").click(function () {
})
.load("/Home/Method?id=" + $(this).data("#itemID"));
});
Am I on the right way with what i´ve done so far? Help appreciated. Thanks!
EDIT:
Here is the method to which I want to pass the values:
public ActionResult SetDate(string valuefromDatePicker, string itemId)
{
//Code that updates the Time-property
//This I can figure out
return RedirectToAction("Test");
}
Which should mean that the view should look something like this:
#Html.JQueryUI().Datepicker("Date", new { data_url = Url.Action("SetDate", "Home", new { id = item.Id }) })
Should I also add a submit-button and give it the class .setDate?
You seem to be using some custom #Html.JQueryUI().Datepicker extension method that is not part of ASP.NET MVC. You should have at least mentioned the custom library you are using. In general most of the jQuery UI helper methods have overloads with an htmlAttributes parameter. This would allow you to add custom data-* attributes that you could use in your javascript code later. Consult the documentation of the library you are using about how to specify custom HTML attributes but your code might look something along the lines of:
#foreach (var item in Model.Blogposts)
{
#item.Id
#Html.JQueryUI().Datepicker("Date", new { data_url = Url.Action("Method", "Controller", new { id = item.Id }) })
}
and then in your javascript file:
$('.setDate').click(function () {
var url = $(this).data('url');
$('#result').load(url);
});
In my cshtml file i have the following call
#foreach( var EducationPlan in Model.Fields) {
#HtmlHelper.EditorFor(m => EducationPlan, "ViewFieldInputWithHidden")
}
and in ViewFieldInputWithHidden.cshtml i have
#HtmlHelper.TextBox(Model.MemberName, Model.Value, Model.HtmlAttributes)
#HtmlHelper.Hidden(Model.MemberName, Model.Value, new { id = Model.MemberName + "_Hidden" })
This gives me, with unimportant stuff removed
<input id="EducationPlan_ResponsiblePerson" name="EducationPlan.ResponsiblePerson" type="text">
<input id="ResponsiblePerson_Hidden" name="EducationPlan.ResponsiblePerson" type="hidden">
Is there any way to emulate/use the same value as the TextBox uses to get the "EducationPlan" string with me when i write the id? Or is there, even better, just a way to append the "_Hidden" to the id.
I found the solution and i'm leaving it here for other who runs into the same problem.
Replacing the hidden with the following code helped:
#Html.Hidden(Model.MemberName, Model.Value, new { id = Html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldId(Model.MemberName) + "_Hidden" })
So, basically the TemplateInfo class saves the expression in some way.
So I am trying to validate the input of one item inside of an ng-repeat. For examples sake lets say that I have 5 items (1,2,3,4,5) and I only want to validate the form if the 4th item is selected.
I have used ng-pattern before to validate forms, but not one that had a dropdown menu to select item.name
I have included the regex I would like the 4th item to be validated with inside the ng-pattern.
<div>
<select name="name" ng-model="item.name" ng-options="item for item in items" required></select>
</div>
<div>
<input name="results" type="text" ng-model="item.results" ng-pattern="/^\d\d\d\/\d\d\d/" required>
</div>
Any suggestions as to the correct way to validate this situation would be greatly appreciated. I have thought about creating a directive to validate this, but that feels like is an overly complicated solution to this since I would not use the directive more than once in this app.
//////////////////////////////////////////////////
It wouldn't let me answer my own question so here is the answer I figured out.
What I ended up having to do was use ng-pattern and pass it a function.
<input name="results" type="text" ng-model="vital.results" ng-pattern="vitalRegEx()" required>
Here is the controller code
$scope.item4RegEx = /^\d{2,3}\/\d{2,3}$/;
$scope.itemRegEx = function() {
if($scope.item && $scope.item.name === "fourth item")
return $scope.item4RegEx;
else return (/^$/);
};
or else...
add ng-change directive on the select dropdown which calls a Controller method and that controller method sets a flag whether to validate form or not.
eg.
<select ng-change="checkIfFormShouldbeValidated()" ng-model="item.name"></select>
// Inside controller
$scope.checkIfFromShouldBeValidated = function(){
if( $scope.item.name == 4th Item ) $scope.shouldValidate = true;
else $scope.shouldValidate = false;
};
$scope.formSubmit = function(){
if(($scope.shouldValidate && form.$valid) || (!$scope.shouldValidate)){
// Submit Form
}
};
See if it helps.
I wrote this recursive function inside my controller to check the validity of all child scopes.
function allValid(scope) {
var valid = true;
if (scope.$$childHead) {
valid = valid && allValid(scope.$$childHead);
}
if (scope.$$nextSibling) {
valid = valid && allValid(scope.$$nextSibling);
}
if (scope.scorePlannerForm) {
valid = valid && scope.myForm.$valid;
}
return valid;
}
Then in my controller I check this with the controller scope.
function formSubmit() {
if (allValid($scope)) {
// perform save
}
}
I'm fairly new to MVC 3 and am using the Razor view engine. I'm using the Html.Hidden extension method to output input elements of type hidden. What I woudl also like to do is add a custom attribute to hold a dynamic value. I was under the impression in HTML5 wee could write custom html element attributes that are prefixed with 'data-'. I'm trying to do something like below;
#Html.Hidden("hdnID", mymodel.somevalue, new { data-uniqueid = mymodel.somevalue })
hoping to render;
<input type="hidden" value="mymodel.somevalue" data-uniqueid="mymodel.somevalue"/>
The htmlAttributes part (new { data-uniqueid = mymodel.somevalue }) is giving the error,
"Invalid anonymous type member declarator. Anonymous type members must be declared with a member assignment, simple name or member access".
Can I add user-defined attribute to html elements using the HtmlHelper classes?
Regards,
Use:
#Html.Hidden("hdnID", mymodel.somevalue, new { #data_uniqueid = mymodel.somevalue })
The underscore gets automatically converted to a dash.
Doh! I was being silly. You can't have '-' in the anon type declaration:
data-uniqueid = ...it must be
datauniqueid = ....
In that case, your best best is to write out the hidden input by hand:
<input type="hidden" value="#mymodel.somevalue" data-uniqueid="#mymodel.somevalue"/>
You can step around the member validation by constructing a dictionary object. As follows:
#Html.TextBoxFor(model => model.Phone, new Dictionary<string, object>
{
{
"data-call-results-target", "#search-results-area"
},
{
"data-action-path", "/Controler/Method"
}
})