Editor template duplicated - applyBindings? - asp.net-mvc

When I submit my form, foreach: integers is duplicating my Editor templates. Does anybody know why?
e.g. Suppose I submit 5 integers, when I click the add button, 5 editor templates will be added instead of 1.
Razor:
<div data-bind="foreach: integers">
#Html.EditorFor(model => model.Integers)
</div>
<input name="btn" type="button" data-bind="click: addInteger" value="+" />
<input name="btn" type="button" data-bind="click: removeInteger, enable: integers().length > 2" value="-" />
Editor Template:
#model IntegerSorter.Models.IntegerViewModel
<div class="input-group">
#Html.TextBoxFor(
m => m.IntegerValue,
new {
#class = "text-box single-line text-input large-input",
type = "number",
data_bind = "value: name,
uniqueName: true,
valueUpdate: 'afterkeydown',
attr:
{
id: 'Integers_' + $index() + '__IntegerValue',
name: 'Integers[' + $index() + '].IntegerValue'
}"
}
)
#Html.ValidationMessageFor(model => model.IntegerValue)
</div>
Knockout:
var viewModel = {
integers: ko.observableArray([
{ name: ko.observable(), value: "0" }
]),
addInteger: function () {
this.integers.push({
name: ko.observable()
});
},
removeInteger: function () {
this.integers.pop({
name: ko.observable()
});
},
save: function () {
ko.utils.postJson($("form")[0], integers);
}
};
ko.applyBindings(viewModel);
Edit:
HTML:
<div data-bind="foreach: integers">
<div class="input-group">
<input class="input-validation-error text-box single-line text-input large-input" data-bind="value: name, uniqueName: true, valueUpdate: 'afterkeydown', attr: { id: 'Integers_' + $index() + '__IntegerValue', name: 'Integers[' + $index() + '].IntegerValue' }" data-val="true" data-val-number="The field IntegerValue must be a number." data-val-regex="Enter an integer" data-val-regex-pattern="^-?\d+$" data-val-required="Enter an integer" id="Integers_0__IntegerValue" name="Integers[0].IntegerValue" type="number" value="">
<span class="field-validation-error" data-valmsg-for="Integers[0].IntegerValue" data-valmsg-replace="true">Enter an integer</span>
</div>
<div class="input-group">
<input class="input-validation-error text-box single-line text-input large-input" data-bind="value: name, uniqueName: true, valueUpdate: 'afterkeydown', attr: { id: 'Integers_' + $index() + '__IntegerValue', name: 'Integers[' + $index() + '].IntegerValue' }" data-val="true" data-val-number="The field IntegerValue must be a number." data-val-regex="Enter an integer" data-val-regex-pattern="^-?\d+$" data-val-required="Enter an integer" id="Integers_0__IntegerValue" name="Integers[0].IntegerValue" type="number" value="">
<span class="field-validation-error" data-valmsg-for="Integers[1].IntegerValue" data-valmsg-replace="true">Enter an integer</span>
</div>
<div class="input-group">
<input class="input-validation-error text-box single-line text-input large-input" data-bind="value: name, uniqueName: true, valueUpdate: 'afterkeydown', attr: { id: 'Integers_' + $index() + '__IntegerValue', name: 'Integers[' + $index() + '].IntegerValue' }" data-val="true" data-val-number="The field IntegerValue must be a number." data-val-regex="Enter an integer" data-val-regex-pattern="^-?\d+$" data-val-required="Enter an integer" id="Integers_0__IntegerValue" name="Integers[0].IntegerValue" type="number" value="">
<span class="field-validation-error" data-valmsg-for="Integers[2].IntegerValue" data-valmsg-replace="true">Enter an integer</span>
</div>
<div class="input-group">
<input class="input-validation-error text-box single-line text-input large-input" data-bind="value: name, uniqueName: true, valueUpdate: 'afterkeydown', attr: { id: 'Integers_' + $index() + '__IntegerValue', name: 'Integers[' + $index() + '].IntegerValue' }" data-val="true" data-val-number="The field IntegerValue must be a number." data-val-regex="Enter an integer" data-val-regex-pattern="^-?\d+$" data-val-required="Enter an integer" id="Integers_0__IntegerValue" name="Integers[0].IntegerValue" type="number" value="">
<span class="field-validation-error" data-valmsg-for="Integers[3].IntegerValue" data-valmsg-replace="true">Enter an integer</span>
</div>
<div class="input-group">
<input class="input-validation-error text-box single-line text-input large-input" data-bind="value: name, uniqueName: true, valueUpdate: 'afterkeydown', attr: { id: 'Integers_' + $index() + '__IntegerValue', name: 'Integers[' + $index() + '].IntegerValue' }" data-val="true" data-val-number="The field IntegerValue must be a number." data-val-regex="Enter an integer" data-val-regex-pattern="^-?\d+$" data-val-required="Enter an integer" id="Integers_0__IntegerValue" name="Integers[0].IntegerValue" type="number" value="">
<span class="field-validation-error" data-valmsg-for="Integers[4].IntegerValue" data-valmsg-replace="true">Enter an integer</span>
</div>
</div>
</div>

Related

Vue.js and Form array

I am converting a form from knockout to vue 2 with an ASP.NET MVC 5 Controller for the back end. This is my first attempt using vue. When the user presses the + button, it adds a new row onto the form. The issue I'm having is submitting that to the back end. The old knockout code dynamically set the name attribute in the form elements to Quantities so the form array properly submits all of the data. I would like to do the same thing with vue but am having a a bit of trouble dynamically setting the name of each element dynamically. What would be the best way to do this in order to submit the form without having to rewrite the Controller signature? It should store the form array under the name Quantities.
Image:
HTML:
<div id="radios" v-for="(row,key) in order">
<div class="row">
<div class="col-md-3">
#Html.SmartLabel("systemType", "System Type", true, labelClass)
<label>
<input type="radio" value="#Model.WifiId" v-model="order[key].selectedSystemType" v-on:change="systemChanged(key)"> Wifi
</label>
<label>
<input type="radio" value="#Model.WirelessId" v-model="order[key].selectedSystemType" v-on:change="systemChanged(key)"> Wireless
</label>
<label>
<input type="radio" value="#Model.FiberId" v-model="order[key].selectedSystemType" v-on:change="systemChanged(key)"> Fiber
</label>
</div>
<div class="col-md-4">
#Html.SmartLabel("assetType", "Asset Type", true, labelClass)
<!--
https://stackoverflow.com/questions/43812817/how-to-set-optgroup-select-label-in-vue-js
-->
<select id="asset-type" name="" class="form-control" v-model="order[key].selectedAsset" v-on:change="assetTypeChanged(key)">
<optgroup v-for="(group, name) in order[key].assets" v-bind:label="name">
<option v-for="asset in group" v-bind:value="asset">
{{asset.Name}}
</option>
</optgroup>
</select>
</div>
<div class="col-md-2">
#Html.SmartLabel("quantity", "Quantity", true, labelClass)
<input type="number" min="1" class="form-control" v-model="order[key].quantity" />
</div>
<div class="col-md-2">
<div v-show="costTracked">
#Html.SmartLabel("cost", "Unit Cost", true, labelClass)
<input type="number" min="1" class="form-control" v-model="order[key].cost" />
</div>
</div>
<div>
<span style="cursor:pointer" v-on:click="removeItem(key)">
X
</span>
</div>
</div>
</div>
Vue.js code:
var app = new Vue({
el: '#vue-app',
data: {
assets: {},
assetQuantityEnabled: false,
costTracked: false,
order: []
//Quantities: []
},
methods: {
// Trigger when system type radio selection changes
systemChanged: function (key) {
$.getJSON('#Url.Action( "GetAssetsOfSystem", "RadioOrder" )?systemTypeId=' + this.order[key].selectedSystemType, function (data) {
var result = {};
// Add assets to category (AssetCategory)
for (const asset of data) {
(asset.AssetCategoryName in result) ? result[asset.AssetCategoryName].push(asset) : result[asset.AssetCategoryName] = [];
}
// Sort assets within each category
for (const option in result) {
result[option].sort((a, b) => {
return a.Name.localeCompare(b.Name);
});
}
this.order[key].assets = result;
this.costTracked = false;
this.assetQuantityEnabled = false;
}.bind(this));
},
assetTypeChanged: function (key) {
this.assetQuantityEnabled = true;
this.costTracked = this.hasMacOrSerial(this.order[key].selectedAsset);
},
addItem: function () {
obj = this.defaultObj();
this.order.push(obj);
},
convertFormData: function(){
var q = [];
for(let i=0; i < this.order.length; i++)
{
var obj = {
AssetTypeId: this.order[i].selectedAsset.AssetTypeId,
AssetTypeIsSerialized: this.hasMacOrSerial(this.order[i].selectedAsset),
Quantity: this.order[i].quantity,
UnitCost: this.order[i].cost
};
q.push(obj);
}
return q;
},
defaultObj: function () {
return {
asset: '',
assets: [], // list items
cost: 0,
quantity: 1,
selectedSystemType: null,
selectedAsset: null
};
},
hasMacOrSerial: function (asset) {
return (asset.HasMacAddress || asset.HasSerialNumber) ? true : false;
},
removeItem: function (key) {
this.order.splice(key, 1);
}
}
});
Controller method signature:
public virtual ActionResult Create(
[Bind(Include = "VendorId,OrderNumber,RequisitionNumber,Quantities,SerializedAssets,Attempt")] InventoryOrderDto dto)
Old HTML using Knockout:
<div class="col-md-6">
<div class="panel panel-default white-box">
<div class="panel-heading">
<h3 class="panel-title">Order Summary</h3>
</div>
<div class="panel-body">
<div id="radios" data-bind="foreach: QuantitiesDisplay, visible: QuantitiesDisplay().length > 0" style="display: none">
<div class="row">
<input type="hidden" data-bind="value: AssetTypeId, attr: {name: 'Quantities[' + $index() + '].AssetTypeId'}" />
<input type="hidden" data-bind="value: AssetTypeIsSerialized, attr: {name: 'QuantitiesDisplay[' + $index() + '].AssetTypeIsSerialized'}" />
<input type="hidden" data-bind="value: UnitCost, attr: {name: 'Quantities[' + $index() + '].UnitCost'}" />
<div class="col-md-3" data-bind="text: AssetTypeName" style=" word-break: break-all;">
</div>
<div class="col-md-3">
<input type="number" min="1" class="form-control" data-bind="value: Quantity, attr: {name: 'Quantities[' + $index() + '].Quantity'}" />
</div>
<div class="col-md-3">
<input type="number" min="1" class="form-control" data-bind="visible:AssetTypeIsSerialized, value: UnitCost, attr: {name: 'Quantities[' + $index() + '].UnitCost'}" />
</div>
<div class="col-md-2">
<a class="btn btn-danger" title="Remove" data-bind="click: $root.removeItem">
<i class="fa fa-minus-circle"></i> Remove
</a>
</div>
</div>
</div>
<div id="emptyOrder" data-bind="visible: QuantitiesDisplay().length == 0">
No items are currently selected. Please choose from the adjacent pane.
</div>
<input id="submit" type="submit" value="Continue" class="btn btn-primary" data-bind="visible: QuantitiesDisplay().length > 0" style="display: none">
</div>
</div>
</div>
Ah I found it - need to use v-bind to dynamically set the name.
<div class="col-md-2">
#Html.SmartLabel("quantity", "Quantity", true, labelClass)
<input type="number" min="1" class="form-control" v-model="order[key].quantity" v-bind:name="'Quantities[' + key + '].Quantity' " />
</div>
https://medium.com/swlh/building-dynamic-forms-with-django-formsets-and-vue-js-f3c6e2dddd4a

RowVersion value is not getting binded in form data, mvc 5

I am trying to implement concurrency using EF6 in MVC 5.
#Html.HiddenFor(model => model.RowVersion)
On my edit page I am able to see the rowversion value in input type hidden.
<input id="RowVersion" name="RowVersion" type="hidden" value="AAAAAAAAF3M=">
But on $('form').serializeArray() I am not getting RowVersion data, on posting the form also I am getting null value of RowVersion property.
I had added RowVersion column in database table later and updated the edmx after that, I have set concurrency mode to fixed in the primary key column property my table in edmx.
Is there something extra that needs to be done for rowversion ?
Any help would be appreciated.
Update : adding html code
Jquery : I am checking it in console using : $('form').serializeArray()
html output from browser :
<form action="/Master/EditBookMaster/13" method="post"><input name="__RequestVerificationToken" type="hidden" value="Y04ae_LHgfG9Tw9hy2TcHIYbxk_EX_vykyphV7Sm9Wwiz6_f8PpGUY2SULyiZbCdJv4fgBloOlx_QRUz1FQNvXTZUorLt6_EvA9XLxcFsxbQqUlmY9XOCduHa__q1kdRQJpFAx4wOuj5tRu48TLh9A2" /> <div class="form-horizontal">
<h4>BookMaster</h4>
<hr />
<input data-val="true" data-val-number="The field BookMasterId must be a number." data-val-required="The BookMasterId field is required." id="BookMasterId" name="BookMasterId" type="hidden" value="13" />
<div class="form-group">
<label class="control-label col-md-2" for="BookName">BookName</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="BookName" name="BookName" type="text" value="C Programming" />
<span class="field-validation-valid text-danger" data-valmsg-for="BookName" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Count">Count</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-number="The field Count must be a number." data-val-required="The Count field is required." id="Count" name="Count" type="number" value="10" />
<span class="field-validation-valid text-danger" data-valmsg-for="Count" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Publisher">Publisher</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="Publisher" name="Publisher" type="text" value="Dennis-Ritchie" />
<span class="field-validation-valid text-danger" data-valmsg-for="Publisher" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Subject">Subject</label>
<div class="col-md-10">
<select class="form-control text-box single-line" data-val="true" data-val-number="The field SubjectId must be a number." data-val-required="The SubjectId field is required." id="SubjectId" name="SubjectId"><option value="1">Fiction</option>
<option value="2">Biography</option>
<option value="3">Science</option>
<option value="4">Research</option>
<option selected="selected" value="5">Software developement</option>
</select>
<span class="field-validation-valid text-danger" data-valmsg-for="SubjectId" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="AvailableCount">AvailableCount</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-number="The field AvailableCount must be a number." id="AvailableCount" name="AvailableCount" type="number" value="8" />
<span class="field-validation-valid text-danger" data-valmsg-for="AvailableCount" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
</div>
</form>
<div>
Back to List
</div>
<input id="RowVersion" name="RowVersion" type="hidden" value="AAAAAAAAF3M=" />
$(":input,:hidden").serialize();
code instead of
$('form').serializeArray()

Building Razor view using foreach and switch

I'm trying to recreate this in Razor with a foreach and switch and having difficulties. It seems that opening and closing DIVs cause issue in the Razor
code and it keeps saying either I don't have a closing } on the foreach (var questionBasicSection in Model.ToList()) or the </div> in the last case doesn't have a matching start tag.
I have tried using <text></text> tags around the <div class="row mt5"> <!-- #question.QUESTION --> tags but can't use it
around the ` tags.
Any ideas as to how to accomplish this?
Because the sections are different, it really has to be formatted this way...
Here's the desired HTML output:
<div class="row mt5"> <!-- Personnel -->
<div class="col-md-4">
<label class="control-label col-med-6" for="QuestionBasicSection.Questions[0].ANSWER_FLOAT">a. Personnel</label>
</div>
<div class="col-md-2">
</div>
<div class="col-md-3">
<input name="QuestionBasicSection.Questions[0].AnswerFloatString" class="form-control currencyMask amt" data-bind="textInput: sdto.DATE_INACTIVE"
data-pattern="currency" id="Personnel_Amount_Budgeted" type="text" value="" />
<input type="hidden" name="QuestionBasicSection.Questions[0].ANSWER_DATA_TYPE" id="QuestionBasicSection.Questions[0].ANSWER_DATA_TYPE" value="4" />
<input type="hidden" name="QuestionBasicSection.Questions[0].ID" id="QuestionBasicSection.Questions[0].ID" value="200" />
<input type="hidden" name="QuestionBasicSection.Questions[0].IS_MULTI_ANSWER" id="QuestionBasicSection.Questions[0].IS_MULTI_ANSWER" value="False" />
<input type="hidden" name="QuestionBasicSection.Questions[0].QUESTION_SECTION_ID" id="QuestionBasicSection.Questions[0].QUESTION_SECTION_ID" value="9" />
</div>
<div class="col-md-3">
<input name="QuestionBasicSection.Questions[1].AnswerFloatString" class="form-control percentMask" data-bind="textInput: sdto.DATE_INACTIVE"
data-pattern="percent" id="Personnel_Amount_Budgeted_Pct" type="text" value="" disabled />
<input type="hidden" name="QuestionBasicSection.Questions[1].ANSWER_DATA_TYPE" id="QuestionBasicSection.Questions[1].ANSWER_DATA_TYPE" value="4" />
<input type="hidden" name="QuestionBasicSection.Questions[1].ID" id="QuestionBasicSection.Questions[1].ID" value="201" />
<input type="hidden" name="QuestionBasicSection.Questions[1].IS_MULTI_ANSWER" id="QuestionBasicSection.Questions[1].IS_MULTI_ANSWER" value="False" />
<input type="hidden" name="QuestionBasicSection.Questions[1].QUESTION_SECTION_ID" id="QuestionBasicSection.Questions[1].QUESTION_SECTION_ID" value="9" />
</div>
</div>
<div class="row mt5"> <!-- Equipment -->
<div class="col-md-3">
<input name="QuestionBasicSection.Questions[2].AnswerFloatString" class="form-control currencyMask amt" data-bind="textInput: sdto.DATE_INACTIVE"
data-pattern="currency" id="Fringe_Benefits_Budgeted" type="text" value="" />
<input type="hidden" name="QuestionBasicSection.Questions[2].ANSWER_DATA_TYPE" id="QuestionBasicSection.Questions[2].ANSWER_DATA_TYPE" value="4" />
<input type="hidden" name="QuestionBasicSection.Questions[2].ID" id="QuestionBasicSection.Questions[2].ID" value="202" />
<input type="hidden" name="QuestionBasicSection.Questions[2].IS_MULTI_ANSWER" id="QuestionBasicSection.Questions[2].IS_MULTI_ANSWER" value="False" />
<input type="hidden" name="QuestionBasicSection.Questions[2].QUESTION_SECTION_ID" id="QuestionBasicSection.Questions[2].QUESTION_SECTION_ID" value="9" />
</div>
<div class="col-md-2">
<input name="QuestionBasicSection.Questions[3].AnswerFloatString" class="form-control percentMask_2" data-bind="textInput: sdto.DATE_INACTIVE"
data-pattern="percent" id="Fringe_Benefits_Pct" type="text" value="" disabled />
<input type="hidden" name="QuestionBasicSection.Questions[3].ANSWER_DATA_TYPE" id="QuestionBasicSection.Questions[3].ANSWER_DATA_TYPE" value="4" />
<input type="hidden" name="QuestionBasicSection.Questions[3].ID" id="QuestionBasicSection.Questions[3].ID" value="203" />
<input type="hidden" name="QuestionBasicSection.Questions[3].IS_MULTI_ANSWER" id="QuestionBasicSection.Questions[3].IS_MULTI_ANSWER" value="False" />
<input type="hidden" name="QuestionBasicSection.Questions[3].QUESTION_SECTION_ID" id="QuestionBasicSection.Questions[3].QUESTION_SECTION_ID" value="9" />
</div>
<div class="col-md-3">
<input name="QuestionBasicSection.Questions[4].AnswerFloatString" class="form-control percentMask" data-bind="textInput: sdto.DATE_INACTIVE"
data-pattern="currency" id="Fringe_Benefits_Budgeted_Pct" type="text" value="" disabled />
<input type="hidden" name="QuestionBasicSection.Questions[4].ANSWER_DATA_TYPE" id="QuestionBasicSection.Questions[4].ANSWER_DATA_TYPE" value="4" />
<input type="hidden" name="QuestionBasicSection.Questions[4].ID" id="QuestionBasicSection.Questions[4].ID" value="204" />
<input type="hidden" name="QuestionBasicSection.Questions[4].IS_MULTI_ANSWER" id="QuestionBasicSection.Questions[4].IS_MULTI_ANSWER" value="False" />
<input type="hidden" name="QuestionBasicSection.Questions[4].QUESTION_SECTION_ID" id="QuestionBasicSection.Questions[4].QUESTION_SECTION_ID" value="9" />
</div>
</div>
<div class="row mt5"> <!-- Travel-->
<div class="col-md-2">
</div>
<div class="col-md-3">
<input name="QuestionBasicSection.Questions[5].AnswerFloatString" class="form-control currencyMask amt" data-bind="textInput: sdto.DATE_INACTIVE"
data-pattern="currency" id="Travel_Budgeted" type="text" value="" />
<input type="hidden" name="QuestionBasicSection.Questions[5].ANSWER_DATA_TYPE" id="QuestionBasicSection.Questions[5].ANSWER_DATA_TYPE" value="4" />
<input type="hidden" name="QuestionBasicSection.Questions[5].ID" id="QuestionBasicSection.Questions[5].ID" value="205" />
<input type="hidden" name="QuestionBasicSection.Questions[5].IS_MULTI_ANSWER" id="QuestionBasicSection.Questions[5].IS_MULTI_ANSWER" value="False" />
<input type="hidden" name="QuestionBasicSection.Questions[5].QUESTION_SECTION_ID" id="QuestionBasicSection.Questions[5].QUESTION_SECTION_ID" value="9" />
</div>
<div class="col-md-3">
<input name="QuestionBasicSection.Questions[6].AnswerFloatString" class="form-control percentMask" data-bind="textInput: sdto.DATE_INACTIVE"
data-pattern="percent" id="Travel_Budgeted_Pct" type="text" value="" disabled />
<input type="hidden" name="QuestionBasicSection.Questions[6].ANSWER_DATA_TYPE" id="QuestionBasicSection.Questions[6].ANSWER_DATA_TYPE" value="4" />
<input type="hidden" name="QuestionBasicSection.Questions[6].ID" id="QuestionBasicSection.Questions[6].ID" value="206" />
<input type="hidden" name="QuestionBasicSection.Questions[6].IS_MULTI_ANSWER" id="QuestionBasicSection.Questions[6].IS_MULTI_ANSWER" value="False" />
<input type="hidden" name="QuestionBasicSection.Questions[6].QUESTION_SECTION_ID" id="QuestionBasicSection.Questions[6].QUESTION_SECTION_ID" value="9" />
</div>
</div>
Here's the Razor code:
#foreach (var questionBasicSection in Model.ToList())
{
#* doing some other stuff here *#
foreach (var question in questionBasicSection.Questions)
{
var QuestionTitle = (question.DISPLAY_NAME != null?question.DISPLAY_NAME + " " + question.QUESTION: question.QUESTION);
switch (question.QuestionIndex)
{
case 200:
<text><div class="row mt5"> <!-- #question.QUESTION --></text>
<div class="col-md-4">
<label class="control-label col-med-6" for="QuestionBasicSection.Questions[0].ANSWER_FLOAT">#QuestionTitle/label>
</div>
<div class="col-md-2">
</div>
<div class="col-md-3">
#Html.TextBoxFor(q => question.AnswerFloatString, (object)new { disabled = "disabled" } : new { id=question.QUESTION.Replace(' ', '_').Replace(".", String.Empty).Replace("=", String.Empty),
name = "QuestionBasicSection.Questions[" + question.Index + "].AnswerFloatString", #class = "form-control floatwidth currencyMask amt",
data_bind = "textInput: sdto.DATE_INACTIVE", data_pattern = question.FORMAT_VALIDATION })
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].ANSWER_DATA_TYPE" id="QuestionBasicSection.Questions[#question.Index].ANSWER_DATA_TYPE" value="#question.ANSWER_DATA_TYPE" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].ID" id="QuestionBasicSection.Questions[#question.Index].ID" value="#question.ID" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].IS_MULTI_ANSWER" id="QuestionBasicSection.Questions[#question.Index].IS_MULTI_ANSWER" value="#question.IS_MULTI_ANSWER.ToString()" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].QUESTION_SECTION_ID" id="QuestionBasicSection.Questions[#question.Index].QUESTION_SECTION_ID" value="#question.QUESTION_SECTION_ID.ToString()" />
</div>
break;
case 201:
<div class="col-md-3">
#Html.TextBoxFor(q => question.AnswerFloatString, (object)new { disabled = "disabled" } : new { id=question.QUESTION.Replace(' ', '_').Replace(".", String.Empty).Replace("=", String.Empty),
name = "QuestionBasicSection.Questions[" + question.Index + "].AnswerFloatString", #class = "form-control floatwidth percentMask",
data_bind = "textInput: sdto.DATE_INACTIVE", data_pattern = question.FORMAT_VALIDATION })
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].ANSWER_DATA_TYPE" id="QuestionBasicSection.Questions[#question.Index].ANSWER_DATA_TYPE" value="#question.ANSWER_DATA_TYPE" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].ID" id="QuestionBasicSection.Questions[#question.Index].ID" value="#question.ID" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].IS_MULTI_ANSWER" id="QuestionBasicSection.Questions[#question.Index].IS_MULTI_ANSWER" value="#question.IS_MULTI_ANSWER.ToString()" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].QUESTION_SECTION_ID" id="QuestionBasicSection.Questions[#question.Index].QUESTION_SECTION_ID" value="#question.QUESTION_SECTION_ID.ToString()" />
</div>
</div>
break;
case 202:
<text><div class="row mt5"> <!-- #question.QUESTION --></text>
<div class="col-md-4">
<label class="control-label col-med-6" for="QuestionBasicSection.Questions[0].ANSWER_FLOAT">#QuestionTitle/label>
</div>
<div class="col-md-3">
#Html.TextBoxFor(q => question.AnswerFloatString, (object)new { disabled = "disabled" } : new { id=question.QUESTION.Replace(' ', '_').Replace(".", String.Empty).Replace("=", String.Empty),
name = "QuestionBasicSection.Questions[" + question.Index + "].AnswerFloatString", #class = "form-control floatwidth currencyMask amt",
data_bind = "textInput: sdto.DATE_INACTIVE", data_pattern = question.FORMAT_VALIDATION })
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].ANSWER_DATA_TYPE" id="QuestionBasicSection.Questions[#question.Index].ANSWER_DATA_TYPE" value="#question.ANSWER_DATA_TYPE" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].ID" id="QuestionBasicSection.Questions[#question.Index].ID" value="#question.ID" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].IS_MULTI_ANSWER" id="QuestionBasicSection.Questions[#question.Index].IS_MULTI_ANSWER" value="#question.IS_MULTI_ANSWER.ToString()" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].QUESTION_SECTION_ID" id="QuestionBasicSection.Questions[#question.Index].QUESTION_SECTION_ID" value="#question.QUESTION_SECTION_ID.ToString()" />
</div>
break;
case 203:
<div class="col-md-2">
#Html.TextBoxFor(q => question.AnswerFloatString, (object)new { disabled = "disabled" } : new { id=question.QUESTION.Replace(' ', '_').Replace(".", String.Empty).Replace("=", String.Empty),
name = "QuestionBasicSection.Questions[" + question.Index + "].AnswerFloatString", #class = "form-control floatwidth percentMask",
data_bind = "textInput: sdto.DATE_INACTIVE", data_pattern = question.FORMAT_VALIDATION })
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].ANSWER_DATA_TYPE" id="QuestionBasicSection.Questions[#question.Index].ANSWER_DATA_TYPE" value="#question.ANSWER_DATA_TYPE" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].ID" id="QuestionBasicSection.Questions[#question.Index].ID" value="#question.ID" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].IS_MULTI_ANSWER" id="QuestionBasicSection.Questions[#question.Index].IS_MULTI_ANSWER" value="#question.IS_MULTI_ANSWER.ToString()" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].QUESTION_SECTION_ID" id="QuestionBasicSection.Questions[#question.Index].QUESTION_SECTION_ID" value="#question.QUESTION_SECTION_ID.ToString()" />
</div>
break;
case 204:
<div class="col-md-3">
#Html.TextBoxFor(q => question.AnswerFloatString, (object)new { disabled = "disabled" } : new { id=question.QUESTION.Replace(' ', '_').Replace(".", String.Empty).Replace("=", String.Empty),
name = "QuestionBasicSection.Questions[" + question.Index + "].AnswerFloatString", #class = "form-control floatwidth percentMask",
data_bind = "textInput: sdto.DATE_INACTIVE", data_pattern = question.FORMAT_VALIDATION })
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].ANSWER_DATA_TYPE" id="QuestionBasicSection.Questions[#question.Index].ANSWER_DATA_TYPE" value="#question.ANSWER_DATA_TYPE" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].ID" id="QuestionBasicSection.Questions[#question.Index].ID" value="#question.ID" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].IS_MULTI_ANSWER" id="QuestionBasicSection.Questions[#question.Index].IS_MULTI_ANSWER" value="#question.IS_MULTI_ANSWER.ToString()" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].QUESTION_SECTION_ID" id="QuestionBasicSection.Questions[#question.Index].QUESTION_SECTION_ID" value="#question.QUESTION_SECTION_ID.ToString()" />
</div>
</div>
break;
case 205:
<text><div class="row mt5"> <!-- #question.QUESTION --></text>
<div class="col-md-4">
<label class="control-label col-med-6" for="QuestionBasicSection.Questions[0].ANSWER_FLOAT">#QuestionTitle/label>
</div>
<div class="col-md-2">
</div>
<div class="col-md-3">
#Html.TextBoxFor(q => question.AnswerFloatString, (object)new { disabled = "disabled" } : new { id=question.QUESTION.Replace(' ', '_').Replace(".", String.Empty).Replace("=", String.Empty),
name = "QuestionBasicSection.Questions[" + question.Index + "].AnswerFloatString", #class = "form-control floatwidth currencyMask amt",
data_bind = "textInput: sdto.DATE_INACTIVE", data_pattern = question.FORMAT_VALIDATION })
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].ANSWER_DATA_TYPE" id="QuestionBasicSection.Questions[#question.Index].ANSWER_DATA_TYPE" value="#question.ANSWER_DATA_TYPE" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].ID" id="QuestionBasicSection.Questions[#question.Index].ID" value="#question.ID" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].IS_MULTI_ANSWER" id="QuestionBasicSection.Questions[#question.Index].IS_MULTI_ANSWER" value="#question.IS_MULTI_ANSWER.ToString()" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].QUESTION_SECTION_ID" id="QuestionBasicSection.Questions[#question.Index].QUESTION_SECTION_ID" value="#question.QUESTION_SECTION_ID.ToString()" />
</div>
break;
case 206:
<div class="col-md-3">
#Html.TextBoxFor(q => question.AnswerFloatString, (object)new { disabled = "disabled" } : new { id=question.QUESTION.Replace(' ', '_').Replace(".", String.Empty).Replace("=", String.Empty),
name = "QuestionBasicSection.Questions[" + question.Index + "].AnswerFloatString", #class = "form-control floatwidth percentMask",
data_bind = "textInput: sdto.DATE_INACTIVE", data_pattern = question.FORMAT_VALIDATION })
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].ANSWER_DATA_TYPE" id="QuestionBasicSection.Questions[#question.Index].ANSWER_DATA_TYPE" value="#question.ANSWER_DATA_TYPE" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].ID" id="QuestionBasicSection.Questions[#question.Index].ID" value="#question.ID" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].IS_MULTI_ANSWER" id="QuestionBasicSection.Questions[#question.Index].IS_MULTI_ANSWER" value="#question.IS_MULTI_ANSWER.ToString()" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].QUESTION_SECTION_ID" id="QuestionBasicSection.Questions[#question.Index].QUESTION_SECTION_ID" value="#question.QUESTION_SECTION_ID.ToString()" />
</div>
</div>
break;
}
}
}
Easier to show you in code:
#foreach (var questionBasicSection in Model.ToList())
{
// New section start
<div class="row mt5"><span>#question.QUESTION</span>
#* doing some other stuff here *#
foreach (var question in questionBasicSection.Questions)
{
var QuestionTitle = (question.DISPLAY_NAME != null?question.DISPLAY_NAME + " " + question.QUESTION: question.QUESTION);
switch (question.QuestionIndex)
{
case 200:
<div class="col-md-4">
<label class="control-label col-med-6" for="QuestionBasicSection.Questions[0].ANSWER_FLOAT">#QuestionTitle/label>
</div>
<div class="col-md-2">
</div>
<div class="col-md-3">
#Html.TextBoxFor(q => question.AnswerFloatString, (object)new { disabled = "disabled" } : new { id=question.QUESTION.Replace(' ', '_').Replace(".", String.Empty).Replace("=", String.Empty),
name = "QuestionBasicSection.Questions[" + question.Index + "].AnswerFloatString", #class = "form-control floatwidth currencyMask amt",
data_bind = "textInput: sdto.DATE_INACTIVE", data_pattern = question.FORMAT_VALIDATION })
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].ANSWER_DATA_TYPE" id="QuestionBasicSection.Questions[#question.Index].ANSWER_DATA_TYPE" value="#question.ANSWER_DATA_TYPE" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].ID" id="QuestionBasicSection.Questions[#question.Index].ID" value="#question.ID" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].IS_MULTI_ANSWER" id="QuestionBasicSection.Questions[#question.Index].IS_MULTI_ANSWER" value="#question.IS_MULTI_ANSWER.ToString()" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].QUESTION_SECTION_ID" id="QuestionBasicSection.Questions[#question.Index].QUESTION_SECTION_ID" value="#question.QUESTION_SECTION_ID.ToString()" />
</div>
break;
case 201:
<div class="col-md-3">
#Html.TextBoxFor(q => question.AnswerFloatString, (object)new { disabled = "disabled" } : new { id=question.QUESTION.Replace(' ', '_').Replace(".", String.Empty).Replace("=", String.Empty),
name = "QuestionBasicSection.Questions[" + question.Index + "].AnswerFloatString", #class = "form-control floatwidth percentMask",
data_bind = "textInput: sdto.DATE_INACTIVE", data_pattern = question.FORMAT_VALIDATION })
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].ANSWER_DATA_TYPE" id="QuestionBasicSection.Questions[#question.Index].ANSWER_DATA_TYPE" value="#question.ANSWER_DATA_TYPE" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].ID" id="QuestionBasicSection.Questions[#question.Index].ID" value="#question.ID" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].IS_MULTI_ANSWER" id="QuestionBasicSection.Questions[#question.Index].IS_MULTI_ANSWER" value="#question.IS_MULTI_ANSWER.ToString()" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].QUESTION_SECTION_ID" id="QuestionBasicSection.Questions[#question.Index].QUESTION_SECTION_ID" value="#question.QUESTION_SECTION_ID.ToString()" />
</div>
break;
case 202:
<div class="col-md-4">
<label class="control-label col-med-6" for="QuestionBasicSection.Questions[0].ANSWER_FLOAT">#QuestionTitle/label>
</div>
<div class="col-md-3">
#Html.TextBoxFor(q => question.AnswerFloatString, (object)new { disabled = "disabled" } : new { id=question.QUESTION.Replace(' ', '_').Replace(".", String.Empty).Replace("=", String.Empty),
name = "QuestionBasicSection.Questions[" + question.Index + "].AnswerFloatString", #class = "form-control floatwidth currencyMask amt",
data_bind = "textInput: sdto.DATE_INACTIVE", data_pattern = question.FORMAT_VALIDATION })
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].ANSWER_DATA_TYPE" id="QuestionBasicSection.Questions[#question.Index].ANSWER_DATA_TYPE" value="#question.ANSWER_DATA_TYPE" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].ID" id="QuestionBasicSection.Questions[#question.Index].ID" value="#question.ID" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].IS_MULTI_ANSWER" id="QuestionBasicSection.Questions[#question.Index].IS_MULTI_ANSWER" value="#question.IS_MULTI_ANSWER.ToString()" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].QUESTION_SECTION_ID" id="QuestionBasicSection.Questions[#question.Index].QUESTION_SECTION_ID" value="#question.QUESTION_SECTION_ID.ToString()" />
</div>
break;
case 203:
<div class="col-md-2">
#Html.TextBoxFor(q => question.AnswerFloatString, (object)new { disabled = "disabled" } : new { id=question.QUESTION.Replace(' ', '_').Replace(".", String.Empty).Replace("=", String.Empty),
name = "QuestionBasicSection.Questions[" + question.Index + "].AnswerFloatString", #class = "form-control floatwidth percentMask",
data_bind = "textInput: sdto.DATE_INACTIVE", data_pattern = question.FORMAT_VALIDATION })
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].ANSWER_DATA_TYPE" id="QuestionBasicSection.Questions[#question.Index].ANSWER_DATA_TYPE" value="#question.ANSWER_DATA_TYPE" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].ID" id="QuestionBasicSection.Questions[#question.Index].ID" value="#question.ID" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].IS_MULTI_ANSWER" id="QuestionBasicSection.Questions[#question.Index].IS_MULTI_ANSWER" value="#question.IS_MULTI_ANSWER.ToString()" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].QUESTION_SECTION_ID" id="QuestionBasicSection.Questions[#question.Index].QUESTION_SECTION_ID" value="#question.QUESTION_SECTION_ID.ToString()" />
</div>
break;
case 204:
<div class="col-md-3">
#Html.TextBoxFor(q => question.AnswerFloatString, (object)new { disabled = "disabled" } : new { id=question.QUESTION.Replace(' ', '_').Replace(".", String.Empty).Replace("=", String.Empty),
name = "QuestionBasicSection.Questions[" + question.Index + "].AnswerFloatString", #class = "form-control floatwidth percentMask",
data_bind = "textInput: sdto.DATE_INACTIVE", data_pattern = question.FORMAT_VALIDATION })
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].ANSWER_DATA_TYPE" id="QuestionBasicSection.Questions[#question.Index].ANSWER_DATA_TYPE" value="#question.ANSWER_DATA_TYPE" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].ID" id="QuestionBasicSection.Questions[#question.Index].ID" value="#question.ID" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].IS_MULTI_ANSWER" id="QuestionBasicSection.Questions[#question.Index].IS_MULTI_ANSWER" value="#question.IS_MULTI_ANSWER.ToString()" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].QUESTION_SECTION_ID" id="QuestionBasicSection.Questions[#question.Index].QUESTION_SECTION_ID" value="#question.QUESTION_SECTION_ID.ToString()" />
</div>
break;
case 205:
<div class="col-md-4">
<label class="control-label col-med-6" for="QuestionBasicSection.Questions[0].ANSWER_FLOAT">#QuestionTitle/label>
</div>
<div class="col-md-2">
</div>
<div class="col-md-3">
#Html.TextBoxFor(q => question.AnswerFloatString, (object)new { disabled = "disabled" } : new { id=question.QUESTION.Replace(' ', '_').Replace(".", String.Empty).Replace("=", String.Empty),
name = "QuestionBasicSection.Questions[" + question.Index + "].AnswerFloatString", #class = "form-control floatwidth currencyMask amt",
data_bind = "textInput: sdto.DATE_INACTIVE", data_pattern = question.FORMAT_VALIDATION })
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].ANSWER_DATA_TYPE" id="QuestionBasicSection.Questions[#question.Index].ANSWER_DATA_TYPE" value="#question.ANSWER_DATA_TYPE" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].ID" id="QuestionBasicSection.Questions[#question.Index].ID" value="#question.ID" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].IS_MULTI_ANSWER" id="QuestionBasicSection.Questions[#question.Index].IS_MULTI_ANSWER" value="#question.IS_MULTI_ANSWER.ToString()" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].QUESTION_SECTION_ID" id="QuestionBasicSection.Questions[#question.Index].QUESTION_SECTION_ID" value="#question.QUESTION_SECTION_ID.ToString()" />
</div>
break;
case 206:
<div class="col-md-3">
#Html.TextBoxFor(q => question.AnswerFloatString, (object)new { disabled = "disabled" } : new { id=question.QUESTION.Replace(' ', '_').Replace(".", String.Empty).Replace("=", String.Empty),
name = "QuestionBasicSection.Questions[" + question.Index + "].AnswerFloatString", #class = "form-control floatwidth percentMask",
data_bind = "textInput: sdto.DATE_INACTIVE", data_pattern = question.FORMAT_VALIDATION })
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].ANSWER_DATA_TYPE" id="QuestionBasicSection.Questions[#question.Index].ANSWER_DATA_TYPE" value="#question.ANSWER_DATA_TYPE" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].ID" id="QuestionBasicSection.Questions[#question.Index].ID" value="#question.ID" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].IS_MULTI_ANSWER" id="QuestionBasicSection.Questions[#question.Index].IS_MULTI_ANSWER" value="#question.IS_MULTI_ANSWER.ToString()" />
<input type="hidden" name="QuestionBasicSection.Questions[#question.Index].QUESTION_SECTION_ID" id="QuestionBasicSection.Questions[#question.Index].QUESTION_SECTION_ID" value="#question.QUESTION_SECTION_ID.ToString()" />
</div>
break;
} // end of questions for section
} //end of section
// Section end
</div>
}
You can use the #: syntax for each line of partial HTML code:
#if (foo)
{
#:</div>
}
However, I've still had issues with this when autoformatting on paste is enabled. As Razor re-evaluates the entire view and more often than not borks everything with improper indentation and not breaking lines like it should.
Probably your safest bet is to use Html.Raw:
#if (foo)
{
#Html.Raw("</div>")
}
Now, it's not even HTML code anymore. It's just a string so Razor will ignore it entirely.

MVC view with two forms, why are both rendering to same action?

#using (Html.BeginForm("Unassign", "Terminals_DataGroups"))
{
#Html.HiddenFor(m => m.DeviceId)
#Html.HiddenFor(m => m.DataGroupId)
<input type="submit" value="Remove group from device" #(string.IsNullOrEmpty(Model.DataGroupName) ? "disabled=\"disabled\"" : "") />
}
#using (Html.BeginForm("Assign", "Terminals_DataGroups"))
{
#Html.HiddenFor(m => m.DeviceId)
<div class="editor-label">
#Html.LabelFor(model => model.DataGroups)
</div>
<div class="editor-field">
#Html.DropDownListFor(model => model.DataGroupsSelectedItem, new SelectList(Model.DataGroups, "Value", "Text"))
#Html.ValidationMessageFor(model => model.DataGroupsSelectedItem)
</div>
<input type="submit" value="Assign Data Group" />
}
Yet the HTML renders as:
<form action="/Terminals_DataGroups/Assign" method="post">
<input data-val="true"
data-val-number="The field DeviceId must be a number."
data-val-required="The DeviceId field is required."
id="DeviceId"
name="DeviceId"
type="hidden"
value="15" />
<input data-val="true"
data-val-number="The field DataGroupId must be a number."
id="DataGroupId"
name="DataGroupId"
type="hidden"
value="1" />
<input type="submit" value="Remove group from device" />
</form>
<form action="/Terminals_DataGroups/Assign" method="post">
<input data-val="true"
data-val-number="The field DeviceId must be a number."
data-val-required="The DeviceId field is required."
id="DeviceId"
name="DeviceId"
type="hidden"
value="15" />
<div class="editor-label">
<label for="DataGroups">Data groups</label>
</div>
<div class="editor-field">
<select data-val="true"
data-val-number="The field DataGroupsSelectedItem must be a number."
id="DataGroupsSelectedItem"
name="DataGroupsSelectedItem">
<option value="2">DataGroup2</option>
<option value="3">DataGroup3</option>
<option value="5">New group</option>
</select>
<span class="field-validation-valid"
data-valmsg-for="DataGroupsSelectedItem"
data-valmsg-replace="true"></span>
</div>
<input type="submit" value="Assign Data Group" />
</form>
you must added ID tag and value
sory my english ;)

Knockout js string format index in template

I am currently working on some Knockout js templating stuff. My requirement is I need to set the name of a field (input) with a combination of string and the index value of the row.
For example "xxx3".
I tried two options.
'xxx' + ko.utils.arrayIndexOf(viewModel.mycollection, $data)
and
'xxx' + $index
The first option always gives '-1' for my index value and the second option doesnt work
becasue seems like I can only use the $index value without any string concatenation.
Could someone let me know if I can concatenate a string value to $index value in knockout so that I can set that to the name property of an input field.
The final result I want should be like this.
<input class="text-box single-line" data-val="true"
data-val-required="The XXX field is required." id="XXX" type="text" name="XXX3">
Here is how my template looks like.
<table id ="editorRows" class="table">
<tbody data-bind='template: {name: "rowTemplate", foreach: Rules }'></tbody>
</table>
<script id="rowTemplate" type="text/html">
<tr data-bind="attr: { id: RuleKey }">
<td>
<div class="editor-field">
<input class="text-box single-line" data-val="true" data-val-required="The Name field is required." id="Name" type="text" data-bind="value: Name, attr: {name : 'Rules[' + $index + '].Name'}" />
<span class="field-validation-valid" data-bind="attr : { 'data-valmsg-for': 'Rules[' + $index + '].Name'}" data-valmsg-replace="true"></span>
</div>
</td>
</tr>
</script>
$index is an observable, so you would need to call it to retrieve the value. So assuming you are trying to set the values of the attributes to literally Rule[0].Name, you'd do this:
<input class="text-box single-line" data-val="true" data-val-required="The Name field is required." id="Name" type="text"
data-bind="value: Name, attr: {name : 'Rules[' + $index() + '].Name'}" />
<span class="field-validation-valid" data-valmsg-replace="true"
data-bind="attr : { 'data-valmsg-for': 'Rules[' + $index() + '].Name'}"></span>

Resources