Как привязать динамически создающиеся элементы формы к Dictionary?

Question

[Вадим]

Доброго времени суток!
Имеется проект ASP.NET MVC 5. Есть ViewModel, в котором содержится:

public Dictionary<string, string> AdditionalFields { get; set; }

В представлении имеется таблица, строки которой можно добавлять или удалять, кликая по соответствующим кнопкам. Добавление и удаление строк выполняют JS-функции:

Код JavaScript

function AddRow() {
			var table = document.getElementById("formTable");

			var fieldName = prompt("Enter field name", "Field name");
			if (fieldName == null) return;

			var row = table.insertRow(-1);
			var name = row.insertCell(0);
			var describtion = row.insertCell(1);
			var action = row.insertCell(2);

			name.innerHTML = "<label>" + fieldName + "</label>";
			describtion.innerHTML = "<input class=\"form-control\" type=\"text\" name=\"" + fieldName + "\" />";
			action.innerHTML = "<a href=\"#\" onclick=\"DeleteRow(this)\">Delete</a>";
		}

		function DeleteRow(element) {
			var rowId = element.parentNode.parentNode.rowIndex;
			var table = document.getElementById("formTable");
			table.deleteRow(rowId);
		}

Каждая новая строка таблицы содержит в себе Label(Ключ) и TextBox(Значение), который я бы хотел бы связать со словарем в моей модели. Вроде как можно создать модель и передать в представление из контроллера, но тогда словарь будет пуст... Как можно привязать новые поля ввода с пустым словарем так, чтобы он автоматически заполнялся при добавлении новой строки таблицы?

Answer 1

[eRKa]

При данном раскладе - никак. Вы учтите, что разоровская разметка во вьюшке выполняется на стороне сервера, она отрабатывает во время рендеринга html разметки на основе кода cshtml, а js код выполняется на стороне клиента и он ничего не знает о Вашем dictionary.

Я вижу, как вариант решения, Вашу таблицу выводить как частичное представление и при каждом добавлении/удалении строки делать запрос на сервер с параметрами новой строки и он будет возвращать новую таблицу, ну и соответственно dictionary будет обновляться.

Второй вариант, при добавлении строки делать аякс запрос на сервер с новыми параметрами для словаря, а возвращаться будет частичное представление, где будет код, подобие этого

@model  Dictionary<string, string> AdditionalFields

<script>
	var additionalFields = [];
	@foreach(var field in AdditionalFields)
	{
		@:additionalFields.push({ '@field.Key', '@field.Value' })
	}	
</script>

Comments

[Вадим]

Спасибо за ответ!
Пытался сделать через частичное представление, но что-то не пошло... Передаю модель в метод контроллера, там добавляю строку, возвращаю её в частичное представление и всё работает. Но если захочу добавить ещё одну строку, то ничего не получится, потому что модель главной страницы почему-то не изменилась, когда я добавлял в нее новые строки...
Сделал немного по-другому, динамически создавал текстовые поля с именами AdditionalFields[0].Name и AdditionalFields[0].Value. Но и там свои косяки получились... Но хотя бы немного работает)