StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO@Html.Hidden has wrong value when populating a div with the response from an AJAX call
text
Body
copied!<p>I have a simple view that contains a <code>div</code> with a partial view inside of it. The partial view contains a list of items. Each item is either shown in an excluded state (marked with XXX) or is shown with a button to exclude the item (which uses <code>Ajax.BeginForm</code>) to submit the <code>Id</code> and to update its state and redraw the list.</p> <p>When the page is first drawn, it works correctly, however when the partial view is re-rendered after an Ajax call to exclude an item, rather than each item in the list having its unique <code>itemId</code> they all have the <code>itemId</code> of the item that was excluded by the form submission.</p> <p><strong>Index.cshtml (Main View)</strong></p> <pre><code>@model IEnumerable<StackOverflowMvc.Controllers.TestModel> <div id="modelList"> @Html.Partial("ItemList", Model) </div> @section Scripts { @Scripts.Render("~/bundles/jqueryval") } </code></pre> <p><strong>ItemList.cshtml (Partial View)</strong></p> <pre><code>@model IEnumerable<StackOverflowMvc.Controllers.TestModel> <ul> @foreach (var item in Model) { <li> <label>@item.Name</label> @if(item.Excluded) { <label>XXX</label> } else { using (Ajax.BeginForm("ExcludeItem", new AjaxOptions { HttpMethod = "post", InsertionMode = InsertionMode.Replace, UpdateTargetId = "modelList" })) { @Html.Hidden("id", item.Id)  <input type="submit" value="Check" /> } } </li> } </ul> </code></pre> <p>I can get the page to work by commenting out the <code>@Html.Hidden</code> and uncommenting the hidden input (in which case the correct value is set to the id of the item).</p> <p>What’s going on here? Is there something wrong with the way I am using <code>Html.Hidden</code>, or the Ajax form? Or is it just not supposed to work in this situation?</p> <p><strong>HomeController.cs (just in case it's relevant)</strong></p> <pre><code>public class TestModel { public int Id { get; set; } public string Name { get; set; } public bool Excluded { get; set; } } public class HomeController : Controller { static List<TestModel> _items = new List<TestModel>{ new TestModel { Id=1, Name="Item 1", Excluded=false }, new TestModel { Id=2, Name="Item 2", Excluded=false }, new TestModel { Id=3, Name="Item 3", Excluded=false }, new TestModel { Id=4, Name="Item 4", Excluded=false } }; public ActionResult Index() { return View(_items); } public ActionResult GetItems() { return PartialView("ItemList", _items); } [HttpPost] public ActionResult ExcludeItem(int id) { _items.Find(x=>x.Id == id).Excluded = true; return PartialView("ItemList", _items); } } </code></pre> <p>Sample output, to help illustrate the problem:</p> <p><strong>modelList div on page load</strong></p> <pre><code><div id="modelList"> <ul> <li> <label>Item 1</label> <form action="/Home/ExcludeItem" data-ajax="true" data-ajax-method="post" data-ajax-mode="replace" data-ajax-update="#modelList" id="form0" method="post"> <input id="id" name="id" type="hidden" value="1" /> <input type="submit" value="Check" /> </form> </li> <li> <label>Item 2</label> <form action="/Home/ExcludeItem" data-ajax="true" data-ajax-method="post" data-ajax-mode="replace" data-ajax-update="#modelList" id="form1" method="post"> <input id="id" name="id" type="hidden" value="2" /> <input type="submit" value="Check" /> </form> </li> <li> <label>Item 3</label> <form action="/Home/ExcludeItem" data-ajax="true" data-ajax-method="post" data-ajax-mode="replace" data-ajax-update="#modelList" id="form2" method="post"> <input id="id" name="id" type="hidden" value="3" /> <input type="submit" value="Check" /> </form> </li> <li> <label>Item 4</label> <form action="/Home/ExcludeItem" data-ajax="true" data-ajax-method="post" data-ajax-mode="replace" data-ajax-update="#modelList" id="form3" method="post"> <input id="id" name="id" type="hidden" value="4" /> <input type="submit" value="Check" /> </form> </li> </ul> </div> </code></pre> <p><strong>modelList after submitting to exclude item 2 (notice all inputs have value="2")</strong></p> <pre><code><div id="modelList"> <ul> <li> <label>Item 1</label> <form action="/Home/ExcludeItem" data-ajax="true" data-ajax-method="post" data-ajax-mode="replace" data-ajax-update="#modelList" id="form0" method="post"> <input id="id" name="id" type="hidden" value="2" /> <input type="submit" value="Check" /> </form> </li> <li> <label>Item 2</label> <label>XXX</label> </li> <li> <label>Item 3</label> <form action="/Home/ExcludeItem" data-ajax="true" data-ajax-method="post" data-ajax-mode="replace" data-ajax-update="#modelList" id="form1" method="post"> <input id="id" name="id" type="hidden" value="2" /> <input type="submit" value="Check" /> </form> </li> <li> <label>Item 4</label> <form action="/Home/ExcludeItem" data-ajax="true" data-ajax-method="post" data-ajax-mode="replace" data-ajax-update="#modelList" id="form2" method="post"> <input id="id" name="id" type="hidden" value="2" /> <input type="submit" value="Check" /> </form> </li> </ul> </div> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload