JQuery UI диалог вытягивает неправильный идентификатор в динамически генерируемый список в asp.net MVC
У меня есть IEnumerable<MyModel> динамически генерируемый список, основанный на выбранных пользователях, отображаемых в JQueryUI Accordian. Эта часть отлично работает. То, что я пытаюсь сделать, это создать доказательство концепции для JQueryUI Dialog, где я нажимаю на текстовое поле, и появляется диалоговое окно, позволяющее мне вводить данные. Потому что мне нужно, очевидно, нужно уникальное idи содержимое динамическое, я использовал C# для создания переменных на основе конкретного экземпляра передаваемой модели. Это сработало в некоторой степени; появляется диалоговое окно, когда я нажимаю на текстовое поле, но у меня были проблемы с позиционированием, когда я что-то вводил (<label for="Dmg">Dmg @(Model.Name)</label>) отслеживать, из какого экземпляра тянуло диалоговое окно.
Проблема, которую я вижу сейчас, заключается в том, что если передается 2 или более объектов, ссылки на диалог (в @Model.Name) отображаются только последними.
То же имя (что бы ни было последним в списке) появляется в этом @(Model.Name) независимо от того, какое текстовое поле я нажимаю. Последний из перечисленных также правильно расположен, а остальные отображаются в верхнем левом углу документа. Вот весь мой взгляд с JS:
@model DnDTracker.Models.Character
@{
ViewBag.Title = "Details";
}
@{ string hptxtboxName = "hptextbox" + Model.Name;}
@{ string dialogName = "dialogForm" + Model.Name;}
@{ string formName = "form" + Model.Name;}
<dl class="dl-horizontal">
<dt>
@Html.DisplayNameFor(model => model.HitPoints)
</dt>
<dd>
@Html.DisplayFor(model => model.HitPoints)
@Html.TextBoxFor(x=>x.HitPoints,new {id=@hptxtboxName})
</dd>
<dt>
@Html.DisplayNameFor(model => model.AC)
</dt>
<dd>
@Html.DisplayFor(model => model.AC) @Html.EditorFor(x => x.AC)
</dd>
</dl>
@Html.Partial("_HitDiceView", Model.HitDiceList)
@Html.Partial("_SpellSlotsView", Model.SpellSlotList)
@Html.Partial("_AttacksView", Model.AttackList)
<div id=" @(dialogName)" title="+ Dmg/- Healing" class="form-group">
<form id="@(formName)">
<fieldset>
<label for="Dmg">Dmg @(Model.Name)</label>
<input type="text" name="Hp" id="HP@(Model.Name)" value="0"
class="text ui-widget-content ui-corner-all">
<button type="submit" form="@(formName)" class="btn btn-
default">Add</button>
<!-- Allow form submission with keyboard without duplicating the
dialog button -->
<input type="submit" tabindex="-1" style="position:absolute;
top:-1000px">
</fieldset>
</form>
</div>
<script type="text/javascript">
$(function () {
$("#@(hptxtboxName)").click(function () {
dialog.dialog("open");
})
});
dialog = $("#@(dialogName)").dialog({
autoOpen: false,
height: 100,
width: 150,
modal: true,
position: { my: "left top", at: "left bottom", of:
"#@(hptxtboxName)",collision:"none" }
});
</script>
Я не очень хорош в инструментах для разработчиков браузеров, поэтому я не смог найти настоящий HTML-диалог диалога, но я убедился, что текстовое поле и javascript, похоже, используют правильные динамически сгенерированные id"S. И, выполняя быстрый поиск, я вижу отдельный html для каждого div диалогового окна Models и JS для его решения.
Что мне не хватает или я могу устранить неполадки?
ОБНОВЛЕНИЕ: Вот полный дамп сгенерированного HTML, с 2 объектами в списке.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>greedyLumpSoftware</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<link href="/Content/themes/base/css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="/Scripts/jquery-1.12.4.js"></script>
<script src="/Scripts/jquery-ui-1.12.1.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/Home">DnDTracker</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">Character List</a></li>
<li><a href="/Home/About">About</a></li>
<li><a href="/Home/Contact">Contact</a></li>
</ul>
<form action="/Account/LogOff" class="navbar-right" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="hDY3sKz4NUWdGCYGm7u08wTLkdN7BM37ClIifwWco7SLSW_aUnq8L4rLgaU3mpAikjqMGD8rIpv1Gnwv7BRWwrnpOw4bsjGi9glLqDzXqvhXrQn7X9IPEbjmbguJs_nnMcftQnQDgCl86BMG_bvl2w2" /> <ul class="nav navbar-nav navbar-right">
<li>
<a href="/Manage" title="Manage">Hello [email protected]!</a>
</li>
<li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
</ul>
</form>
</div>
</div>
</div>
<div class="container body-content">
<h2>Combat</h2>
<div id="accordion">
<h3>
Signum
</h3>
<div>
<p>
<dl class="dl-horizontal">
<dt>
HP
</dt>
<dd>
56 <input data-val="true" data-val-number="The field HP must be a number." data-val-required="The HP field is required." id="hptextboxSignum" name="HitPoints" type="text" value="56" />
</dd>
<dt>
AC
</dt>
<dd>
17 <input class="text-box single-line" data-val="true" data-val-number="The field AC must be a number." data-val-required="The AC field is required." id="AC" name="AC" type="number" value="17" />
</dd>
</dl>
<div>
<p>
<div class="tableinner">
<div class="rowinner">
<div class="cell single">
<table>
<tr>
<th class="bold left3">
Class
</th>
<th class="middle3">
Hit Dice
</th>
<th class="right3">
Remaining
</th>
</tr>
<tr>
<td class="left3">
Paladin
</td>
<td class="middle3">
5d10
</td>
<td class="right3">
5
</td>
</tr>
<tr>
<td class="left3">
Warlock
</td>
<td class="middle3">
1d8
</td>
<td class="right3">
1
</td>
</tr>
</table>
</div>
</div>
</div>
</p>
</div>
<div>
<p>
<div class="tableinner">
<div class="rowinner">
<div class="cell single">
<table>
<tr>
<th class="bold left3">
Class
</th>
<th class="middle3">
Spell Level
</th>
<th class="right3">
Number of Slots
</th>
</tr>
<tr>
<td class="left3">
Paladin
</td>
<td class="middle3">
1
</td>
<td class="right3">
4
</td>
</tr>
<tr>
<td class="left3">
Paladin
</td>
<td class="middle3">
2
</td>
<td class="right3">
2
</td>
</tr>
</table>
</div>
</div>
</div>
</p>
</div>
<div>
<p>
<div class="tableinner">
<div class="rowinner">
<div class="cell single">
<table>
<tr>
<th class="bold left3">
Name
</th>
<th class="middle3">
Attack Bonus
</th>
<th class="right3">
Damage
</th>
</tr>
<tr>
<td class="left3">
Glaive
</td>
<td class="middle3">
8
</td>
<td class="right3">
1d10+5
</td>
</tr>
<tr>
<td class="left3">
Eldritch Blast
</td>
<td class="middle3">
7
</td>
<td class="right3">
1d10+0
</td>
</tr>
</table>
</div>
</div>
</div>
</p>
</div>
<div id="dialogFormSignum" title="+ Dmg/- Healing" class="form-group">
<form id="formSignum">
<fieldset>
<label for="Dmg">Dmg Signum</label>
<input type="text" name="Hp" id="HPSignum" value="0" class="text ui-widget-content ui-corner-all">
<button type="submit" form="formSignum" class="btn btn-default">Add</button>
<!-- Allow form submission with keyboard without duplicating the dialog button -->
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
<script type="text/javascript">
$(function () {
$("#hptextboxSignum").click(function () {
dialog.dialog("open");
})
});
dialog = $("#dialogFormSignum").dialog({
autoOpen: false,
height: 100,
width: 150,
modal: true,
position: { my: "left top", at: "left bottom", of: "#hptextboxSignum",collision:"none" }
});
</script>
</p>
</div>
<h3>
Xlenith
</h3>
<div>
<p>
<dl class="dl-horizontal">
<dt>
HP
</dt>
<dd>
44 <input data-val="true" data-val-number="The field HP must be a number." data-val-required="The HP field is required." id="hptextboxXlenith" name="HitPoints" type="text" value="44" />
</dd>
<dt>
AC
</dt>
<dd>
15 <input class="text-box single-line" data-val="true" data-val-number="The field AC must be a number." data-val-required="The AC field is required." id="AC" name="AC" type="number" value="15" />
</dd>
</dl>
<div>
<p>
<div class="tableinner">
<div class="rowinner">
<div class="cell single">
<table>
<tr>
<th class="bold left3">
Class
</th>
<th class="middle3">
Hit Dice
</th>
<th class="right3">
Remaining
</th>
</tr>
<tr>
<td class="left3">
Rogue
</td>
<td class="middle3">
6d8
</td>
<td class="right3">
6
</td>
</tr>
</table>
</div>
</div>
</div>
</p>
</div>
<div>
<p>
<div class="tableinner">
<div class="rowinner">
<div class="cell single">
<table>
<tr>
<th class="bold left3">
Class
</th>
<th class="middle3">
Spell Level
</th>
<th class="right3">
Number of Slots
</th>
</tr>
<tr>
<td class="left3">
Rogue
</td>
<td class="middle3">
1
</td>
<td class="right3">
4
</td>
</tr>
<tr>
<td class="left3">
Wizards
</td>
<td class="middle3">
1
</td>
<td class="right3">
3
</td>
</tr>
</table>
</div>
</div>
</div>
</p>
</div>
<div>
<p>
<div class="tableinner">
<div class="rowinner">
<div class="cell single">
<table>
<tr>
<th class="bold left3">
Name
</th>
<th class="middle3">
Attack Bonus
</th>
<th class="right3">
Damage
</th>
</tr>
<tr>
<td class="left3">
Bow
</td>
<td class="middle3">
7
</td>
<td class="right3">
1d6+4
</td>
</tr>
<tr>
<td class="left3">
FireBolt (Spell)
</td>
<td class="middle3">
5
</td>
<td class="right3">
2d10+0
</td>
</tr>
</table>
</div>
</div>
</div>
</p>
</div>
<div id="dialogFormXlenith" title="+ Dmg/- Healing" class="form-group">
<form id="formXlenith">
<fieldset>
<label for="Dmg">Dmg Xlenith</label>
<input type="text" name="Hp" id="HPXlenith" value="0" class="text ui-widget-content ui-corner-all">
<button type="submit" form="formXlenith" class="btn btn-default">Add</button>
<!-- Allow form submission with keyboard without duplicating the dialog button -->
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
<script type="text/javascript">
$(function () {
$("#hptextboxXlenith").click(function () {
dialog.dialog("open");
})
});
dialog = $("#dialogFormXlenith").dialog({
autoOpen: false,
height: 100,
width: 150,
modal: true,
position: { my: "left top", at: "left bottom", of: "#hptextboxXlenith",collision:"none" }
});
</script>
</p>
</div>
</div>
<script type="text/javascript">
window.onload = function () {
$("#accordion").accordion({
header:"h3",
collapsible: true,
heightStyle: 'content',
active: true,
autoHeight: 'false'
});
}
</script>
<hr />
<footer>
<p>© 2017 - greedyLumpSoftware</p>
</footer>
</div>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"adf5bf45868c4721afdcef8f90801e8a"}
</script>
<script type="text/javascript" src="http://localhost:50150/67e6deadba284fad806dfc341087e6bb/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
1 ответ
Решение
Простое решение - установить для каждого диалога свою уникальную переменную. Например:
https://jsfiddle.net/Twisty/8p7xf9n7/4/
JavaScript
$(function() {
$("#accordion").accordion({
header: "h3",
collapsible: true,
heightStyle: 'content',
active: true,
autoHeight: 'false'
});
var sigDiag = $("#dialogFormSignum").dialog({
autoOpen: false,
height: 100,
width: 150,
modal: true,
position: {
my: "left top",
at: "left bottom",
of: "#hptextboxSignum",
collision: "none"
}
});
var xlenDiag = $("#dialogFormXlenith").dialog({
autoOpen: false,
height: 100,
width: 150,
modal: true,
position: {
my: "left top",
at: "left bottom",
of: "#hptextboxXlenith",
collision: "none"
}
});
$("#hptextboxSignum").click(function() {
sigDiag.dialog("open");
});
$("#hptextboxXlenith").click(function() {
xlenDiag.dialog("open");
});
});
Это не сильно отличается, но я предпочитаю сначала настроить инициализацию элементов, а затем назначать обратные вызовы событий. Это просто помогает мне избежать путаницы и гарантирует, что все элементы создаются перед попыткой назначить действия.
Я бы также посоветовал переместить JavaScript в один блок и поместить его в <head> по сравнению со всем HTML. Если вы планируете сохранить его в HTML (поместите его в конец), вам не нужно переносить его в $(function(){});,