Databases
StackOverflow2013
Postsdbo
POASP MVC3 - Using partial view to append new HTML elements to page
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POASP MVC3 - Using partial view to append new HTML elements to page
    primarykey
    data
    text
    <p>I am currently using an Ajax call on my ASP MVC3 view to append a new list item to the page. The view makes the Ajax call, which calls a controller <code>ViewResult</code> action, which returns the partial view. The Ajax is then set to call the <code>.append(html)</code> method on the <code>&lt;div&gt;</code> element the call originated from. </p> <p>The problem is that instead of appending the new row, the entire view goes away and only the partial is displayed. </p> <p>Here is the code in the view. This view uses a view model with a list object of a separate model. This portion of the code calls the partial view to display each of the items in the list object. </p> <pre><code>@model Monet.ViewModel.BankListViewModel @using (Html.BeginForm()) { &lt;fieldset&gt; &lt;legend&gt;Stat(s) Fixed&lt;/legend&gt; &lt;table&gt; &lt;th&gt;State Code&lt;/th&gt; &lt;th&gt;Agent ID&lt;/th&gt; &lt;th&gt;&lt;/th&gt; &lt;div class="fixedRows"&gt; @foreach(var item in Model.Fixed) { if (!String.IsNullOrWhiteSpace(item.AgentId)) { @Html.Partial("FixedPartialView", item) } } &lt;/div&gt; &lt;/table&gt; &lt;br /&gt; @Html.ActionLink("Add another", "BlankFixedRow", null, new { id = "addFixed"}) &lt;/fieldset&gt; } </code></pre> <p>Here is the <code>addFixed</code> Ajax call</p> <pre><code>$("#addFixed").click(function () { $.ajax({ url: this.href, cache: false, success: function (html) { $("#fixedRows").append(html); } }); return false; }); </code></pre> <p>and this is the <code>ViewResult</code> controller action that the Ajax calls</p> <pre><code> public ViewResult BlankFixedRow() { SelectList tmpList = new SelectList(new[] { "AL", "AK", "AS", "AZ", "AR", "CA", "CO", "CT", "DE", "DC", "FM", "FL", "GA", "GU", "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA", "ME", "MH", "MD", "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NH", "NJ", "NA", "NM", "NY", "NC", "ND", "MP", "OH", "OK", "OR", "PW", "PA", "PR", "RI", "SC", "SD", "TN", "TX", "UT", "US", "VT", "VI", "VA", "WA", "WV", "WI", "WY" }); ViewBag.StateCodeList = tmpList; return View("FixedPartialView", new BankListAgentId()); } </code></pre> <p>Finally, this is the partial view. </p> <pre><code>@model Monet.Models.BankListAgentId @using (Html.BeginCollectionItem("Fixed")) { &lt;tr id="item-@Model.AgentId"&gt; &lt;td&gt; @Html.DropDownListFor(model =&gt; model.StateCode, (SelectList)ViewBag.StateCodeList, Model.StateCode) &lt;/td&gt; &lt;td&gt; @Html.EditorFor(model =&gt; model.AgentId) @Html.ValidationMessageFor(model =&gt; model.AgentId) &lt;/td&gt; &lt;td&gt; &lt;a href="#" onclick="$('#item-@Model.AgentId').parent().remove();" style="float:right;"&gt;Delete&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; } </code></pre> <p>When the <code>Add another</code> link is selected the page goes from looking like this</p> <p><img src="https://i.stack.imgur.com/rCCrT.png" alt="enter image description here"></p> <p>to this </p> <p><img src="https://i.stack.imgur.com/vYySy.png" alt="enter image description here"></p> <p>Per comments below here is the HTML for the page: </p> <pre><code>&lt;input type="hidden" name="Fixed.index" autocomplete="off" value="6dd1b028-14f7-4400-95d1-a803c2521b68" /&gt; &lt;tr id="item-"&gt; &lt;td&gt; &lt;select id="Fixed_6dd1b028-14f7-4400-95d1-a803c2521b68__StateCode" name="Fixed[6dd1b028-14f7-4400-95d1-a803c2521b68].StateCode"&gt;&lt;option&gt;AL&lt;/option&gt; &lt;option&gt;AK&lt;/option&gt; &lt;option&gt;AS&lt;/option&gt; &lt;option&gt;AZ&lt;/option&gt; . . . &lt;-removed list of all 50 states for clarity &lt;/select&gt; &lt;/td&gt; &lt;td&gt; &lt;input class="text-box single-line" id="Fixed_6dd1b028-14f7-4400-95d1-a803c2521b68__AgentId" name="Fixed[6dd1b028-14f7-4400-95d1-a803c2521b68].AgentId" type="text" value="" /&gt; &lt;/td&gt; &lt;td&gt; &lt;a href="#" class="deleteRow"&gt;delete&lt;/a&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/section&gt; </code></pre> <p>EDIT</p> <p>After reading the comments below I changed the table tag to <code>&lt;table id="fixedRows"&gt;</code>, however, this returned the same result. I then changed the <code>success</code> attribute of the Ajax call to include some basic HTML like so</p> <pre><code>success: function (html) { $("#fixedRows").append("&lt;tr&gt;&lt;td&gt;New&lt;/td&gt;&lt;/tr&gt;"); } </code></pre> <p>but again, got the same result. After setting a breakpoint both in Visual Studio and Chrome's debugger, I was able to see that the Ajax is never being called. Instead the call to the controller action is made, and the partial view is loaded on it's own, instead of being appended to <code>&lt;table id="fixedRows"&gt;</code>. </p> <p>Still working of getting around this, however, if anyone has any ideas. Thx!</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USNealR
    1. USNealR
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POASP MVC3 - Using partial view to append new HTML elements to page
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POASP MVC3 - Using partial view to append new HTML elements to page
      1. This table or related slice is empty.
      1. VTUpMod
    1. COIs there a reason you want to use Ajax to do the partial call? When you use Ajax you have to remember the state of the previous page in order for Ajax to redisplay the page
      singulars
      1. POASP MVC3 - Using partial view to append new HTML elements to page
      1. USRobert
    2. COI'm following this blog post: http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/
      singulars
      1. POASP MVC3 - Using partial view to append new HTML elements to page
      1. USNealR
    3. COCan you inspect the rendered markup of the table after clicking 'Add another' and post that?
      singulars
      1. POASP MVC3 - Using partial view to append new HTML elements to page
      1. USAnt P
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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