Asp net core MVC How to access HTML markup of partial view from parent page
I have a parent view that has a search form and a table for currently reserved rooms
parent view
<div id="searchForm">... </div>
<div class="col-sm-6" style="border:dashed red">
<span>Currently reserved rooms</span>
<table class="table active" id="AddTable">
<thead>
<tr>
<td>ID</td>
<td>Floor</td>
<td>Price</td>
<td>Number</td>
</tr>
</thead>
@if (Model.zaduzeneSobe != null)
foreach (var item in Model.Reservations)
<tr>
<td>@(item.Rooms.ID)</td>
<td>@(item.Rooms.Floor)</td>
<td>@(item.Rooms.Price)</td>
<td>@(item.Rooms.Number)</td>
<td><button>Remove</button></td>
</tr>
</table>
<div id="targetDiv"></div>
<form hidden="hidden"></form>
and the partial view that is called via Ajax and renders its HTML markup in the targetDiv
<table class="table table-hover" id="RoomFilter">
<thead>
<tr>
<th hidden="hidden">
</th>
<th>
@Html.DisplayNameFor(model => model.Number)
</th>
<th>
@Html.DisplayNameFor(model => model.Floor)
</th>
<th>
@Html.DisplayNameFor(model => model.Price)
</th>
<th></th>
</tr>
</thead>
<tbody>
@if (Model != null)
@foreach (var item in Model)
<tr>
<td hidden="hidden">@Html.DisplayFor(xitem => item.Id)</td>
<td>
@Html.DisplayFor(modelItem => item.Number)
</td>
<td>
@Html.DisplayFor(modelItem => item.Floor)
</td>
<td>
@Html.DisplayFor(modelItem => item.Price)
</td>
<td><button>Add</button></td>
</tr>
</tbody>
</table>
My plan was to when clicking on the "Add" button inside the partial view that the table row is marked as added and is copied into the table in the main page and a input field added inside the invisible form so the controller receives a IActionResult(List rooms). But I cant access the HTML elements inside the partial view. How do I access the HTML mark up of the partial view?
c# ajax asp.net-mvc razor-pages
add a comment |
I have a parent view that has a search form and a table for currently reserved rooms
parent view
<div id="searchForm">... </div>
<div class="col-sm-6" style="border:dashed red">
<span>Currently reserved rooms</span>
<table class="table active" id="AddTable">
<thead>
<tr>
<td>ID</td>
<td>Floor</td>
<td>Price</td>
<td>Number</td>
</tr>
</thead>
@if (Model.zaduzeneSobe != null)
foreach (var item in Model.Reservations)
<tr>
<td>@(item.Rooms.ID)</td>
<td>@(item.Rooms.Floor)</td>
<td>@(item.Rooms.Price)</td>
<td>@(item.Rooms.Number)</td>
<td><button>Remove</button></td>
</tr>
</table>
<div id="targetDiv"></div>
<form hidden="hidden"></form>
and the partial view that is called via Ajax and renders its HTML markup in the targetDiv
<table class="table table-hover" id="RoomFilter">
<thead>
<tr>
<th hidden="hidden">
</th>
<th>
@Html.DisplayNameFor(model => model.Number)
</th>
<th>
@Html.DisplayNameFor(model => model.Floor)
</th>
<th>
@Html.DisplayNameFor(model => model.Price)
</th>
<th></th>
</tr>
</thead>
<tbody>
@if (Model != null)
@foreach (var item in Model)
<tr>
<td hidden="hidden">@Html.DisplayFor(xitem => item.Id)</td>
<td>
@Html.DisplayFor(modelItem => item.Number)
</td>
<td>
@Html.DisplayFor(modelItem => item.Floor)
</td>
<td>
@Html.DisplayFor(modelItem => item.Price)
</td>
<td><button>Add</button></td>
</tr>
</tbody>
</table>
My plan was to when clicking on the "Add" button inside the partial view that the table row is marked as added and is copied into the table in the main page and a input field added inside the invisible form so the controller receives a IActionResult(List rooms). But I cant access the HTML elements inside the partial view. How do I access the HTML mark up of the partial view?
c# ajax asp.net-mvc razor-pages
Partial Answer: To be able to update/edit partial view html mock up, the main page requires a either a "<partial ... />" tag helper or a "@RenderPartial(...)" . In my question I did not have any of those. Adding one of them. even thou it renders nothings allows HTML modification after the Ajax call. Also if the ajax HTML is nested inside a <div> checking with jquery works as well (more info here "stackoverflow.com/questions/15657686/…" )
– Adin Sijamija
Jan 7 at 15:15
add a comment |
I have a parent view that has a search form and a table for currently reserved rooms
parent view
<div id="searchForm">... </div>
<div class="col-sm-6" style="border:dashed red">
<span>Currently reserved rooms</span>
<table class="table active" id="AddTable">
<thead>
<tr>
<td>ID</td>
<td>Floor</td>
<td>Price</td>
<td>Number</td>
</tr>
</thead>
@if (Model.zaduzeneSobe != null)
foreach (var item in Model.Reservations)
<tr>
<td>@(item.Rooms.ID)</td>
<td>@(item.Rooms.Floor)</td>
<td>@(item.Rooms.Price)</td>
<td>@(item.Rooms.Number)</td>
<td><button>Remove</button></td>
</tr>
</table>
<div id="targetDiv"></div>
<form hidden="hidden"></form>
and the partial view that is called via Ajax and renders its HTML markup in the targetDiv
<table class="table table-hover" id="RoomFilter">
<thead>
<tr>
<th hidden="hidden">
</th>
<th>
@Html.DisplayNameFor(model => model.Number)
</th>
<th>
@Html.DisplayNameFor(model => model.Floor)
</th>
<th>
@Html.DisplayNameFor(model => model.Price)
</th>
<th></th>
</tr>
</thead>
<tbody>
@if (Model != null)
@foreach (var item in Model)
<tr>
<td hidden="hidden">@Html.DisplayFor(xitem => item.Id)</td>
<td>
@Html.DisplayFor(modelItem => item.Number)
</td>
<td>
@Html.DisplayFor(modelItem => item.Floor)
</td>
<td>
@Html.DisplayFor(modelItem => item.Price)
</td>
<td><button>Add</button></td>
</tr>
</tbody>
</table>
My plan was to when clicking on the "Add" button inside the partial view that the table row is marked as added and is copied into the table in the main page and a input field added inside the invisible form so the controller receives a IActionResult(List rooms). But I cant access the HTML elements inside the partial view. How do I access the HTML mark up of the partial view?
c# ajax asp.net-mvc razor-pages
I have a parent view that has a search form and a table for currently reserved rooms
parent view
<div id="searchForm">... </div>
<div class="col-sm-6" style="border:dashed red">
<span>Currently reserved rooms</span>
<table class="table active" id="AddTable">
<thead>
<tr>
<td>ID</td>
<td>Floor</td>
<td>Price</td>
<td>Number</td>
</tr>
</thead>
@if (Model.zaduzeneSobe != null)
foreach (var item in Model.Reservations)
<tr>
<td>@(item.Rooms.ID)</td>
<td>@(item.Rooms.Floor)</td>
<td>@(item.Rooms.Price)</td>
<td>@(item.Rooms.Number)</td>
<td><button>Remove</button></td>
</tr>
</table>
<div id="targetDiv"></div>
<form hidden="hidden"></form>
and the partial view that is called via Ajax and renders its HTML markup in the targetDiv
<table class="table table-hover" id="RoomFilter">
<thead>
<tr>
<th hidden="hidden">
</th>
<th>
@Html.DisplayNameFor(model => model.Number)
</th>
<th>
@Html.DisplayNameFor(model => model.Floor)
</th>
<th>
@Html.DisplayNameFor(model => model.Price)
</th>
<th></th>
</tr>
</thead>
<tbody>
@if (Model != null)
@foreach (var item in Model)
<tr>
<td hidden="hidden">@Html.DisplayFor(xitem => item.Id)</td>
<td>
@Html.DisplayFor(modelItem => item.Number)
</td>
<td>
@Html.DisplayFor(modelItem => item.Floor)
</td>
<td>
@Html.DisplayFor(modelItem => item.Price)
</td>
<td><button>Add</button></td>
</tr>
</tbody>
</table>
My plan was to when clicking on the "Add" button inside the partial view that the table row is marked as added and is copied into the table in the main page and a input field added inside the invisible form so the controller receives a IActionResult(List rooms). But I cant access the HTML elements inside the partial view. How do I access the HTML mark up of the partial view?
c# ajax asp.net-mvc razor-pages
c# ajax asp.net-mvc razor-pages
asked Nov 15 '18 at 17:19
Adin SijamijaAdin Sijamija
13
13
Partial Answer: To be able to update/edit partial view html mock up, the main page requires a either a "<partial ... />" tag helper or a "@RenderPartial(...)" . In my question I did not have any of those. Adding one of them. even thou it renders nothings allows HTML modification after the Ajax call. Also if the ajax HTML is nested inside a <div> checking with jquery works as well (more info here "stackoverflow.com/questions/15657686/…" )
– Adin Sijamija
Jan 7 at 15:15
add a comment |
Partial Answer: To be able to update/edit partial view html mock up, the main page requires a either a "<partial ... />" tag helper or a "@RenderPartial(...)" . In my question I did not have any of those. Adding one of them. even thou it renders nothings allows HTML modification after the Ajax call. Also if the ajax HTML is nested inside a <div> checking with jquery works as well (more info here "stackoverflow.com/questions/15657686/…" )
– Adin Sijamija
Jan 7 at 15:15
Partial Answer: To be able to update/edit partial view html mock up, the main page requires a either a "<partial ... />" tag helper or a "@RenderPartial(...)" . In my question I did not have any of those. Adding one of them. even thou it renders nothings allows HTML modification after the Ajax call. Also if the ajax HTML is nested inside a <div> checking with jquery works as well (more info here "stackoverflow.com/questions/15657686/…" )
– Adin Sijamija
Jan 7 at 15:15
Partial Answer: To be able to update/edit partial view html mock up, the main page requires a either a "<partial ... />" tag helper or a "@RenderPartial(...)" . In my question I did not have any of those. Adding one of them. even thou it renders nothings allows HTML modification after the Ajax call. Also if the ajax HTML is nested inside a <div> checking with jquery works as well (more info here "stackoverflow.com/questions/15657686/…" )
– Adin Sijamija
Jan 7 at 15:15
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53324798%2fasp-net-core-mvc-how-to-access-html-markup-of-partial-view-from-parent-page%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53324798%2fasp-net-core-mvc-how-to-access-html-markup-of-partial-view-from-parent-page%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Partial Answer: To be able to update/edit partial view html mock up, the main page requires a either a "<partial ... />" tag helper or a "@RenderPartial(...)" . In my question I did not have any of those. Adding one of them. even thou it renders nothings allows HTML modification after the Ajax call. Also if the ajax HTML is nested inside a <div> checking with jquery works as well (more info here "stackoverflow.com/questions/15657686/…" )
– Adin Sijamija
Jan 7 at 15:15