Databases
StackOverflow2013
Postsdbo
POPassing ul li elements using JSON to MVC 4 Controller on POST
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPassing ul li elements using JSON to MVC 4 Controller on POST
    primarykey
    data
    text
    <p>I am trying to wrap my head around how to pass ul li elements on Post to an MVC 4 controller. So far I understand that the ul li elements will not show up in the FormsCollection and am pretty sure that I need to pass them as a json object. So here is what I have so far based on what I could find researching ...</p> <p>View Code:</p> <pre><code> &lt;ul class="listdragable" id="OperationCountries"&gt; &lt;lh&gt;@Trans["OperationCountries"]&lt;/lh&gt; @foreach (var item in Countries) { if(item.Assigned == true) { &lt;li class="country" id="@item.ID" value="@item.ID" &gt; &lt;input type="checkbox" name="selectedCountries" id="@item.ID" &gt;@item.Name&lt;/li&gt; } } &lt;/ul&gt; &lt;p&gt; &lt;button onclick="postSortOrder()"&gt;Click me&lt;/button&gt; @*&lt;input type="submit" value="@Trans["Save"]" /&gt; *@ &lt;/p&gt; &lt;script type="text/javascript"&gt; function postSortOrder() { $.ajax({ data: { selectedCountries: $('#OperationCountries li').get() }, type: 'POST', traditional: true //success: updateMessage }); } </code></pre> <p></p> <p>Controller:</p> <pre><code>[HttpPost] public ActionResult EditCountries(int id, FormCollection formCollection, List&lt;int&gt; selectedCountries) </code></pre> <p>when I check the value of selectedCountries the count is 0</p> <p>I have also noticed that the FormCollection now only contains the selectedCountries object and non of my other form elements which I have not listed in the view code for simplicity. Also when I take the json approach I dont have access to the model as I do with the scaffolding.</p> <p>So my question is how can I pass the UL LI items and the model of the view to the controller?</p> <p>Thanks in advance for your thoughts</p> <hr> <p>so this is what I ended up doing thanks to suggestions by Lance Hudson(Update 3 approach is what I ended up using)</p> <p>I ended up taking the hidden field route </p> <pre><code>&lt;input type="hidden" id="selectedCountryList" name="selectedCountryList" value="" /&gt; &lt;p&gt; &lt;button class="submit" onclick="submitMyForm()"&gt;Submit&lt;/button&gt; &lt;/p&gt; &lt;script type="text/javascript"&gt; function submitMyForm() { var liIds = $('#OperationCountries li').map(function (i, n) { return $(n).attr('id'); }).get().join(','); $('#selectedCountryList').val(liIds); $('#myform').submit(); } &lt;/script&gt; </code></pre> <p>and my controller looks like</p> <pre><code> [HttpPost] public ActionResult EditCountries(Operation operation,FormCollection formCollection) { string s = formCollection["selectedCountryList"].ToString(); string [] selectedCountries = s.Split(','); } </code></pre> <p>not sure if this is the best approach or not but it works for now. I started to dabble in how to Post complex JSON Objects and overwriting the DefaultModelBinder approaches but dont have enough understanding to take that route. I still think there should be a cleaner way of passing non input, select and textarea element values combined with the model to the action methods on the controller. Especially if your trying to do anything with JQuery UI it seems ul li elements are used extensively. Any way thanks again Lance :)</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USuser2129585
    1. USuser2129585
    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
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

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